HTML / HTML Semantic Elements
Building Layouts with Semantic HTML
This tutorial will teach you how to build website layouts using semantic HTML. You'll learn how to structure your HTML code using semantic tags to create different layouts.
Section overview
5 resourcesIntroduces semantic tags that improve the structure and readability of HTML documents.
1. Introduction
In this tutorial, we will learn how to build effective website layouts using semantic HTML. By using semantic tags, we not only make our HTML easier to read and understand, but we also provide important context to search engines and assistive technologies.
You will learn:
- What is Semantic HTML and why it's essential.
- How to structure HTML code using semantic tags.
- Best practices for creating layouts with semantic HTML.
Prerequisites:
Basic understanding of HTML.
2. Step-by-Step Guide
Semantic HTML is the use of HTML markup to reinforce the semantics or meaning of the content. Tags like <section>, <article>, <header>, <footer>, <nav>, and <aside> provide information about the type of content they contain.
Example:
<article>
<header>
<h1>Title of the article</h1>
</header>
<p>Article content...</p>
<footer>Author details...</footer>
</article>
In the above code, we used semantic tags to structure our article. This makes it clear what each section of the code represents.
Best Practices:
- Use the <main> tag to wrap the main content of your webpage. There should be only one <main> per page.
- Use the <header> tag for introductory content and navigation links.
- Use the <footer> tag for information about the author, copyright information, etc.
- Use the <nav> tag for major navigational blocks in your webpage.
- Use the <article> tag for self-contained content like a blog post or a news story.
3. Code Examples
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Welcome to my website</h1>
<p>This is my first website built using semantic HTML.</p>
</article>
</main>
<footer>
<p>Copyright © 2022 My First Website</p>
</footer>
</body>
</html>
In this example, we have created a simple webpage layout with a header, main content area, and a footer. The header contains a navigation menu, the main tag wraps around the main content of the webpage, and the footer contains copyright information.
4. Summary
In this tutorial, we have learned the importance of semantic HTML and how to use semantic tags to structure our HTML code. The next step is to apply these concepts in your projects and explore more about HTML5 semantic tags.
Additional Resources:
- HTML5 Semantic Elements - W3Schools
- Semantic HTML - MDN Web Docs
5. Practice Exercises
Exercise 1: Create a webpage layout for a personal blog using semantic HTML tags.
Exercise 2: Update the layout you created in Exercise 1 by adding a sidebar with links to recent posts. Use the <aside> tag for the sidebar.
Exercise 3: Create a webpage layout for a news website. It should have a header, main section with news articles, a sidebar for trending news, and a footer.
Solutions:
While there are many ways to solve these exercises, the key is to make use of semantic HTML tags appropriately. The header should contain navigation links, the main section should contain the main content of your webpage, the aside tag should be used for content that is indirectly related to the main content, and the footer should contain information like author details, copyright information, etc.
Tips for further practice: Try to use more semantic tags like <figure>, <figcaption>, <section>, <time>, etc. in your layouts.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article