Introduction
The HTML web page should be meaningful for the programmer and the search engine. The programmer deals with Semantic HTML and non-semantic HTML; concerning the tags, he uses in coding. In the article, we will focus on the significance of having a semantic HTML web page on your site.
semantic HTML web page, and semantic HTML web page
The HTML site is a combination of semantic and non-semantic HTML tags.Semantic HTML tags are tags that provide meaning to the content on the page.
They are used to categorize different types of content and give more sense to the data on a page.
Non-semantic HTML tags are not designed with any meaning in mind. They do not define what type of content they contain nor provide any other information about their content.
There is no difference in how non-semantic and semantic HTML work, but there is a significant difference in how web developers use them.
Non-semantic tags are helpful for styling content, while semantic tags help give meaning to the data on a page.
semantic HTML web page: tag list
Semantic HTML tags are a set of tags that provide more meaning and context to the content.
They are not only used for styling but also for providing information about the content. The most common semantic HTML tags include:
First-class: Placement
<body> tag
The body tag is the container for all of the page’s content. It contains the text and images that make up the page.
<nav> tag
<nav> tag is used to create a navigational menu for the page. The tag should include one or more of the following elements:
- A list of links to other pages on the site.
- A list of links to pages within the current site.
- A list of search results.
- Any other set of links that are relevant to the current page.
The <nav> tag can be in the <header> or in <footer>.
<main> tag
The <main> tag is used to determine the main content of a document. It can be used to identify a section that is the essential part of the document and should be given a more prominent display.
The <main> tag is a container for all the other tags that make up the main content of your document. The <main> surrounds the main content of a page between the header navigation and the footer zones.
<footer> tag
The footer section is always at the bottom of a web page. The <footer> tag is typically used to contain information about the author of the page, copyright information, or links to terms of service, privacy policy, and contact information.
It can also be used for links to related content or other pages on the website.
Second class: Embedding
<video> tag
The video tag is a relatively new element in HTML5. It can be used to embed video content on a web page.
A video tag is made up of the following parts:
- Opening tag: <video>
- Attributes: src, autoplay, width, height, poster
- Closing tag: </video>
<audio> tag
The <audio> tag is an HTML element that allows you to embed sound content in your web pages. It is typically used to provide a fallback for browsers that do not support the tag.
The element has two attributes: the src attribute, which specifies the URI of the audio file, and the controls attribute, which determines whether the user interface controls this audio.
Audio tags are not supported in all browsers, so it is essential to have a fallback plan if you want to deliver sound content to all users.
Third class
<figure> tag
A <figure> tag is a receptacle for media content, such as images, videos, animations, diagrams, code snippets, and illustrations.
<figure> tag
<figure> HTML tag provides a caption for a figure. It is typically used when the figure is referenced in the main content and helps readers understand its context.
<section> tag
<section> tag is a container that holds content. It divides the page into sections, like an introduction, the main section, and the conclusion.
Sections can be nested inside one another to create a hierarchy of information on the page.
<article> tag
<article> HTML tag is a container for an independent content item such as a blog post, comment, or news article.
It can be used to group related items on the same page, and it can also be used to denote the start of a new section in an HTML document.
<aside> tag
<aside> tag allows you to create a section of content on your page that is separate from the page’s main content.
This content may be tangentially related to the subject or a sidebar that provides additional information on a given topic.
Non-semantic HTML web page
Non-semantic HTML is a type of HTML that does not use semantic HTML tags.
It is typically used for styling purposes, and it can be used to make a website more visually appealing.
<div> tag
A <div> is a block-level element that can be used to create divisions or sections within a document.
Divs are typically styled with CSS and can be nested inside one another to create complex layouts.
Benefits of using semantic HTML web page
- Semantic HTML web pages are usually accessible on mobile devices.
- Semantic HTML webpages are SEO-friendly. They improve the SEO of the web pages.
- The code source of the Semantic HTML webpage is easy to understand and easy to read.
Illustrative examples
Header and Nav example
Input code source
ouput code source
<!DOCTYPE html><html><body><!– header container–><header><h1>Site’s Navigational Links</h1><!– nav links–><nav><ol><li><a href=”#Home”>Home</a></li><li><a href=”#Blog”>Posts</a></li><li><a href=”#Products”>Products</a></li><li><a href=”#Contact”>Contact</a></li><li><a href=”#Services”>Services</a></li><li><a href=”#Sign Up”>Sign Up</a></li></ol></nav></header></body></html>
The main and footer section
The code source
<!DOCTYPE html><html><body><!– header container–><header><h1>Site’s Navigational Links</h1><!– nav links–><nav><ol><li><a href=”#Home”>Home</a></li><li><a href=”#Blog”>Posts</a></li><li><a href=”#Products”>Products</a></li><li><a href=”#Contact”>Contact</a></li><li><a href=”#Services”>Services</a></li><li><a href=”#Sign Up”>Sign Up</a></li></ol></nav></header><main><h1>Main content</h1><div>The main is used to determine the main content of a document. It can be used to identify a section that is the essential part of the document and should be given a more prominent display.!</div></main><footer><h1>Footer section</h1><div>Phone +216 27188 554 </div><div>Affiliate Disclosure</div><div>Email: [email protected] </div></footer></body></html>
The output of the code source
The main, section, and article elements
The code source
<!DOCTYPE html><html><body><!– header container–><header><title>Build semantic HTML web pages</title><h1>Site’s Navigational Links</h1><!– nav links–><nav><ol><li><a href=”#Home”>Home</a></li><li><a href=”#Blog”>Posts</a></li><li><a href=”#Products”>Products</a></li><li><a href=”#Contact”>Contact</a></li><li><a href=”#Services”>Services</a></li><li><a href=”#Sign Up”>Sign Up</a></li></ol></nav></header><!–main element–><main><!–section element–><section><h1>Section</h1><!–article element–><article>Article HTML tag is a container for an independent content item such as a blog post, comment, or news article. It can be used to group related items on the same page, and it can also be used to denote the start of a new section in an HTML document. <article></section></main><footer><h1>Footer section</h1><div>Phone +216 27188 554 </div><div>Affiliate Disclosure</div><div>Email: [email protected] </div></footer></body></html>
The output of the code source
