Introduction
When creating websites, it is important to approach the question of structuring and grouping content wisely. After all, it allows the developers to easily navigate the markup of the page, as well as facilitates working with its elements. In this topic, you will learn what semantic elements are commonly used in the website layout and try to write an HTML markup for different web pages.
Layout Elements
In HTML for this purpose there exist semantic elements. Their meaning is clear for both browsers and web developers. Each web page can be divided into several sections by meaning. HTML provides several semantic elements that define different parts of a web page. Here are the basic ones: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. Let's take a closer look at them, and find out in what cases they are needed.
The <header> tag
<header>
<img src="logo.svg" alt="Site logo">
<h1>NASA</h1>
</header>The <header> tag wraps the introductory content of any part of the page. It's allowed to use several <header> elements in one document. However, most often it's used to form the introductory content of the entire web page, i.e. the header of the site. In the <header> you usually put the name of the site, its logo, a search form, and so on.
The <nav> tag
The <nav> tag wraps a set of links to navigate the site. You can also use more than one <nav> tag in a document. Often navigation links are placed inside the header of the site, but not necessarily.
<nav>
<a href="#">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</nav>The <main> tag
In the tag <main> you usually put the main content of the HTML document. This tag should not contain elements that are repeated on other pages of the site: navigation links, name or logo, etc.
<main>
<h2>Courses<h2>
<div>
<h3>Frontend developer</h3>
/* ... */
<div>
<div>
<h3>Python developer</h3>
/* ... */
<div>
/* ... */
</main>The <section> tag
The <section> tag is needed to group logically related content and divide your page into sections. In this context, a section is a thematic grouping of the content of the page, usually with its own title. For example, the <section> tag can define a news block or contact information. It is acceptable to place one <section> tag inside another. The <section> tag is not a replacement for the <div> tag. The <div> element is non-semantic, i.e. it does not tell you anything about the content that is placed inside of it.
<section>
<h2>About me</h2>
<p>Hi, I'm ...</p>
</section>
<section>
<h2>Gallery</h2>
<div>
<img src="1.jpg">
<img src="2.jpg">
<div>
</section>The <article> tag
The <article> tag defines independent, self-contained content. Content placed in this element usually makes sense on its own and is understandable independent of the other parts of the website. You can wrap a forum post, a blog post, or some other self-contained piece of content in this tag. You can have a few <article> tags on one page, too.
<article>
<h2>HTML</h2>
<p>HTML is...</p>
</article>The <aside> tag
The <aside> tag defines a part of the document which complements the main content but is not an integral part of it. The <aside> element can be a sidebar, it can contain additional comments, a list of terms, or advertisements.
<aside>
<a href="/dashboard/">Dashboard</a>
<a href="/overview/">Overview</a>
</aside><p>Today I wrote my first JavaScript program.</p>
<aside>
<p>JavaScript is a programming language.<p>
</aside>The <footer> tag
The <footer> tag defines the footer for a document or section. The <footer> tag can contain the author's name, the date of the document, or contact information. It's also ok to use several <footer> tags on one page.
<footer>
<div>
<a href="/support/">Support</a>
<a href="/contribute/">Contribute</a>
</div>
<p>David Cobb, 2021</p>
</footer>Writing a web page
So, let's try to make a page following the layout below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
</body>
</html>It's not required to put all of the elements learned in this lesson on the site or place them in that exact order. Here are a few more examples of the possible layouts with these elements:
Conclusion
So, you've learned the basic tags for marking up websites. It's hard to imagine, but these semantic tags only appeared in the HTML5 standard. Before that, developers used <div> with class or id attributes instead. For example, developers had to write <div class="header"> instead of <header>. Thus, if you suddenly have to work with the old code, you will know how to improve it.