Wednesday, June 24, 2020

HTML Semantic Elements

Video Tutorial Link:


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: