Pieces 🌟
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
