Semantic HTML and More HTML Elements

Photo by Jackson Sophat on Unsplash

This article is part of a series on learning HTML. This link will take you to part one of the series if you need to catch up. This link will take you to part two.

HTML is used to markup content for the sake of presentation and appearance, but it can also be used to represent semantics.

This involves conveying the meaning and purpose of the content to browsers and other developers.

Semantic HTML aids in accessibility, search engine optimization, and code maintainability and readability.

In this article we are going to look at some semantic HTML elements, as well as equivalents that hold no real semantic meaning.

Emphasis Element

The emphasis element is used to emphasize content. The default styling of an emphasized element is italics. This is a semantic element that represents emphasis on any enclosed content.

<p>The final word in this sentence is <em>emphasized</em>.</p>

Italics Element

The italics element is used to style an element with italics. By default, this styles the element the same way as the emphasis element, but does not carry the semantic meaning of the <em> tag. It is simply used for style.

<p>The final word in this sentence is in <i>italics</i>.</p>

Strong Element

The strong element indicates that text is urgent or of strong importance. The default styling of a strong element is bold. This is a semantic element that represents urgency or importance of any enclosed content.

<p>The final word in this sentence is <strong>important</strong>.</p>

Bold Element

The bold element is used to style content in a bold font weight. By default, this styles the element the same way as the strong element, but does not carry the semantic meaning of the <strong> tag. It is simply used for style.

<p>The final word in this sentence is <b>bold</b>.</p>

Figures

Figure elements are used to associate images with captions. The image and figcaption elements are nested within the figure element.

<figure>
  <img src="doge.jpg" alt="A smiling dog." />
  <figcaption>This is an image caption</figcaption>
</figure>

Div Element

A div element is used for design layout purposes. It is by default a block-level element. A div is essentially a box with no semantic meaning that can be used to enclose and style other content.

<div>
  <h2>This is a div section.</h2>
  <p>It can be used to separate, position, and style content.</p>
</div>

If you want to apply semantic meaning to an enclosing element, use one of the following elements instead. They function as divs but have semantic meaning.

Main Element

The main element identifies the main content of a page. For example, it could be used to identify all content on a page that is not repeated on other pages of the website (like navigation bars, footers, etc.)

<main>
  <h1>Heading</h1>
  <p>This is a paragraph.</p>
</main>

Header Element

The header contains introductory content such as headings, logos, and navigation menus. If the same content appears at the top of multiple pages on your website, it probably belongs in the header section.

<header>
  <h1>Buddy's Website</h1>
  <p>Web Developer Canine Extraordinaire</p>
</header>

Footer Element

A footer is usually nested at the end of its nearest ancestor and contains information about the author, copyright, or links to related resources.

<footer>
  <p>Copyright &copy; Buddy the Beagador</p>
</footer>

Section Element

The section element identifies a section within a web page. This section has no other semantic meaning attached to it.

With few exceptions, section elements should contain some kind of heading element to title the section.

<section>
  <h2>About Section</h2>
  <p>Buddy is a good boy.</p>
</section>

Article Element

The Article element identifies an article within a web page. Semantically, this should be self-contained content that makes sense independently, and could be distributed on its own. This might include blog posts, news articles, forum posts, and other content.

<article>
  <h2>The Importance of Being Doge</h2>
  <p>Much importance. Very role model.</p>
</article>

Nav Element

The nav element represents a menu used to access other content, either within the same website, or externally. Within a nav element, a list of links can be presented as an unordered list.

<nav>
  <h2>Navigation</h2>
  <ul>
    <li><a href="<https://brendangasparin.com/blog>">Brendan's Website</a></li>
    <li><a href="<https://brendangasparin.com/blog/>">Brendan's Blog</a></li>
    <li><a href="<https://www.x.com/brendangasparin/>">Brendan's X Account</a></li>
  </ul>
</nav>

Classes

Classes can be used to target elements with CSS and JavaScript (which we will cover elsewhere). You apply a class to an element with the class attribute.

<p class="my-class">This paragraph belongs to my-class.</p>
<p>This paragraph has no class.</p>
<p class="my-class">This paragraph also belongs to my-class.</p>
<p class="your-class">This paragraph belongs to your class.</p>

You can give multiple classes to a HTML element by separating the values with spaces. The rules of each class (e.g. CSS) rules will be applied to the element. When you do this, the classes listed later may overwrite the rules of the ones listed earlier.

<div class="mammal dog">
  <p>Brian Griffin is a very loquacious dog.</p>
  <p>But can he write HTML?</p>
</div>

IDs

You can give a unique id attribute value to a HTML element to identify it or target it with other languages (e.g. CSS or JavaScript). No two elements in the same HTML document should have the same id attribute. It should be a unique identifier.

<div id=”dog-info”>
  <p>Dogs should not eat onions, grapes, or chocolate.</p>
  <p>Dogs should eat meat, dog food, and the occasional vegetable.</p>
  <p>Carrots, zucchini, and sweet potato are healthy treats for dogs.</p>
</div>

You can do an interesting thing with the id attribute of an element and an anchor (i.e. link) element. If you link to a URL followed by a hashtag followed by an id attribute value used on the destination HTML page, the browser will go to the element with that id upon loading the link.

<a href="./linked-page.html#target-id>Click here.</a>

If you just link to the hashtag and the id, it will attempt to go the corresponding element on the current page.

<section>
  <h2>This is the first section.</h2>
  <p>Here is a link to the <a href="#second-section">second section.</p>
</section>
<section>
  <h2 id="second-section">This is the second section.</h2>
  <p>Here is a paragraph.</p>
</section>

For example, if the user clicks the link in the first section, their browser will jump to the matching id in the heading of the second section.

Conclusion

In this article we have covered some semantic HTML elements and their less semantic contemporaries like divs.

We also had a look at the id attribute and class attribute, which will become important when we start using Cascading Style Sheets (CSS) and JavaScript (JS).

If you enjoyed this article and want similar content delivered straight to your email inbox on a weekly basis then please sign up for my free mailing list.

I wish you all the best in your journey of learning and discovery!