Video Tutorial Link: https://www.youtube.com/watch?v=0qfWqsKrZ04
Semantic Elements
= Elements with meaning
A semantic element clearly describe its meaning to both the browser and the developer
When
building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word
semantic means “relating to meaning,” so semantic elements provide information
about the content between the opening and closing tags. By using Semantic HTML,
we select HTML elements based on their meaning, not on how they are presented.
Elements such as <div> and <span> are
not semantic elements since they provide no context as to what is inside of
those tags.
Semantic Elements refer to HTML elements that have a specific
meaning. For example <h1> is a semantic element. It tells browser that
the content within the tag is the most significant header contained in the HTML
document. <div> on the other hand, is a non-semantic element as it only
indicates a division in the HTML document and provide no information on what
goes before, after or within the tag.
Why use Semantic HTML?
- Accessibility: Semantic HTML makes webpages 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.
How is the page structure of
HTML 5 different from HTML 4 or previous HTML?
A typical web
page has headers, footers, navigation, central area, and sidebars. Now if we
want to represent the same in HTML 4 with proper names to the HTML section we
would probably use a DIV tag.
But in HTML 5
they have made it more clearly by creating element names for those sections
which makes your HTML more readable.
New
Semantic Tags in HTML5
The release of HTML5 has
seen the introduction of several new semantic tags that provide even richer
information to search engines. Here is an overview of several HTML5 elements
and what they mean for WordPress on-page SEO:
<main>: The <main> tag encloses the dominant content of the
blog including all article content and other related sections that extend the
central theme of the page, such as the <article> tag and supporting
<section> tags.
<header>: The <header> tag is similar to the <h1> tag in that
it can be used to specify the header of a page. But it can also be used to
indicate the header section of a page and can even contain navigation links and
other relevant text.
<nav>: Navigation is undoubtedly one of the most important aspects of a
site. The <nav> tag can be used to specify links on a page such in the
main site navigation or for pagination.
<article>: The <article> tag makes it easy to mark new blog
posts or article entries in an online publication. Search engines can put more
weight on any content wrapped with this tag. It also helps to clean up the HTML
code by reducing the use of <div> tags.
<section>: Blog posts are typically broken into different sections to make
it easier for users to find what they are looking for. The <section> tag
can be used to specify these subsections of your content, each with their own
separate HTML heading.
<aside>: An <aside> tag can be
like a section tag, but one that focuses on secondary content such as
sidebar, or a post-article call to action might be a good place
to use <aside> tags.
<footer>: While not as useful as the <header> tag, the <footer>
tag still offers SEO benefits as it can be used to specify content in the
footer section of a website such as company information and other useful links.
Each page can even have its own footer section.
<video>: The <video> tag is easily one of the most useful tags as it
allows for cross-browser compatibility to display videos without having to use
Flash. HTML5 also makes it possible to include additional information about the
video such as captions and subtitles.
<figure>: The <figure> element
depicts space for separated content, such as photos,
diagrams, etc. To provide a caption for this element,
use the <figcaption> tags.
<details>: The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. This tag is used to create an interactive widget that the user can open or close it. The content of the details tag is visible when open the set attributes.
<summary>: The <summary> tag in HTML is used to define a summary for the <details> element. When the summary is clicked by the user, the content placed inside the <details> element becomes visible which was previously hidden.
Web-Layout Using Semantic Elements
See the Pen Semantic Elements Web-layout by PANKAJ (@pankkap) on CodePen.
Video Tutorial Link: https://www.youtube.com/watch?v=0qfWqsKrZ04