All the HTML elements we have learned so far are non-semantic. There are another group of elements called Semantic HTML. Semantic means “relating to meaning”; therefore, a semantic element is an element that brings meaning to the content between opening and closing tags.
Let’s clear this up with an example. For example, elements such as <div> and <span> are not semantic elements since they provide no context as to what is inside of those tags. Suppose we want to add a header section to our HTML page. Instead of just providing the information inside of a <div> element, we can use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.
Why use Semantic HTML?
- Accessibility: Semantic HTML makes web pages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
- SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
- Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.
To better understand this, you can think of comparing non-semantic HTML to going into a store with no signs on the aisles. Since the aisles weren’t labeled, you don’t know what products are in those aisles. However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like Semantic HTML.
Header and Nav
Let’s go through some semantic elements that assist in the structure of a web page. A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.
The example below shows <header> in action:
Let’s make the world a better place!
This can be compared to the code below which uses a <div> tag instead of a <header> tag:
Let’s make the world a better place!
By using a <header> tag, our code becomes easier to read. It is much easier to identify what is inside of the <h1>‘s parent tags, as opposed to a <div> tag which would provide no details as to what was inside of the tag.
A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.
Let’s look at one example:
<li><a href=“#home”>Home</a></li> <li><a href=“#products”>Products</a></li>
<li><a href=“#about-us”>About us</a></li> <li><a href=“#contact-us”>Contact us</a></li>
By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.
Main and Footer
Other than <header>, there are two more elements that build the structure of our webpage. These two are <main> and <footer> elements. These elements along with <nav> and <header> help describe where an element is located based on conventional web development standards.
We place the dominant content of our page inside <main> element . By using this tag you are telling browsers and screen readers that the majority of the content of this page is here.
So let’s place a <main> tag inside of our code:
<h1>Web Development Requirements: <h1>
<p> HTML is the standard markup language for Web pages
In the example above, we have a <header> and <article> tag placed inside our <main> tag.
The content at the bottom of the subject information is known as the footer, indicated by the <footer> element. The footer contains information such as:
- Contact information
- Copyright information
- Site Map
- Reference to top of page links
Look at this example:
<p>Copyright © 2019 Coding With Basir</p>
In the example above, the footer contains copyright information. The <footer> tag is separate from the <main> element and typically located at the bottom of the content.
The Aside Element
The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. This element can be used alongside other elements such as <article> or <section>. Some common uses of the <aside> element are for:
- Pull quotes
- Editorial sidebars
- Additional information
Here’s an example of <aside> being used alongside <article>:
<p>My family and I visited The Empire State Building this summer</p>
The Empire State Building is a skyscraper in Manhattan, New York City.
As shown above, the information within the <article> is the important content. Meanwhile the information within the <aside> enhances the information in <article> but is not required in order to understand it.
Figure and Figcaption
To put additional information next to our main content, we learned to use <aside>. But what if we need some kind of visualization to provide more content? That is where <figure> and <figcaption> come in.
<figure> is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
In this code, we created a <figure> element so that we can encapsulate our <img> tag. In <figure> we used the <img> tag to insert an image onto the webpage. We used the src attribute within the <img> tag so that we can link the source of the image.
It’s possible to add a caption to the image by using <figcaption>.
<figcaption> is an element used to describe the media in the <figure> tag. Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.
<figcaption>This picture shows characters from Overwatch.</figcaption>
In the example above, we added a <figcaption> into the <figure> element to describe the image from the previous example. This helps group the <figure>content with the <figcaption> content.
While the content in <figure> is related to the main flow of the document, its position is independent. This means that you can remove it or move it somewhere else without affecting the flow of the document.
Audio and Attributes
If you need to add sound content to your webpage, use the <audio> element.
The <audio> element is used to embed audio content into a document. Like <video>, <audio> uses src to link the audio source.
<source src=“audioFile.mp3” type=“audio/mp3”>
In this example, we created an <audio> element. Then using a <source> element we added the source of our audio file. Using the type attribute, it’s possible to determine the type of audio file. It is an optional attribute but highly recommended to be provided in order to lighten the burden for browser!
When you place an audio file on the webpage, you would most probably need to provide controls for the element as well.
There are many attributes for <audio> but today we’re going to be focusing on controls and src.
- controls: automatically displays the audio controls into the browser such as play and mute.
- src: specifies the URL of the audio file.
As you might have noticed, we already used the src attribute in the example. Most attributes go in the opening tag of <audio>. For example, here’s how we could add both autoplay functionality and audio controls:
|<audio autoplay controls>|
You can find other attributes here: Useful attributes.
Video and Embed
Video content is very popular these days. So you might want to add video to your webpage. This can be done using <video> element.
Some attributes that can alter video playback include:
- controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
- autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
- loop: This attribute results in the video continuously playing on repeat.
Below is an example of <video> being used with the controls attribute:
|<video src=“coding.mp4” controls>Video not supported</video>|
In the code above, a video file named coding.mp4 is being played. The “Video not supported” will only show up if the browser is unable to display the video.
There is another tag that can add media content to a webpage which is <embed> tag. This can embed video, audio, gifs atc. From an external source. This means that websites that have an embed button have some form of media content that can be added to other websites. The <embed> tag is a self-closing tag, unlike the <video> element.
Let’s take a look at <embed> being used in our code:
In the example above, <embed> is being used to add in a gif from a local file known as download.gif. Embed can be used to add local files as well as media content straight from some other websites.
Great job finishing the Semantic HTML lesson! Now that you’ve got to know the importance of using semantic tags in your HTML file and how to use them, you can write code that is both browser and developer-friendly!
Let’s review some of the topics we covered throughout the lesson:
- Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
- Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
- <header>, <nav> , <main> and <footer> create the basic structure of the webpage.
- <section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
- <article> holds content that makes sense on its own such as articles, blogs, comments, etc.
- <aside> contains information that is related to the main content, but not required in order to understand the dominant information.
- <figure> encapsulates all types of media.
- <figcaption> is used to describe the media in <figure>.
- <video>, <embed>, and <audio>elements are used for media files.
Now that you have completed the HTML course successfully and done all the exercise projects, you can move to CSS course which is just as simple and descriptive as possible. Hope you’ve enjoyed this book and come back for more of web development stuff!