Learn HTML

Learn to code and become a Front End Web Developer.

Campsite Coders Bootcamp Coding Adventure

HTML Semantic Elements


Welcome to the exciting world of web development! Today, we're embarking on a journey into the heart of HTML Semantic Elements – the foundation of structured and meaningful web content. If you're eager to understand how these elements can transform your web pages into well-organized, accessible, and SEO-friendly creations, you're in the right place. In this comprehensive guide, we'll explore the importance of HTML Semantic Elements, how to use them effectively, and why they are a cornerstone of modern web development.


The Essence of HTML Semantic Elements

Think of HTML Semantic Elements as the architectural blueprint of your website. They provide a clear structure to your content, making it more accessible to both humans and search engines. In essence, they help convey the meaning of your content. Let's dive into the key aspects of these elements and why they matter:


1. Structure and Clarity

Semantic elements give your web content a clear and logical structure. Instead of relying solely on generic divs and spans to format your content, you can use specific elements that convey their purpose.

For example, instead of this:

<div id="header">

<div class="logo">Your Logo</div>

<div class="navigation">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>


You can use semantic elements to create a more structured and meaningful header:

<header>

<div class="logo">Your Logo</div>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

Using <header>, <nav>, and <ul> elements provides clarity about the content's purpose and relationships, making it easier to understand and maintain.



2. Accessibility

HTML Semantic Elements are fundamental to web accessibility. They help screen readers and assistive technologies interpret and present your content to users with disabilities. By using these elements correctly, you ensure that your website is inclusive and can be enjoyed by a wider audience.

For instance, if you create a navigation menu with semantic elements, screen readers can announce it as a navigation menu, making it clear to users that it's for navigation:

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>


3. SEO Benefits

Search engines, like Google, rely on semantic HTML elements to understand the content and context of your web pages. When you use these elements properly, you provide search engines with valuable information about your content, leading to better search engine rankings.

For example, by marking up an article with semantic elements, you indicate its structure, headings, and main content, making it more appealing to search engines.


<article>

<h1>Unlocking the Power of HTML Semantic Elements</h1>

<p>HTML Semantic Elements provide a clear structure and meaning to your web content.</p>

<!-- More content here -->

</article>


This structured approach aids search engines in categorizing and indexing your content effectively.


Key HTML Semantic Elements

Let's explore some of the essential HTML Semantic Elements and how to use them in your web pages:

1. <header>: Defining the Page Header

The <header> element typically includes content like your site's logo, navigation menu, and introductory text. It represents the introductory section of a page or a section within a page.

2. <nav>: Navigational Menus

The <nav> element is used to define navigation menus. It's an excellent choice for menus, both in the page header and within the main content area.

3. <main>: The Main Content Area

The <main> element encapsulates the primary content of your web page. Each page should have one <main> , making it easier for both users and search engines to identify the core content.

4. <article>: Self-Contained Content

The <article> element represents self-contained content that can be distributed and reused independently. This is often used for blog posts, news articles, or forum posts.

5. <section>: Structured Content Areas

The <section> element defines a section of content within a document. You can use it to group related content, such as chapters in a book, different sections of a web page, or a series of blog posts.

6. <aside>: Supporting Content

The <aside> element contains content that is tangentially related to the main content. This can include sidebars, advertising, or related links.

7. <footer>: Concluding the Page

The <footer> element represents the footer of a page or a section. It often contains information like copyright notices, contact information, or links to related pages.

HTML Header Elements

You can bring in cascading style sheets by linking to them in the head section of your HTML web page. If the stylesheet exists in your project folder then you can simply add a link to the file starting with the folder name and then file name. If you are linking to an external stylesheet hosted on another website then you must include the https:// path to the stylesheet. Be sure to use rel="stylesheet" or your styles will not work. You then add the link to the external file in the value of the href property. The link tag is a self-closing tag so you don't have to include it at the end of it. Some web developers add / > to the end of the line of code for the link but it will work with or without it.

html code displaying code in the header element
results of header code in html

HTML Footer Elements

