Semantics In HTML 5| HTML 5 Tutorials
SEMANTICS in HTML 5 also referred as structural elements mainly focuses on providing meaning to the elements rather than just concentrating on how to structure the elements on the webpage. The semantic elements provide better structure to the document. There exists a variety of semantic elements in HTML 5 which are as follows :-
<section>
The <section> tag represents a section or a portion of a document. These sections may be used to implement e-newspapers to display various chapters, header, footer etc. It is used to represent divisions of a webpage. It is a paired tag.
Syntax- <section> _ _ _ _ _ _ _ _ _</section>
Note:- An important point to note is that body of a html document consists of number of sections, sections consists of numerous articles and article contains a number of paragraphs.
<article>
The <article> tag represents an article in a web document. The <article> tag could be used in blogs. It is a paired tag.
Syntax- <article> _ _ _ _ _ _ _ _ _</article>
<header>
The <header> tag is used to display the headers for subheadings, navigational controls etc. It is a paired tag. These headers are particularly used for sections. Header generally occurs at the top of a section.
Syntax- <header> _ _ _ _ _ _ _ _ _</header>
<footer>
The <footer> tag is used to display copyrights, trademarks, frequently used links, privacy and policy terms etc. It generally occurs at the bottom of a section. It is a paired tag.
Syntax- <footer> _ _ _ _ _ _ _ _ _</footer>
<hgroup>
This tag groups a set of six heading tags. It includes all the heading elements from h1 to h6. It is a paired tag.
<aside>
This tag enables us to display the text of the document towards left or right. It is a paired tag. But to display the text aside, we also need to use cascading along with the <aside> tag.
Syntax- <aside> _ _ _ _ _ _ _ _ _</aside>
<details>
This tag enables us to create interactive pages with the ability to open and close details. The contents of <details> tag are not visible unless the value of the open attribute is set.
Syntax- < details > _ _ _ _ _ _ _ _ _</ details >
<summary>
This tag describes the heading of the <details> tag. The heading could be clicked to view or hide the content of the <details> tag.
<figure>
This tag provides auto adjustment and padding to the image appearing on the webpage.
Syntax- < figure > _ _ _ _ _ _ _ _ _</ figure >
<figcaption>
This tag provides caption to the image inserted on the webpage.
Syntax- <figcaption> _ _ _ _ _ _ _ _ _</figcaption>
<nav>
This tag is used for the portion of the document which is supposed to navigate to various other links.
Syntax- <nav> _ _ _ _ _ _ _ _ _</nav>
The above tags could be understood from the following example
<!DOCTYPE html>
<head><title>HTML2</title>
</head>
<body>
<details>
<summary><b>ARTICLES</b></summary>
<ul>
<li>Blogging</li>
<li>Content Writing</li>
<li>Content Editing</li>
</ul>
</details>
<aside style='color:red;float:left;font-style:italic;width:120px'>
An article is a word that is used with a noun to specify grammatical definiteness of the noun
</aside>
<aside style='color:blue;float:right;font-style:italic;width:120px'>
An article is a word that is used with a noun to specify grammatical definiteness of the noun
</aside>
<p>An article is a word that is used with a noun to specify grammatical definiteness of the noun, and in some languages extending to volume or numerical scope.
The articles in English grammar are the and a/an, and in certain contexts some.</p>
<p>Articles are words that define a noun as specific or unspecific. Consider the following examples: After the long day, the cup of tea tasted particularly good.
By using the article the, we've shown that it was one specific day that was long and one specific cup of tea that tasted good.
</p>
<figure>
<image src="C:\Users\Administrator\Desktop\images.png" width="300px">
<figure>
</body>
</html>Output:
