To understand what semantics is in HTML we can start by reviewing the meaning of semantics: Semantics is the branch of linguistics and logic concerned with meaning.
So, semantic HTML is using HTML markup to give meaning and better describe the type of content or function of the content inside the document.
This extra layer of information makes the document easier to understand by the browser, crawlers, and users. It also helps the content display consistently across different applications and devices. While also improving accessibility and functionality by assistive technology features of modern browsers and help with the modern semantic search model of search engines.
Specially important for any publisher site´s SEO where it is very important to allow a complete crawl of all the main content of a story or article to push for a rapid indexation of the content from the first crawl.
Evolution of HTML
Initially, the content on the Internet was organized, styled and positioned using tables, which really restricted design possibilities and produced unattractive pages.
The markup evolved and new tags appeared like <div> a generic container that is styled using a new supporting language, CSS.
The first tags with semantic value also appeared. Example of this is the <p> tag used to store content that should be interpreted as a paragraph.
This huge step forward allowed creativity to run wild, and sites went from a set of rigid tables to a universe of <div> containers and elements that change appearance and position according to CSS rules that dictate the styling.
A great example of the possibilities of this new way of styling web pages is showcased in the CSS zen garden, a site where you can switch the CSS file to give it a totally different look even though the content doesn’t change.
From its inception, HTML adds semantic meaning to the code that is used to build a website.
With tags like <h1>, <p>, <img> , etc… the developer can identify and define the structure of the document. Add context about what part of the content is the main section, which are headings and paragraphs while also adding colors or images to decorate and illustrate the document.
In HTML, each tag has its own content model, which describes the type of content it should contain.
The content models are divided into the following categories
- Sections or structural elements of the document
- Metadata elements
- Interactive components
- Phrasing, titles and editorial elements
- Functional components
HTML tags may belong to one or several of the categories mentioned above depending on their definition and functionality.
Before the release of HTML5, the best way to describe the outline or structure of the content was using the heading tags that go from H1 to H6.
They are still very important to identify and structure sections within the content.
Applying these heading tags correctly will help users and crawlers understand the structure of the content on the page. The H1 tag is used by Google to understand the main topic of the content from the first crawl so this heading tag is the most important to optimize. There should only be one H1 tag for every unique piece of content and it should also be unique and it should describe the main topic of the webpage..
Use the <h1> for the title of the article or page and <h2> to <h6> to divide the internal content according to the outline of the document.
<h1> page title</h1> <h2> section 1 </h2> <h3> section 1.a </h3> <h3> section 1.b </h3> <h2> section 2 </h2 > <h3> section 2.a </h3> <h4>internal title</h4>
Another essential element is the <head> tag element is a container for metadata (data about data) used to set up and prepare the document to be displayed correctly in the browser.
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Document title</title> <link rel="stylesheet" type="text /css" href="styles.css" /> <link rel="shortcut icon" href="/favicon.ico" /> </head>
Expanding Semantic Information With HTML 5
With the launch of HTML5 new elements emerged focused on increasing the semantic and structural power of the language.
<article>, <aside>, <nav>, <section>, <footer>, <header> and <main>
New elements like <main> or <nav> that are used to give more specificity to tags that divide sections and build the structure of a web page and new elements like < figure> or <time> that describe with more detail the type of content they contain.
The correct semantic use of HTML tags, helps the reader to better visualize and understand the content. It also improves accessibility and allows people with disabilities to have a better user experience.Tip: As a best practice and to support older browsers like internet explorer 9 or earlier, use the file shimor shiv html.js.
HTML 5 structural elements
<header> – This element is used to group the introductory pieces of content.
The elements that we find within the header or introduction of an Internet page are generally: Identity or branding elements such as the logo, name of the organization, slogan and site navigation elements.
<nav> – This element is used to group navigation elements of the site, especially important to use it to wrap the main menu.
<section> <header> <h1>Section title - news </h1> <nav><a href=”#”>menu1</a><a href=”#”>menu2</a><a href=”#”>menu3</a></nav> </header> </section>
<main> – Used to indicate the most important content of the web page, this element is used by screen readers and disabled accessibility controls on modern devices to find the main content of the page.
In articles on news and publisher sites it is recommended to use it to group the main story content and keep ads and sidebars outside the tag to prevent the interruption of a complete first crawl and fast indexing.
<article>– The definition of this element indicates that it should be used to group content that by itself has reason to exist and meaning. A good example is using it in the archive pages of a blog to group each of the articles or single posts.
<article> <h2>title of article 1</h2> <p>content of article 1</p> </article> <article> <h2>title of article 2</h2> <p>content of article 2</p> </article>
<section> – This element has a more general semantic value and is used to group sections or subsections of content. The meaning of what a section is becomes very personal and subjective. The important thing is to have consistency in your own definition and use of the element.
<aside> Inside this element goes the content that is outside the main topic of the main topic of the page.
For example, sidebars with content like ads or the most popular articles.
<footer> The footer or footer generally contains legal notices, copyright information and contact information. It is also usually the last section of the page.
<main> <section> <article> <h2>title of article 1</h2> <p>content of article 1</p> </article> <article> <h2>title of article 2</h2> < p>content of article 2</p> </article> </section> <aside> <p>sidebar</p> </aside> </main> <footer> <p> privacy notice </p > </footer>
HTML 5 content elements
<figure> – This element describes flow content with its own meaning, widely used to describe images, video, illustrations, diagrams, code snippets, etc.
Usually this element is accompanied by a legend with the description or related information of the element.
<figcaption> – Is the element that contains the legend or relevant information about the element <figure> predecessor.
<figure> <img src="image.jpg" alt="description" width="304" height="228"> <figcaption>Image Caption</figcaption> </figure>
<video> – Another tag in HTML5 which not only describes the content but it also provides functionality to embed a video with playback controls.
There are 3 video formats supported by the tag <video>: MP4, WebM, and Ogg.
<audio> – Indicates that the content is one or more audio files, inserts the controls and interface to play the files.
The file formats supported by the <audio> tag: MP3, WAV and Ogg.
<data> – This tag is used to deliver a value associated with the content within the tag to be read by some application or system. For example the associated value per product.
<ul> <li><data value="21053">Tomatoes</data></li> <li><data value="21054">Tomatoes</data></li> <li><data value= "21055">Grapes</data></li> </ul>
<mark> – Contains marked or selected information, the result should be marked text with a colored background.
<time> – Contains date, time or time information. By formatting these dates, times, or times with machine-readable standards, this information can be used to store information in calendars and schedule notifications.
<details> – This element represents additional details that the user can see and hide as they please.
<summary> – It is the element that makes up the always visible header of the element <details> predecessor.
<progress> – Contains information about the progress of an activity or action.
Thinking about the semantic meaning and purpose of the different HTML tags will allow developers to build web pages that are more accessible and easier to read by humans and bots alike.
It will also improve the user experience by enabling the new features and functionalities of modern browsers that improve the presentation, the functionality and accessibility of the entire site.