Semantics for newbies

HTML Tags

HTML tags are used to define the structure of your document. They helps to understand the meaning of the content for the browser, screen reader and other programs that parses HTML document.

In this doc we'll mostly talk about sections content. Full list of HTML tags can be found in specification: WHATWG -- HTML Living Standard.

Who need Semantics?

Everyone who works with the content of the document. Screen readers use semantics to help users navigate the site. Search engines, AI, and other programs rely on semantics to determine the meaning of a piece of content.

Browsers (desktop, mobile, and on other devices such as smart watches) also use semantics to make content easy to read in order to display content correctly in reading mode

For example, a screen reader will use the semantics of a document to determine how to sound out it to the user. If the developer used the correct semantics, the screen reader will be able to reader the document in a way that makes sense to the user.

Divs and Spans

They are no-meaning tags, which means that they don't make any semantic meaning and serve to stylize or unify some content.

<div> and <span> are the most common tags you will use in your HTML documents. They are used to separate content into groups.

Headings

Headings are used to define the hierarchy of your content. There are six levels of headings, <h1> through <h6>. <h1> is the most important heading, and <h6> is the least important.

Headings are used to define the hierarchy of your content. Heading information can be used by user agents to construct a table of contents for a document automatically.

Rules of using headings

  • Use headings to define the hierarchy of your content;
  • Don't skip heading levels;
  • Don't use headings just to make text bigger or bold;
  • Use heading in HTML just like you would use them in the course work;
  • Read your document through the headings and try to understand the meaning of the provided content.

Section and article

<section> and <article> are grouping content that are used to define the structure of your document.

Section

<section> is used to define a section of a document. It can be used to group related content together. For example, you can use <section> to group a list of blog posts.

Article

<article> is used to define an independent, self-contained piece of content. For example, you can use <article> to define a blog post or the product/comment component.

Rules

  • Use <section> to group related content together;
  • Use <article> to define an independent, self-contained piece of content;
  • Sections and articles can be nested inside each other;
  • Sections and articles always should have a heading inside them. If there is no heading, you should use <div> instead;