Semantic HTML- Grouping Things

In web development, it’s important to use semantic HTML elements to structure the content on web pages. Semantic HTML elements provide a way to describe the meaning of content on a web page, which can improve the accessibility and organization of the content for users and assistive technologies. In this article, we’ll explore some of the most common semantic HTML elements for grouping content, including paragraphs, quotes, lists, associations lists, tables, and more. By using these elements properly, you can create web pages that are easier to understand, navigate, and interact with for all users.

Paragraphs

The p element represent a paragraph.

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

Good use of paragraph element:

<h2>My Favorite Books</h2>

<p>I've always been a big reader, and over the years I've come across some truly amazing books. One of my favorites is "To Kill a Mockingbird" by Harper Lee. This book explores themes of racial injustice and social inequality in a powerful and thought-provoking way. Another book I love is "The Great Gatsby" by F. Scott Fitzgerald. This novel captures the glamour and excess of the 1920s in a way that is both captivating and tragic.</p>

<p>More recently, I've been getting into science fiction and I can't recommend "The Three-Body Problem" by Liu Cixin enough. This book has some of the most mind-bending and awe-inspiring concepts I've ever encountered in science fiction.</p>

In this example, the paragraph element is used to group together sentences that discuss the author’s favorite books. Each paragraph focuses on a specific book and provides some information about why it’s a favorite. This makes the text easier to read and understand, and helps to convey the author’s enthusiasm for these books.

Bad use of paragraph element:

<div class="article">
  <p>Did you know that the earth is round?</p>
  <p>It's true! Scientists have known this for centuries.</p>
  <p>Despite this, there are still some people who believe that the earth is flat.</p>
</div>

In this example, the paragraph element is used to group together three sentences that all discuss the same topic: the shape of the earth. However, the sentences are not really related to each other in a way that requires them to be grouped together in a paragraph. This makes the text harder to read and understand, and the use of a <div> element with a class of “article” would have been more appropriate for this type of content.

Quotes

The blockquote element.

The blockquote element represents a section that is quoted from another source.

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>
<p>— Robert Stephen</p>

The <blockquote> element can be used to quote text from any source, including books, articles, speeches, or interviews.
The content inside the <blockquote> element should be quoted verbatim, meaning it should be an exact copy of the original text, including any spelling or grammatical errors.
It’s a good practice to include the author or source of the quote using the <cite> element inside the <blockquote> element. This helps to provide proper attribution for the quote and gives credit to the original author.
The <blockquote> element is typically styled with indentation, a border, or some other visual cue to set it apart from the rest of the text on the page.
The <blockquote> element is often used in conjunction with the <q> element, which is used to indicate a shorter inline quotation.

List

The li element.

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element’s list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

<ol reverse>
 <li>Item 1</li>
 <li value="3">Item 3</li>
 <li>Item 4</li>
</ol>

Unordered Lists

The ul element.

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

Ordered Lists

The ol element.

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (…, 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, …).

The start attribute, if present, must be a valid integer. It is used to determine the starting value of the list.

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland</li>
 <li>United Kingdom</li>
 <li>United States</li>
 <li>Norway</li>
</ol>

Associations Lists

It includes de elements: dl, dt and dd

The dl element represents an association list consisting of zero or more name-value groups (a description list).

The dl element in HTML represents a description list. A description list is a list of terms and their corresponding descriptions.

The dl element contains a series of dt (description term) and dd (description definition) elements. The dt element represents a term in the list, and the dd element represents the corresponding definition for that term.

Here’s an example of how these elements might be used in a description list:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language is a standard markup language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets is a stylesheet language used to describe the look and formatting of a
    document written in HTML.
  </dd>
  <dt>JavaScript</dt>
  <dd>
    JavaScript is a programming language that is commonly used to add interactivity to web pages.
  </dd>
</dl>

Using the dl, dt, and dd elements is a semantically correct way to represent a description list in HTML. This can make it easier for web browsers, search engines, and assistive technologies (such as screen readers) to understand and process the content of the list.

It’s worth noting that the dl element can also contain dd elements that are not preceded by a dt element. This can be used to create a list of descriptions where the terms are not explicitly defined, or where the terms are implied by the context of the list.

Multidimensional Content

The table element.

The table element represents data with more than one dimension, in the form of a table.

