DONATE  
MENU
MYSQL
CSS
JSON
JAVASCRIPT
HTML
PHP
AJAX

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Tags/elements » Semantic Elements
Share Tweet WhatsApp

Semantic Elements

In simple terms, semantics elements are basically elements that communicate meaning about their content. They communicate clear meaning to both developers and browsers. For example, if you come across an element created with the <div> tag, you won't be able to tell what is the content of the <div> element until you must have taken a look at its constituents. Its content may be a <table>, <form>, <img> and etcetera. But then, when you see the <form> tag, you will be able to understand that it will contain input elements that enable the collection of data from a user. That is a semantic element. <div>, <span>, <center> are examples of non - semantic elements while <img>, <table>, <form>, <list>, <a> and others are examples of semantic elements. There exists numerous semantic elements in HTML and with the advent of HTML5, more were introduced to further help search engines understand the contents of a webpage. For example, with semantic elements such as <header>, <nav> and <footer> introduced in HTML5, search engines can now easily recognize the header, navigation bar and footer of a webpage. HTML5 Semantic Elements
S/NSemantic TagDesc
1. <article> Defines an article.
2. <aside> Defines content aside from the page content.
3. <details> Defines additional details that the user can view or hide.
4. <figcaption> Defines a caption for a <figure> element.
5. <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
6. <footer> Defines a footer for a document or section.
7. <header> Specifies a header for a document or section.
8. <main> Specifies the main content of a document.
9. <mark> Defines marked/highlighted text.
10. <nav> Defines navigation links.
11. <section> Defines a section in a document.
12. <summary> Defines a visible heading for a <details> element.
13. <time> Defines a date/time.
All HTML5 semantic elements are supported in all modern browsers.
KeyNote: Most HTML5 semantic elements may not necessarily have any effects on their content but then, they help developers and browsers to understand an HTML page/source code.
<article> This semantic tag specifies an article in a webpage. An article is a self contained or independent content which makes meaning on its own such as a blog post, newspaper article, forum thread and etcetera.
<article>
<h2>The Fall of the Great Benin Walls in Nigeria</h2>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph ...</p>
</article>

Copy PRACTICE IT

<aside> The <aside> semantic tag specifies information just more like a sidebar. The information should be related to the main information.
<h2>Learn HTML Programming</h2>
<p>HTML is a standard markup language popularly used in defining the structure and contents of a webpage.</p>
<aside>
<h5>HTML</h5>
- Hypertext Markup Language invented by Tims Berner-lee (1992)
</aside>

Copy PRACTICE IT

<figure> and <figcaption> The <figure> tag specifies self-contained and independent content such as illustrations, diagrams, photos, code listings, etc. On the the other hand, <figcaption> is to add a visible caption or description to an image. Therefore, we can define an <img> inside the <figure> tag and use the <figcaption> to give a little explanation to it.
<figure>
<img src='happy_children.jpeg' alt='happy children' height='40%' width='90%'/>
<figcaption>Some of the happy children I met today.</figcaption>
</figure>

Copy PRACTICE IT

<nav> This tag is used in specifying a set of navigation links such as categories or a website's pages. Not all links though.
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT US</a>
<a href="#">CONTACT US</a>
<a href="#">ADVERTISE</a>
</nav>

Copy PRACTICE IT

<header> Specifies a header for the webpage or a particular section of a webpage. Header usually comprise information such as the name of the webpage or section, its description and other introductory information.
<header>
<h1>Mars A Bit</h1>
<h4>Exploring mankind's new world.</h4>
</header>

Copy PRACTICE IT

<footer> Specifies a footer for the webpage or a particular section of a webpage. Footer usually comprise information such as the author/owner of the webpage or section, the year the webpage came into existence, copy right and others.
   <footer>
 <h3>About Us</h3>
    <div>
We are a team of web developers in New York City.
    </div>
    <center>Desynout &copy; 2020 - 2021</center>
</footer>

Copy PRACTICE IT

SUMMARY
  1. Semantics elements are elements that communicate meaning about their content.
  2. They can help developers, browsers and search engines understand the structure of your webpage.
  3. <form>, <img>, <table> are examples of semantic elements because when a developer, browser or search engines sees them, the developer or whatever will be able to know the use of the element. E.g <form> to create form elements or <img> for image elements.
  4. On the other hand, <div>, <span>, <center> are examples of non - semantic elements. They don't communicate directly what they contain as it may be an image, table, text, form and etcetera.
  5. With the advent of HTML5, more semantic elements were introduced to better help developers, browsers and search engines understand our webpages.
  6. They include <header>, <nav>, <footer>, <aside>, <figure>, <section>, <figcaption> and a host of others.
Take a short quiz on Semantic Elements.
Ask a question or tell us if Semantic Elements is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode