By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Semantic elements of HTML

Tutorial on how to use the Semantic elements of HTML.

Edited: 2014-10-30 18:33

Semantic elements are important to properly transfer meaning on pages. These elements can be used by non-visual user agents, such as search engines, screen readers, etc.

These Semantic elements can be used to make it easer to navigate on your pages, and even to help search engines understand your page.

The article element

This element should be placed in the body section of your page, and should contain the main content.

The main content is either an independent Article, Blog post, or Forum post. It can also be used in online shops, for the individual products, along with their description.

Comments on blogs, or responses in forum threeds, should also be marked up with the article element.

The nav element

This element is used for the navigation on your pages, if your page includes navigation-links, then they should be kept inside the nav element.

If the links are part of the main content, such as an "See also", or "external links" section, then they ain't navigational links, and shouldn't be kept in a nav element. Another situration where the links can't be considered navigational, is the results on the SERPs.

Below is an example using an ordered list, to hold a collection of links.

<nav>
 <ol>
   <li><a href="http://brugbart.com/Infrastructure/About_8.html">About Us</a></li>
   <li><a href="http://brugbart.com/Infrastructure/Privacy-Policy_54.html">Privacy Policy</a></li>
   <li><a href="http://brugbart.com/Infrastructure/Contact_9.html">Contact</a></li>
 </ol>
</nav>

The header element

This element is mainly used for typical page headers as we know them, but also to optionally markup the first level heading in its section (Any of the h1-h6 elements, but h1 is recommended). A header element can be used to contain the company name, logo, search form, and even a Contents List of its section, linking to individual subsections. The header element is not a sectioning element, so you should include at least one h1-h6 element, if you want to begin a section.

The footer element

The footer element can contain copyright information, sometimes a link to the privacy policy, and its usually placed directly in the body section of a page. But it can also be used to keep contact information for the Authors of individual sections.

If you include contact information in your footer, then you may want to include a address element as well.

The strong element

The strong element is used to to create a strong emphasis, and should be used when there is something you wich people to really pay attention to. Much similier to speaking laud in the real world.

The em element

This element is used to indicate a lighter emphasis, and can be used to markup technical words and terms releted to an article, such as phrases and words, which has special meaning on a page.

Another place where you can use the em element, is right after having used strong element, on something that is connected, but of less importance to what you marked up using strong.

The p element

This element is used to markup text on a page, and stands for paragraph. Most text should be marked up with the p element.

The h1 to h6 elements

These elements are used for headings, and also create a section. If however, they are used together with the section element, the section element will decide the level of the section, rather then the heading number used.

Full Example

The below is a full example of how to use these elements.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
     header, article, section, footer, nav { /* Older browsers need this fix, to render these elements properly */
     display: block;
    }
     
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     */
     section {
     border: 1px solid #298e31;
     padding: 1em;
    }
     header, footer {
      border: 1px solid #ffd05b;
      padding: 1em;
     }
     nav {
      border: 1px solid #66e2ff;
      margin: 1em;
     }
     article {
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <header>
      <img src="/saek/mappen-billeder/brugbartL_Normal.png" alt="Company Logo">
    </header>
    <article>
      <section>
       <h1>Example of how to use Semantic elements</h1>
       <p>Using <em>h1</em> together with article, and section elements. <strong>This begins the main Article.</strong></p>
       
       <section>
        <h1>This is a subsection of the main article</h1>
        <p>Some more text</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>Some more text</p>
        </section>
       </section>
      </section>
    </article>
    <nav>
     <ol>
      <li><a href="http://brugbart.com/Infrastructure/About_8.html">About Us</a></li>
      <li><a href="http://brugbart.com/Infrastructure/Privacy-Policy_54.html">Privacy Policy</a></li>
      <li><a href="http://brugbart.com/Infrastructure/Contact_9.html">Contact</a></li>
     </ol>
    </nav>
    <footer>
      <p>Copyright © Brugbart</p>
    </footer>
  </body>

</html>

Brugbart Vision!

Past: Paragraphs and Headings in HTML Next: Images and Links in HTML