The table element takes part in the table model. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table’s cells must completely cover that grid without overlap.

The table element in HTML is used to represent tabular data on a web page, such as a spreadsheet or a database table. It is a container element that can contain other HTML elements such as thead, tbody, tfoot, tr, td, and th.

The thead element represents the head of the table, which typically includes the column titles or headings. It should be used to wrap the tr element that contains the headings of the table.

The tbody element represents the body of the table, which typically includes the rows of data. It should be used to wrap the tr elements that contain the rows of data in the table.

The tfoot element represents the foot of the table, which typically includes summary or supplementary information about the table. It should be used to wrap the tr element that contains the footer information for the table.

The tr element represents a row in the table. It should be used to wrap the td or th elements that represent the cells of the row.

The td element represents a cell in the table that contains data. It should be used within a tr element to represent a cell in a row of the table.

The th element represents a cell in the table that contains a heading. It should be used within a tr element to represent a heading cell in a row of the table.

It’s important to use these elements properly in order to create semantically correct HTML. Using these elements correctly can also make it easier for web browsers, search engines, and assistive technologies (such as screen readers) to understand and process the content of the table.

Here’s an example of how you might use these elements to create a simple HTML table:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Smith</td>
      <td>john@example.com</td>
      <td>555-555-1212</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-555-1212</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total: 2</td>
    </tr>
  </tfoot>
</table>

This table would have three columns (Name, Email, Phone) and two rows of data (John Smith and Jane Doe). The thead element contains the column names, the tbody element contains the data rows, and the tfoot element contains a summary row that spans all three columns.

Dominant Content

The main element.

The <main> element in HTML represents the main content of a document or a section. It is intended to contain the central content of the document and exclude repeated elements like headers, footers, or navigation menus. It is important to avoid wrapping repeated content within the <main> element as it can create issues for search engines and assistive technologies. Instead, dedicated elements such as <header> or <footer> should be used for such content.

Here’s an example of how the main element might be used in an HTML document:

<body>
  <header>
    <h1>My Site</h1>
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/about">About</a>
        </li>
        <li>
          <a href="/contact">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>Welcome to My Site</h2>
    <p>This is the main content of my site.</p>
    <p>Here you will find information about my services and products.</p>
  </main>
  <footer>
    <p>Copyright 2021 My Site</p>
  </footer>
</body>

In this example, the main element contains the central content of the document (the heading and paragraphs), while the header and footer elements contain content that is repeated across multiple pages (the site logo, navigation menu, and copyright notice).

Using the main element is a semantically correct way to identify the main content of a document or a section of a document. This can make it easier for search engines and assistive technologies to understand and process the content of the page.

It’s worth noting that the main element should not be used more than once in a single document. If a document has multiple sections of main content, each section should be wrapped in a separate element (such as a section or article element).

Div

The div element in HTML is a generic container element that can be used to wrap any type of content. While the div element is widely used on the web, it is considered a “presentational” element, meaning that it is used to define the layout or appearance of the content rather than the meaning or structure of the content.

As a result, the div element should generally be avoided in favor of more semantically meaningful elements, such as header, footer, main, article, section, and aside. These elements convey more information about the content they contain, and can make it easier for search engines and assistive technologies to understand and process the content of the page.

Here’s an example of how the div element might be used to wrap content:

<div>
  <h2>Welcome to My Site</h2>
  <p>This is the main content of my site.</p>
  <p>Here you will find information about my services and products.</p>
</div>

In this example, the div element is used to wrap the heading and paragraphs, but it does not convey any information about the meaning or purpose of the content.

Instead of using a div element, it would be more semantically correct to use a more specific element that conveys the meaning or purpose of the content. For example:

<main>
  <h2>Welcome to My Site</h2>
  <p>This is the main content of my site.</p>
  <p>Here you will find information about my services and products.</p>
</main>

In this revised example, the main element is used to wrap the content, and conveys that the content represents the main content of the document.

It’s worth noting that there may be cases where the div element is necessary or appropriate. For example, if you need to apply a specific style to a group of elements, or if you need to create a custom layout using CSS, the div element can be useful. However, in general, it is best to use more specific, semantically meaningful elements whenever possible.

Resources

HTML Specifications: https://html.spec.whatwg.org/