You can bring in cascading style sheets by linking to them in the head section of your HTML web page. If the stylesheet exists in your project folder then you can simply add a link to the file starting with the folder name and then file name. If you are linking to an external stylesheet hosted on another website then you must include the https:// path to the stylesheet. Be sure to use rel="stylesheet" or your styles will not work. You then add the link to the external file in the value of the href property. The link tag is a self-closing tag so you don't have to include it at the end of it. Some web developers add / > to the end of the line of code for the link but it will work with or without it.

html footer code
results of code in footer element

HTML Navbar Elements

Nav is short for Navigation aka the navigation bar. Basically, this is the area on the website where you put links to the main categories of your website. You will want to make sure that you code this for responsive view so that people viewing your website on a mobile device will easily be able to find the main links on your website. To make a website responsive you can either use media queries or a framework like Bootstrap. The example below shows the results of using the Bootstrap framework.

html navigation code
results of code in nav element

HTML Main Elements

The main tag specifies the main content of a document. The content inside the main element should be unique to the document. Think of this as holding the content that you want to rank for in search engines. (Not the header, footer, or navigation bar) The main tag should not contain any content that is repeated across any of the other pages on your website. You should place your opening main tag right below the h1 tag of your web page.

code in the html main element


If you are not using the Bootstrap framework (which includes code for responsive design) then you will need to write your own media queries inside of your cascading style sheet.

h1 tag displayed


If you do use Bootstrap, then the main tag can be eliminated, and instead, wrap your content in a div tag with the class name "container" or "container-fluid".

media query code

HTML Section Elements

Sections are used to divide your page into .... sections! You see this a lot on single-page apps where each section has a different background color to help distinguish the different areas and the links at the top of the page go down to the section with the content category listed in a navbar link. Even if you're not designing an SPA, sections are still good for separating areas of a long web page. You can then add CSS to define the height of each section as well as the background color or background image.

Each <section> should be identified by adding a heading tag (<h1> - <h6> element) as a child of the section element.

code in the html section element
result of code in the section element

HTML Article Elements

Articles are self-contained content and usually the "meat" of the content on the page. By wrapping your content in an article tag, you help Google's search bots understand that the content contained within it is that of an article - information that you want people to read. You can have as many articles on a page that you want to but be sure to include a head tag at the top of the article that defines what the content is about.

code in the html article element
results of code in the html article element

HTML Aside Elements

The content in the aside tag is used for content that is separate from the article in which it resides. Some developers use the aside tag to include an additional sidebar menu or as an area to place advertisements. The aside content should be indirectly related to the surrounding content but not required to be included on the page at all.

code in the html aside element
result of code in the html aside element

Practical Tips for Effective Use

Now that you understand the significance of HTML Semantic Elements, here are some practical tips for their effective use:


Choose the Right Element: Select the most appropriate semantic element for the content you're marking up. Don't force content into an element just because it's available.

Follow a Logical Structure: Maintain a logical structure by nesting elements properly. For example, a <nav> element should be contained within the <header> element.

Use Headings Correctly: Utilize heading elements (<h1>, <h2>, etc.) to create a hierarchical structure for your content. Start with <h1> as the main heading and use subsequent headings for subsections.

Avoid Overuse: While semantic elements are valuable, avoid overusing them. Use them when they genuinely convey meaning and structure.

HTML Semantic Elements are the linchpin of well-structured, accessible, and SEO-friendly web content. By embracing them, you're not only enhancing the user experience but also making your website more discoverable and inclusive. As you continue your journey in web development, remember that semantics are your allies in crafting modern, structured, and meaningful web content. Keep exploring, keep coding, and keep transforming your web pages into beautifully organized and accessible creations. Your web development journey is on the right track!

Now that you have learned the Semantic Elements you can now move on and learn about the non-semantic elements.

This page covered a lot of material but it is necessary for you to learn and use all of the different semantic tags instead of just wrapping all of your content in div tags. If you feel you've got a good understanding of the semantic tags, then move on to learn about the div and span tags.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved