DEV Community

Cover image for Getting Started with Semantic HTML
Pieces 🌟
Pieces 🌟

Posted on • Edited on • Originally published at code.pieces.app

Getting Started with Semantic HTML

Semantic HTML Tree.

As you know, HTML (HyperText Markup Language) is the essential building block of the web. All web applications use HTML to create structured documents for web pages. HTML indicates texts, images, and other contents on a web page using unique tags such as <img />, <head></head>, <body></body>, <p></p>, and <ul></ul>.

There are specific guidelines and rules for using HTML, and one of these rules is specifying the doctype for the HTML file. This is declared at the top of the file with <!DOCTYPE >. The doctype informs the browser of the HTML document type, ensuring that the browser renders the file using the relevant specification for the document. You can see the doctype declaration for HTML5 below:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

Save this code

Guidelines for writing HTML documents ensure that the browser correctly renders the document. These guidelines are followed by writing semantic HTML. However, the browser does not enforce HTML rules. For example, when a div element is used to render what should be a button, the browser will still render the file:

<!-- A div styled as a button -->
<div>
    Click Me 
</div>

<!-- A proper button -->
<button>
    Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

Save this code

In the HTML code above, you can style the two tags using Cascading Style Sheet (CSS) to look like and function as a button.

What is Semantic HTML?

Semantic HTML involves writing HTML code that focuses not only on presentation, but also effectively describes the purpose of the document/code blocks using required HTML tags and elements. Writing semantic HTML helps define a document for the browser and the developer.

The Importance of Semantic HTML

Writing semantic HTML improves the browser readability of HTML documents, ensuring that the web page will be rendered correctly. Also, a good SEO practice is to use the proper tags when writing an HTML document; this will enable easier crawling of the web page. In addition, a properly written HTML document also helps improve other aspects of a web page, including structure, accessibility, styling, etc.

Structure

Semantic HTML provides a better structure for web pages, whereas a code block describes what it presents. An example with appropriate tags can be seen here:

<!-- Ordered List -->
<ol>
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
</ol>

<!-- Unordered List -->
<ul>
    <li>
        Item
    </li>
    <li>
        Another Item
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Save this code

The code block uses the <ol></ol> tag to represent a group of ordered list items, while the <li></li> tag is used to distinguish each list item in the code. The <ul></ul> tag groups a list of unordered items in the code block. Semantic HTML suggests to developers the type of data to put into the element/what will be displayed.

Accessibility

The accessibility of a website for people with a disability depends significantly on the web page structure. Writing semantic HTML makes a web page more easily understood by screen readers, which improves accessibility for visually impaired audiences.

Further, semantic HTML simplifies finding useful blocks of codes, as opposed to sifting through <div></div> tags. When looking for a block of code in a semantic HTML web page, search for the <code></code> and <nav></nav> tag to access the page navigation.

Styling

Semantic HTML allows your web page to apply the user agent stylesheet properly; these are default styles given to a web page by the browser. Also, semantic HTML makes it easier to cascade styles in a custom style sheet. Referring back to the HTML lists above, if you need to style a specific ordered list item, you know that it must be a <li></li> tag within a <ol></ol> tag; thus, you can write the style selector: ol > li.

How to Write Semantic HTML

In general, writing semantic HTML code goes beyond presentation and focuses on writing meaningful codes that describe its functionalities. To do this, we’ll use some unique tags and elements to describe sections of a web page.

The first building block in a web page is the doctype declared at the top of the document. Following this, we have the <html></html> tag, which wraps other elements in the document. Within the HTML tag, we have the <head></head> and <body></body> tag, respectively. The head tags hold information about the web page, while the body tag holds the web page contents:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Web page information -->
</head>
<body>
    <!-- Web page content -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Save this code

Semantic Elements and Non-semantic Elements

Semantic elements are HTML elements that describe their content, while non-semantic elements hold no meaning for their content (e.g. <div></div>, <span></span>). When writing HTML documents, you need to think carefully about the content of an element before choosing the tag that properly represents the content. For example, is it an article, section, ordered list, or unordered list? Thinking in this way helps you write meaningful HTML codes.

There are a handful of semantic HTML elements, but for this article, we’ll be covering the ones mentioned below;

<header>, <nav>, <main>, <aside>, <article>, <section>, <summary>, <figcaption>, <details>, <abbr>, <code>, heading groups <h1> - <h6> and <picture>.

Header

The header elements contain introductory elements for the web page, such as navigation items, logo, and hero section of the page.

Nav

The nav tag holds useful links for navigating a current web page or to other pages in an HTML document:

<!-- Example of a navigation links -->

<nav>
    <ul>
        <li>
            <a href="#hero">
                Hero link
            </a>
        </li>
        <li>
            <a href="page1.html">
                Page 1
            </a>
        </li>
        <li>
            <a href="page2.html">
                Page 2
            </a>
        </li>
    </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

Save this code

Main

The main element contains the primary content within the document body. It can be content that extensively explains or expands on information about the web page.

Aside

The aside element holds secondary information not required to understand the web page.

Article

The article element is a piece of information that is independent and reusable. It can be removed from a web page, and the web page will still make sense.

Section

This element is a section of standalone information that another semantic element cannot adequately describe.

Summary

This element defines a summary for a <details> element block:

<!-- Example of a details and summary -->

<details>
    <summary>This is the summary for the full details </summary>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, itaque. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Nostrum animi quaerat fugit ab corporis minima corrupti soluta odio harum deserunt, quae dicta
    natus repellendus repellat facere sed quod delectus consectetur!
</details>
Enter fullscreen mode Exit fullscreen mode

Save this code

When the summary element above it toggles the content in the details tag, it appears like this:

​

Figcaption

The figcaption element represents a caption that describes its parent <figure></figure> tag:

<!--Example demonstrating how figcaption is used -->

<figure>
    <img src="sample-image.webp" alt="a sample image">
    <figcaption>
        A sample image to demonstrate captions
    </figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Save this code

Abbr

The abbr element defines an abbreviation/acronym; it has a title attribute containing the expanded version:

   <!-- How to use abbr tag -->

    <abbr title="HyperText Markup Language">HTML</abbr> 
Enter fullscreen mode Exit fullscreen mode

Save this code

Code

The <code> tag displays its content as a computer code sample.

Heading Groups

to

These semantic elements give their contents the role of headings, with priority levels from one to six. For example, the <h1> represents the most important heading on the page. The browser user agent has a default style applied to the heading group tags that emphasize the priority level of each element.

Picture

The <picture> tag allows you to provide different images for different contexts. It can contain zero or more <source> tags and a <img> tag. When a <source> condition is met, the srcset link will replace the <img> placeholder; otherwise, the link in the src attribute for the <img> tag is displayed:

<picture>
  <source media="(min-width: 60em)" srcset="images/dino-wide.jpg">
  <source media="(min-width: 38em)" srcset="images/dino-rectangle.jpg">
  <img src="images/dino-small.jpg" alt="All the dinosaurs!">
</picture>
Enter fullscreen mode Exit fullscreen mode

Save this code

Conclusion

This article covered the importance of writing semantic HTML, as well as some semantic tags that describe their contents. It’s important to write semantic HTML to improve the accessibility of your web page. This type of HTML also makes it easy to read and describe each area of an HTML document. Writing semantic HTML also includes using the proper attributes for elements when required. An example of this is adequately using the alt attribute to describe the image linked to a <img> tag and the type attribute to describe whether a button is a form submit button or a standard button. If you want to explore more semantic HTML elements, you can visit this web page for a semantic HTML cheat sheet.

Top comments (0)