Other Sectioning and Semantic Elements
In this tutorial, we will look at other commonly-used sectioning and semantic HTML elements.
The <article> element
The <article> element serves as a semantic wrapper for self-contained, reusable article content on our page. If our web page is a blog post or a news article, we can wrap the entire article's content with the <article> element. The <article> element is usually placed inside the <main> element. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
</head>
<body>
<header>
<!-- The header content -->
</header>
<nav>
<!-- Navigation links -->
</nav>
<main>
<article> <!-- The article content -->
<h1>This is the article title</h1>
<p>This is the paragraph in an article.</p>
<p>This is another paragraph in an article.</p>
</article>
</main>
<footer>
<!-- The footer content -->
</footer>
</body>
</html>
If our page has multiple articles, then we provide multiple <article> elements, one for each article's content:
<main>
<!-- The first article -->
<article>
<h1>The first article title</h1>
<p>The first article paragraph.</p>
</article>
<!-- The second article -->
<article>
<h1>The second article title</h1>
<p>The second article paragraph.</p>
</article>
</main>
The <section> element
The <section> element represents a generic wrapper around one or more sections on our page or an article. The <section> element should be used only if we cannot find or think of a more suitable semantic wrapper for that section (content). Most of the time, the <section> element represents subsections inside the <main> section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
</head>
<body>
<header>
<!-- The header content -->
</header>
<nav>
<!-- Sidebar content -->
</nav>
<main>
<h1>Main page title</h1>
<section> <!-- The first (sub)section on a page -->
<h2>The first section's title</h2>
<p>This is paragraph text inside the first section.</p>
</section>
<section> <!-- The second (sub)section on a page -->
<h2>The second section's title</h2>
<p>This is paragraph text inside the second section.</p>
</section>
</main>
<footer>
<!-- The footer content -->
</footer>
</body>
</html>
The <section> element can also be used to mark subsections inside our <article> section:
<article>
<h1>The article title</h1>
<section> <!-- The first (sub)section in an article -->
<h2>The first section in an article</h2>
<p>This is paragraph text inside the first section.</p>
</section>
<section> <!-- The second (sub)section in an article -->
<h2>The second section in an article</h2>
<p>This is paragraph text inside the second section.</p>
</section>
</article>
If we need to create separate sections on our page or article, and we cannot think of a more suitable, semantic wrapper for that section, we can opt for the <section> element. Alternatively, if a generic, non-semantic wrapper is all that is required, the <div> element can be used instead.
The <kbd> element
The <kbd> element is used to wrap the text that represents a keyboard input or a voice input. Most of the time, it is used to represent a key sequence that needs to be pressed on a keyboard. The <kbd> element is usually found inside a paragraph element. Example:
<p>Press <kbd>F12</kbd> to inspect the element.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>U</kbd> to see the source code.</p>
If we want to represent a key sequence, we can also nest multiple <kbd> elements within one outer <kbd> element. Example:
<p>Press <kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></kbd> to open the Web Browser Tools.</p>
This way, the outer <kbd> element marks the entire key sequence, and inner <kbd> elements represent keystrokes.
The <samp> element
The <samp> element represents the possible output of a source code snippet or a program. Example:
<p>The following function:</p>
<pre><code>
void myfn() {
printf("Hello World!");
}
</code></pre>
<p>Produces the following output:
<samp>
Hello World!
</samp>
</p>
In production, we usually provide a source code snippet wrapped inside the <pre><code> tags, followed by the expected output text wrapped in a <samp> tag.
If the output consists of multiple lines, we can add <br> line breaks inside the <samp> element. Example:
<p>The output from a function is:
<samp>
Hello World! <br>
This is the second line.
</samp>
</p>
