HTML5 - Block elements and Semantic web
Tags: html, webdev
Published: 2023-09-14 15:00:03

In this article, I'll introduce **HTML5 block tags** and discuss the concept of the **semantic web** along with **semantic tags**.

## Block Tags

Imagine you need to organize a paragraph and an image from the same context or two phrases within a paragraph with different formatting. How can you structure them effectively?

For this purpose, we have block tags. There are two generic block tags: `span` and `div`. These tags are used to:

- Define a division or section.
- Define containers, primarily the `div` tag.
- Separate parts of the code for styling with CSS.

Example of `div`:
```html
<div>
    <div>block 1</div>
    <div>block 2</div>
</div>
```

Example of `span`:
```html
<p>What's <span>HTML</span> and <span>CSS</span> ?</p>
```

### The Difference between `div` and `span` Tags

The `div` tag creates a container with `display: block`, causing a line break after it. In contrast, the `span` tag creates a container with `display: inline`, meaning no line break occurs after the `span`.

Typically, we use `div` to create containers for layout, and `span` is for styling parts of texts.

## Web Semantics and HTML5

For many years, front-end developers used `div` for layout containers. However, a `div` alone lacks meaning for various entities, such as browsers, developers, search engines, and screen readers.

To address this, the World Wide Web Consortium (W3C) introduced the semantic web in HTML5, resulting in semantic tags. Figure 1 illustrates the difference between HTML4 and HTML5 in terms of semantics.

![HTML4 vs HTML5 in semantic view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi1k8dwkj1d6zt0i6aqf.png)
*Figure 1. HTML4 vs HTML5 in semantic view. Source: [Alejandro-ao.com](https://alejandro-ao.com/web-course/intro-to-html/semantic-html/).*

In HTML4, we relied on `div` for structuring various sections of a web page. However, HTML5 introduced a significant change by creating specific semantic tags for common sections, providing meaning to the content.

> Semantic tags are related to the meaning of content.

Today, we commonly use:
- `header` for the page header, which may include elements like logos, search forms, and author names. There is typically one per section, article, or body.
- `main` for the main content of the page, with only one per document.
- `nav` for navigation menus, particularly important or primary navigation.
- `article` for articles in the document. An article can have a header, footer, or sections. It represents independent content on the page.
- `section` for grouping related content in the document.
- `aside` for side content related to the main content.
- `footer` for footer content of the document, article, or section, including information like authorship, copyright, and related links.

Figure 2 provides a more detailed example.

![Figure 2. Semantic HTML5 in example.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogvqgfnmaz6krhs7aztk.png)
*Figure 2. Semantic HTML5 in example.*

### Section vs Article in HTML5

Refer to this discussion: [Section vs Article HTML5](https://stackoverflow.com/questions/7549561/section-vs-article-html5).

## Complete Initial Code

Following this explanation, below, you'll find a complete initial HTML5 code. For now, ignore the `class` and `id` attributes.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- External files (CSS, JS) and metadata -->
    </head>
    <body>
        <!-- Prefer using classes for styling; IDs are primarily for JavaScript -->
        <header class="header" id="header">
            Page header
        </header>
        <nav class="nav">
            Menu
        </nav>
        <main class="content">
            <!-- Only one per page/document -->
            Main content
            <article>
                Internal article
                <header>Header of this article</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- It's possible to have articles inside sections or vice-versa; see the stackoverflow link -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>
```

I'll explain each line of the provided HTML code:

1. `<!DOCTYPE html>`: This is the document type declaration, specifying that the document is an HTML5 document.
2. `<html>`: This is the opening `<html>` tag, indicating the start of the HTML document.
3. `<head>`: The `<head>` element contains meta-information about the document, such as links to external files (CSS and JavaScript) and metadata (like the document's title).
4. `<!-- External files (CSS, JS) and metadata -->`: This is an HTML comment, providing a note to anyone reading the code but doesn't affect the rendering of the page. It suggests that the `<head>` section is typically where you include links to external CSS and JavaScript files and specify metadata.
5. `<body>`: The `<body>` element is where the visible content of the web page goes.
6. `<!-- Prefer using classes for styling; IDs are primarily for JavaScript -->`: Another HTML comment, giving guidance on using classes for styling elements and reserving IDs primarily for JavaScript interactions.
7. `<header class="header" id="header">`: This line defines a header element (`<header>`) with both a `class` and an `id` attribute. The `class` attribute is set to "header," which can be used for styling with CSS. The `id` attribute is also set to "header," which uniquely identifies this element on the page.
8. `Page header`: Within the `<header>` element, "Page header" is the visible content that will be displayed as the header of the page.
9. `<nav class="nav">`: This line defines a navigation element (`<nav>`) with a `class` attribute set to "nav," indicating it's a navigation menu.
10. `Menu`: Inside the `<nav>` element, "Menu" is the visible content for the navigation menu.
11. `<main class="content">`: Here, a `<main>` element is defined with a `class` attribute set to "content." The `<main>` element typically contains the main content of the web page.
12. `Main content`: Within the `<main>` element, "Main content" is the visible content indicating the primary content of the page.
13. `<article>`: The `<article>` element is used to represent a self-contained piece of content, such as a blog post, article, or news story.
14. `Internal article`: Within the `<article>` element, "Internal article" represents the title or heading of the article.
15. `<header>Header of this article</header>`: This line defines another `<header>` element within the `<article>`, containing the header or title of the article.
16. `<section id="introduction">`: This line defines a `<section>` element with an `id` attribute set to "introduction," which can be used to target and style this section specifically.
17. `<section id="content">`: Similar to the previous line, this one defines another `<section>` element with an `id` attribute set to "content."
18. `<section id="summary">`: Yet another `<section>` element is defined with an `id` attribute set to "summary."
19. `<!-- It's possible to have articles inside sections or vice-versa; see the stackoverflow link -->`: This is another HTML comment, providing a note about the possibility of nesting articles inside sections or vice versa. It also references a Stack Overflow link for further information.
20. `</article>`: This marks the end of the `<article>` element, closing it.
21. `<section id="comments">`: This line defines a `<section>` element with an `id` attribute set to "comments," likely indicating a section where comments or discussions would go.
22. `</section>`: This closes the `<section>` element for comments.
23. `<footer class="footer">`: Here, a `<footer>` element is defined with a `class` attribute set to "footer," suggesting it's the footer section of the page.
24. `</footer>`: This closes the `<footer>` element.
25. `</body>`: This marks the end of the `<body>` element.
26. `</html>`: This is the closing `</html>` tag, indicating the end of the HTML document.

Each line in this HTML code contributes to the structure and content of a web page. The comments provide additional information and guidance for understanding the code.