Semantic HTML

Semantic HTML introduces meaning to the code we write.

Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles.

<!-- Non Semantic HTML --><div id="footer">  <p>This is a footer</p></div>

With Semantic HTML, we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

<!-- Semantic HTML --><footer>  <p>This is a footer</p></footer>

Why Use Semantic HTML?

• Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.

• Readability: Semantic HTML also makes the website’s source code easier to read for other web developers.

• SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.

Semantic HTML

<article>Represents a part of a page which is self-contained and could be published elsewhere. Common uses include blog posts or magazine articles.

<aside>Represents a part of a page which is relevant to the current content, but not a part of it directly. It can be used for related links, for clarifying a statement from the current article, or even for advertising meant for the current page.

<details>Encapsulates the <summary> element and any additional details which are only visible when the element is in an open state.

<figcaption>Describes the media encapsulated within the <figure> element.

<figure>Encapsulates media such as an image, diagram, or code snippet.

<footer>Represents a part of a page which is meant to be at the end of a completed block of content. Common uses include copyright information for the page or additional links to relevant pages.

<header>Represents a part of a page which is meant to be introductory. It can include heading tags, a logo, a search bar, and navigation elements.

<main>Represents the primary content within the body element of the web page

<mark>Represents part of a text that should be rendered as marked or highlighted.

<nav>Defines a block of navigation links such as menus and tables of contents.

<section>Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.

<summary>Acts as a label for the <details> element and reveals additional information when clicked.

<time>Represents a time-related piece of information and can take a datetime attribute that makes it machine-readable.