Previous Next

HTML Semantic Elements📌

Semantic HTML elements are elements that provide a clear and understandable description of their purpose in a format that can be comprehended by both humans and machines.

What do Semantic Elements refer to?

HTML was initially developed as a markup language to define documents in the early days of the internet. However, as the internet expanded and gained popularity among a wider audience, its requirements evolved. Initially designed for the purpose of sharing scientific documents, the internet's users soon began to seek ways to share a variety of content. A rapid shift occurred, with individuals increasingly desiring to enhance the visual aesthetics of web content.


Examples of non-semantic elements: <div> and <span> because they tell nothing about their content.

Examples of semantic elements: <form>, <article> and <table> because they define their content.


Collection of recently added semantic HTML elements

The semantic elements added in HTML5 are:


HTML<section>Element

The<section>element defines a section in a document.

The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way.



Instances where you can employ the <section> element includes:

A web page could typically be divided into sections, such as an introduction, content, and contact information


Example:

This example contains two sections in a document

                
                    <section>
                        <h1> Hello there!!! </h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur non at reprehenderit, quisquam modi ab vero hic eligendi ipsum.lt;/p>
                    </section>

                    <section>
                        <h1> This is a section </h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur non at reprehenderit, quisquam modi ab vero hic eligendi ipsum.</p>
                    </section>

HTML<article>Element

The <article> element defines content that is independent and self-contained.



Instances where you can utilize the <article> element include:


Example:

Three articles with independent, self-contained content:

                
                    <article>
                        <h2> Article 1 </h2>
                        <p>Atomic Habits will reshape the way you think about progress and success and give you the tools and strategies you need to transform your habits.lt;/p>
                    </article>

                    <article>
                        <h2> Article 2 </h2>
                        <p>Let's define habits. Habits are the small decisions you make and actions you perform every day. According to researchers at Duke University, habits account for about 40 percent of our behaviors on any given day.</p>
                    </article>

                    <article>
                        <h2> Article 3 </h2>
                        <p>Activation energy is the minimum amount of energy that must be available for a chemical reaction to occur. Let’s say you are holding a match and that you gently touch it to the striking strip on the side of the match box. </p>
                    </articlen>

Know That:

Its poaaible to nest the <article> element in a <section> element and vice versa.

So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.


HTML<header>Element

The <header> element serves as a container for introductory content or a group of navigation links.



The common contents found within a <header> element include:

Know that:

It is possible to include multiple <header> elements within a single HTML document. Nevertheless, it's important to note that the <header> element cannot be nested within a <footer>, <address>, or another <header> element.


Example:

A heading within an <article>

                
                    <article> 
                       <header> 
                          <h1> This is a topic </h1q>
                          <p> This is a very long paragraph i don't feel like typing </p>
                       </header>
                       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </article>

HTML<nav>Element

The <nav> element is used to specify a collection of navigation links.

Example:

                
                    <nav>
                        <a href ='/home/'> Home </a>
                        <a href ='/about/'> About </a>
                        <a href ='/services/'> Services </a>
                        <a href ='/contact/'> Contact </a>
                    </nav>

Know that:

NOT all links of a document should be inside a <nav> element. The <nav> element is designed specifically for significant sets of navigation links."


HTML<aside>Element

The <aside> element defines some content aside from the content it is placed in, such as a sidebar.The content within the <aside> element should have an indirect connection to the surrounding content

Example:

                
                    <h1> Hello there!! </h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima fugiat earum laboriosam! Laboriosam voluptatibus veritatis facere error!</p>
                    <aside>
                        <h2> This is life!! </h2>
                        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque qui repellendus illo sed! Distinctio quidem similique fugit.</p>
                    </aside>

HTML <figure> & <figcaption> Elements

The <figure> element is used to indicate self-contained content, which can include illustrations, diagrams, photographs, code listings, and more.



The <figcaption> element is used to provide a caption for a <figure> element and its is positioned either as the first or the last child within a <figure> element.

Example:

                
                    <figure> 
                        <img src ='html_5.png alt='html_5'>
                        <figcaption> HTML 5 image </figcaption>
                    </figure>

HTML <footer> Element

The <footer> element specifies a footer for a document or a section.You can have multiple <footer> elements in a document.



Common contents found within a <footer> element include:

Example:

                
                    <footer> 
                        <p> Copyright © HTML.ORG.IN 2023 </p>
                    </footer>

Explainations On Other Semantic Elements in HTML



That's all for this lesson, see you next one.

Previous Next