Teaching semantics in HTML5

In any language, understanding the meaning of words is essential when communicating. If this is a computer connection, then it becomes more important. 

As a result, HTML 5 provides meaningful elements that make the code easier to understand.

Semantics defines the meaning of words and terms.

Semantic elements = elements with meaning. Semantic elements provide simple and clear meaning for both the browser and the developer.

for example

The <div>, <span> and… tags are non-semantic elements. These tags do not provide anything about their content.

On the other hand, the <form>, <table>, <article> and ت tags are semantic elements because they clearly define their content.

HTML5 semantic elements are supported by all major browsers.

Why use semantic elements?

In HTML 4, developers must use id or class attribute values ​​to style elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav,….

This method is very difficult for search engines to correctly identify web page content. Now the HTML5 elements (<header> <footer> <nav> <section> <article>) are simplified. داده Allows data to be shared and reused in applications, plans and communications..

Semantic elements can increase the accessibility of your website and also help to create a better website structure.

Semantic elements in HTML5

Description Semantic tag Number
Defines an article. <article> 1
Defines content separate from page content. <aside> ۲
Defines more details that the user can view or hide. <details> 3
Defines a title for the <figure> element. <figcaption> 4
Specifies comprehensive content, such as images, charts, photos, code lists, and more. <figure> 5
Specifies a footnote for the document or section. <footer> 6
Specifies a header for the document or section. <header> 7
Specifies the main content of the document. <main> 8
Defines index or highlight text. <mark> 9
Defines navigation links. <nav> 10
Defines a section in the document. <section> ۱۱
Defines a visible title for the <details> element. <summary> ۱۲
Specifies the date or time. <time> 13

Some important semantic elements in HTML5

The <article> element in HTML5

The <article> element defines the content of an article in a document, page, application, or website. It can be used to show a forum post, a magazine, a newspaper article or a big story.

Example

<article>

    <h2> Today’s highlights </h2>

    <p> First story </p>

    <p> Second story </p>

    <p> Third story </p>

 </article>

The <idear> element in HTML5

The <aside> element indicates content that indirectly provides information about the main content of the page. Often shown as a sidebar.

Example

<body>

<h2> My last year memories </h2>

<p> I have visited Paris with my friends last month. This was the memorable journey and i wish to go there again. </p>

  <aside>

    <h4> Paris </h4>

    <p> Paris, France’s capital, is a major European city and a global center  for  art, fashion, gastronomy and culture </p>

  </aside>

</body>

<section> element in HTML5

The <section> element is used to represent a standalone section of an HTML document. A page can have several sections, and each section can contain any content, but a title is not required for each section.

Example

<h2> Web designing Tutorial </h2>

<section>

    <h3> HTML </h3>

    <p> HTML is an acronym which stands  for  Hyper Text Markup Language which is used  for  creating web pages and web applications. </p>

 </section>

 <section>

    <h3> CSS </h3>

    <p> CSS stands  for  Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. </p>

 </section>

Put the <article> tag in the <section> tag or vice versa?

We know that the <article> element specifies a comprehensive independent content and the <section> element defines a section in the document.

In HTML we can use <section> elements in <article> elements and <article> elements in <section> elements.

We can also use <section> elements in <section> elements and <article> elements in <article> elements.

for example

In a newspaper, a sports article in the sports section may have a technical section.

The <nav> element in HTML5

The <nav> element is used to define a set of navigation links.

Example

<! DOCTYPE html>

<html>

<body>

<nav>

  <a href=”https://www.javatpoint.com/html-tutorial”> HTML </a> |

  <a href=”https://www.javatpoint.com/java-tutorial”> Java </a> |

  <a href=”https://www.javatpoint.com/php-tutorial”> PHP </a> |

  <a href=”https://www.javatpoint.com/css-tutorial”> CSS </a>

</nav>

</body>

</html>

The <header> element in HTML5

The <header> element represents the document header, which can contain primary content or navigation links.

Example

<header>

    <h1> Welcome to Web123.com </h1>

    <nav>

        <ul>

            <li> Home | </li>

            <li> About us | </li>

            <li> Contact us </li>

        </ul>

    </nav>

 </header>

The <footer> element in HTML5

The <footer> tag defines a footer for an HTML document or page.

Example

<footer>

    <p> © Copyright 2019 ٫ All rights reserved. </p>

 </footer>

 

Leave a Reply

Your email address will not be published. Required fields are marked *