Common Semantic Elements
In this blog post, I will focus on some of the most commonly used semantic HTML elements and their purpose.
Common semantic elements refers to the use of HTML elements to convey the meaning of content on a web page, rather than just defining its appearance. By using semantic HTML elements, web developers can create a more organized, accessible, and SEO-friendly website.
Check out my post about semantic and non-semantic HTML beforehand.
Common Semantic Elements
<header>
<header> is a common semantic element and represents the introductory content of a web page or section of a web page. Typically, the header contains information such as the website’s logo, navigation menu, and introductory text. The header should be used only once per web page and usually comes before the main content.
Example usage of <header> element:
<header>
<img src="logo.png" alt="Website Logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Welcome to our website</h1>
</header>
<nav>
The <nav> element represents a section of a web page that contains navigation links. The links may lead to other pages on the website or external sites. The <nav> element is often included within the <header> element, but it can also appear elsewhere in the document.
Example usage of <nav> element:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
The <main> element represents the primary content of a web page. It should not include any content that is repeated across multiple pages such as navigation links, headers or footers.
Example usage of <main> element:
<main>
<h1>About Us</h1>
<p>We are a company that provides a variety of services to our customers.</p>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</main>
<article>
The <article> element represents a standalone piece of content that can be shared or reused independently. Examples of articles may include blog posts, news articles, and product reviews.
Example usage of <article> element:
<article>
<h1>10 Tips for Better Productivity</h1>
<p>Here are ten tips for improving productivity and getting more done in less time:</p>
<ul>
<li>Tip 1: Set goals and prioritize tasks</li>
<li>Tip 2: Eliminate distractions</li>
<li>Tip 3: Take breaks</li>
<li>Tip 4: Delegate tasks</li>
</ul>
<article><section>
The <section> element represents a section of content that is semantically related. It is typically used to group together related content, such as a group of articles, a list of products, or a set of features.
Example usage of <section> element:
<section>
<h2>Our Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<aside>
The <aside> element represents content that is related to the main content but not essential to it. It is often used to display complementary information, such as a sidebar, a list of related articles, or an advertisement.
Example usage of <aside> element:
<main>
<h1>Article Title</h1>
<p>Article content goes here...</p>
<aside>
<h2>Related Articles</h2>
<ul>
<li>Related Article 1</li>
<li>Related Article 2</li>
<li>Related Article 3</li>
</ul>
</aside>
</main>
<footer>
The <footer> element represents the footer section of a web page. It typically contains information such as copyright notices, legal disclaimers, and links to social media profiles. The <footer> element is usually placed at the end of the document.
Example usage of <footer> element:
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p>© 2023 Company Name. All Rights Reserved.</p>
</footer>
<time>
The <time> element represents a specific date and/or time. It can be used to mark up dates, times, or durations in a standardized way, making it easier for search engines to understand the content and improve SEO.
Example usage of <time> element:
<p>The concert will be held on <time datetime="2023-04-14T20:00">April 14, 2023 at 8:00 PM</time>.</p>
TL;DR
Using common semantic elements can greatly improve the accessibility, organization, and SEO of a website. Elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, and <time>, allows web developers to convey the meaning and structure of their content in a clear and standardized way. So, next time you are developing a web page, consider using semantic HTML elements to make it more accessible and search engine friendly.