HTML Semantic Elements

HTML Semantic Elements

Leave a Comment / Html, Programming / By / article tag, aside tag, figure tag, footer tag, html header tag, HTML Semantic Elements, main tag, mark tag, nav tag, section tag, time tag

HTML Semantic Elements.

HTML5 has seen a lot of new semantic tags and components introduced by HTML5 developers. It gives the content’s default arrangement on every webpage or website a more commercial significance. These semantic tags make it easier for web developers, search engines, and associative technologies to recognize the functions of various elements on a webpage and show them wherever they are needed. Utilizing semantic tags or features throughout the HTML5 web development process enhances your web pages’ maintainability, online and offline accessibility, and SEO-friendly article content.

HTML Semantic Elements

So, tell us more about HTML5’s new tags and components in detail.

  • <header> – An HTML5 “header” is a group of significant text data or navigation links that are shown at the top of a webpage or segment of a webpage.
  • <nav> – In HTML5, the <nav> tag represents a specific region of a web page as a navigation link. Information such as the website menu, link lists, or table of contents, for instance, are presented.
  • <main> – In HTML5, the <main> element designates the document’s primary resource region. You may show man text or digital data on your website with the main tag.
  • <article> – In HTML5, a “article” denotes a stand-alone part of content information for a web page. It is openly shared and utilized on any website. similar to any website, blog post, news item, etc.
  • <section> – The HTML5 “section” element designates a discrete grouping of text resources inside a page. A section tag on a website can display several articles, titles, and other page components. It can also have its own title.
  • <aside> – The HTML5 aside element denotes the content of a web page. design that is only loosely connected to the website’s content or the area around it. Web pages frequently utilize the HTML5 aside tag to display sidebars, pull quotes, or advertising content.
  • <footer> – In the HTML5 version, <footer> displays section or footer information of a web page or website. Website copyright information, website contact information, or website-related link information are frequently included in footer tags.
  • <figure> and <figurecaption> – In the HTML5 version, the tags “figure” and “figurecaption” are used to gather and caption multimedia online content, such as graphics, photos, diagrams, or charts. HTML5’s default container, <figure>, gives the object <figcaption> caption information.
  • <time> – The time tag in HTML5-based web pages represents a specified time period or range of times. On websites, the time tag is frequently used for date, time, and duration.
  • <mark> – In an article or web page, content that has been highlighted or marked for emphasis is represented by the HTML5 attribute <mark>. MARK tags are frequently applied to highlighted search results.
  • When creating a website with HTML5, tags or components like “header,” “footer,” and “nav” are utilized to provide more structure.

Here’s an example of the HTML5 version of how you can use HTML5 tags in your webpage.

<!DOCTYPE html>

<html>

<head>

    <title>Test Page</title>

</head>

<body>

    <header>

        <h1>Sample Website Title</h1>

        <nav>

            <ul>

                <li><a href=”/”>Home</a></li>

                <li><a href=”/”>Blog</a></li>

                <li><a href=”/”>Post</a></li>

                <li><a href=”/about.htm”>About</a></li>

                <li><a href=”/contact.htm”>Contact</a></li>

                <li><a href=”/disclaimers.htm”>Disclaimers</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <section>

            <h2>Website Article Section</h2>

            <article>

                <h3>Post Title</h3>

                <p>Write your website content here…</p>

            </article>

        </section>

        <aside>

            <h3>Display your adds here</h3>

            <p>Write desire paragraph section here</p>

        </aside>

    </main>

    <footer>

        <p>&copy; 2023 All content copyright by abc company</p>

        <nav>

            <ul>

                <li><a href=”/privacy.htm”>Company Policy</a></li>

                <li><a href=”/terms.htm”>Our terms and condition</a></li>

            </ul>

        </nav>

    </footer>

</body>

</html>

Semantic tags like <header>, <nav>, <article>, <section>, <footer>

The new semantic HTML5 tag elements <header>, <nav>, <article>, <section>, and <footer> are utilized in the HTML5 version to provide webpage and website content with more commercial purpose and structure. The function of various components of a web page and the organization of a web page is better understood by search engines, associative technology, and web developers thanks to these HTML5 elements or tags.

So, let’s utilize the header semantic tag in HTML5.

HTML5 <header> tag.

Introduction A menu, header, links, or text information displayed in a resource or web page container is represented by a series of navigation links at the top of a web page or portion of a website.

The website’s default logo, website title, primary navigation menu, and occasionally website introductory text and information display may all be found in the website header area.

On a single webpage, any website is permitted to use more than one “header” tag element. But in this case, each header tag should stand for a distinct part.

Example of HTML5 version header tag.

Html <header> tag example.

<!DOCTYPE html>

<html>

<head>

    <title>Header tag example</title>

</head>

<body>

        <h1>Your Website Title</h1>

    <nav>

        <ul>

            <li><a href=”/”>Home Page</a></li>

            <li><a href=”/”>Blog Page</a></li>

            <li><a href=”/”>Posts Page</a></li>

            <li><a href=”/about.htm”>About</a></li>

            <li><a href=”/contact.htm”>Contact</a></li>

            <li><a href=”/disclaimers.htm”>Disclaimers</a></li>

        </ul>

    </nav>

</header>

</body>

</html>

Html5 <nav> Tag.

A navigation link in HTML5 denotes a specific area of a website or webpage. As navigational information, the website may display information such as a menu, link list, or table of contents.

Typically, the main navigation menu on a webpage or website’s home page is designed using navigation tags.

can be positioned or shown wherever for a navigation menu pertaining to that portion of a website inside a “header” tag or “footer” tag.

Example of nav tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Navigation tag example</title>

</head>

<body>

  <nav>

    <ul>

        <li><a href=”/”>Home</a></li>

        <li><a href=”/about”>Blog</a></li>

        <li><a href=”/course.htm”>Course</a></li>

        <li><a href=”/about.htm”>About Us</a></li>

        <li><a href=”/contact.htm”>Contact Us</a></li>

    </ul>

</nav>

</body>

</html>

Html5 <article> Tag.

The article element in HTML5 designates a compact segment of text or a self-contained portion of a web page’s resources. It is freely distributable and utilized several times in any HTML5 webpage. Examples of common article tag content include blog posts, news articles, single-post texts, and user-generated text content on websites.

A header tag (often h1 to h6) that specifies the content of an article is required for article tags in HTML5.

can be used inside a section element or immediately inside a body tag, anywhere on an HTML5 web page.

Example of article tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 Article tag example</title>

</head>

<body>

  <article>

    <h2>Webpage first post article</h2>

    <p>write desire web page article here…</p>

    <h2>Webpage second post article</h2>

    <p>write desire web page article here…</p>

</article>

</body>

</html>

Html5 <section> Tag.

A webpage describes an independent segment of online resources within a web page document in the HTML5 version. A section tag on a web page can include several articles, titles, and other components that are shown on a web page. It can also have its own title.

Helps in segmenting the material on a webpage into useful sections.

Section tag example in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 section tag example</title>

</head>

<body>

  <section>

    <h2>Webpage Section Title</h2>

    <p>Webpage content of the section here…</p>

    <article>

        <h3>Web page Subsection Title</h3>

        <p>Web page content of the subsection here…</p>

    </article>

</section>

</body>

</html>

Html5 <footer> Tag.

In the HTML5 version, a footer tag or element at the bottom of a section, pages, or website displays footer information. This frequently shows the website copyright information, contact details, relevant links, or other website navigational data.

A page, website, or the entire website can be closed using the footer tag in the HTML5 version.

Example of footer tag in HTML5 version.

<!DOCTYPE html>

<html>

<head>

    <title>Html5 footer tag example</title>

</head>

<body>

 <footer>

    <p>&copy; 2023 All right reserved by Abc Company! </p>

    <nav>

        <ul>

          <li><a href=”/email”>E-mail</a></li>

            <li><a href=”/contact”>Contact</a></li>

            <li><a href=”/privacy”>Privacy Policy</a></li>

            <li><a href=”/terms”>Terms & condition</a></li>

        </ul>

    </nav>

</footer>

</body>

</html>

Improving accessibility and SEO with semantic HTML

The search engine optimization (SEO) and online web user accessibility of your web pages may be greatly enhanced by using semantic HTML elements in the HTML5 version.

Let’s examine how HTML5 tags may benefit both you and search engines.

Accessibility.

Clear and meaningful online webpage structure is provided to your webpage content by semantic HTML5 tags. This makes it simpler for online screen readers and other supported technologies to navigate and comprehend your web pages.

Section and title.

Screen readers and website visitors can better grasp the hierarchical order of material and text organization on HTML5 web pages when headings (from “h1” to “h6”) are used for section handlers and names.

Forms’ element labels.

The accessibility of forms for online users is increased by employing the HTML5 <label> tag element to provide straightforward object labels for form components and by appropriately connecting them with the appropriate inputs using form attributes like for and id. To make it easier for website visitors to grasp the purpose of each input, HTML5 screen readers employ label declarations.

For photos, alternative text is used.

Online users with visual impairments can better grasp the content of online pictures thanks to HTML5’s use of Image Alternatives and Collapsed Image Alternative Text Information.

Tables and lists.

The usage of semantic list tag elements in HTML5 tables, such as <ul>, <ol>, and <dl> for list elements, <th> for headers, and <caption> for captions, guarantees that the screen reader can understand the structure and connections of lists and tables.

Components of semantics.

Other semantic HTML5 tag elements like “header,” “nav,” “main,” “article,” “section,” and “footer” give assistive technology context-specific information. This makes it easier for website visitors to comprehend the rationale behind the content’s organization and purpose.

HTML5 search engine optimization (SEO).

Semantic organization.

Semantic HTML elements help search engines understand the content and context of a web page or website. The search engine search rankings of your webpage or website might benefit from properly structured content with titles, paragraphs, lists, and semantic components.

Placement of keywords.

Semantic HTML on a webpage or website enables you to insert keywords and phrases relevant to the webpage post in significant areas of your website postings, such as titles and paragraphs. This can raise your content’s position or visibility in search engine results for your website or online page.

Link content.

Search engines can better understand the subject and relevancy of the linked visual material through the use of the <a> element in image link text on HTML web pages. It might raise your website’s picture pages’ internet search engine rankings.

Picture alt text.

Not only can using alternative text in the <img> tag element of an HTML webpage make your use of images more accessible. However, it also offers Google and other online search engines useful data, particularly by showing data on online picture search results, etc.

Arranged information.

To offer structured data, semantic HTML elements can be used in conjunction with webpage or website schema markup (for instance, JSON-LD). Which internet search engines may make advantage of to provide rich search results, such rich snippets or knowledge panels.

Improved client experience.

Your website complies with HTML5’s strong accessibility practices. They frequently enhance the experience of online page visitors and are strongly connected to semantic HTML elements. HTML5 tags may greatly improve your website’s SEO by decreasing website bounce rates and lengthening user sessions, both of which increase user pleasure and engagement.

Rate this post

Related posts

html5Learn Html5 HTML Semantic Elements In HindiHTML Semantic Elements In Hindi htmlLearn Html search engineWhat Is A Search Engine and Their Type? HTML Document StructureHTML Document Structure Introduction to HTML.Introduction to HTML Microsoft office 2016About Microsoft office 2016 About Microsoft Office 2013 Pro Plus. HTML ElementsHTML Elements Text Formatting.Html Text Formatting Images and MultimediaImages and Multimedia in HTML HTML Document Structure In HindiHTML Document Structure In Hindi Forms and Input ElementsHtml Forms and Input Elements HTML TablesHTML Tables Links and Anchor TagsHTML Links and Anchor Tags Everything About Microsoft Windows 10. bootstrap cssWhat Is Bootstrap Css Wps officeAbout Wps Office. HTML Elements In HindiHTML Elements In Hindi About Libre office. About Microsoft Office 2013 Pro Plus Hindi. view.jsAbout Vue.js microsoft office 2016About Microsoft office 2016 Hindi Images and Multimedia In HindiImages and Multimedia HTML in Hindi What is CssAbout Css(cascading style sheet). Html Text Formatting In HindiHtml Text Formatting In Hindi Polynomials Class 10th बहुपद कक्षा 10 (Polynomial Class 10th) Forms and Input Elements In hindiHtml Forms and Input Elements in Hindi xmlAbout Xml javascript programmingLearn Java Script Programming javaLearn Java Programming learn c programmingLearn C Programming Apache open officeApache Open Office. Links and Anchor Tags In HindiLinks and Anchor Tags In Hindi Google search engineWhat Is A Search Engine and Their Type In Hindi? tableauAbout Python Tableau Windows 10 apps DescriptionMicrosoft Windows 10 Operating System Apps. tailwind cssWhat Is Tailwind Css Introduction To HTML In HindiIntroduction To HTML In Hindi त्रिकोणमिति कक्षा 10 (The Trigonometry Class 10th) Trigonometry Class 10th 10 Approved Steps for Choosing the Best Web Design that Fit for Your Business postgresqlAbout Postgresql mysqlAbout mysql About Microsoft office 365. magentoAbout Magento Programming asp.netAbout Asp.net arduinoAbout Arduino Microcontroller Board bulma cssWhat Is Bulma Css reactjsAbout ReactJs Framework mongodbAbout MongoDb Database InternetWhat Is The Internet? Coordinate Geometry (Analytical Geometry) Class 10th Everything About Microsoft Windows 10.Everything About Microsoft Windows 10 Hindi. scipy python libraryAbout Scipy Python Library Windows 8.1 appsMicrosoft Windows 8 Apps. scala programmingAbout Scala Programming jqueryWhat Is Jquery/javascript query निर्देशांक ज्यामिति कक्षा 10 (The Coordinate Geometry Class 10th) joomlaAbout Joomla Cms Windows 7About Microsoft Windows 7. About Raspberry pi board Libre office 5About Libre office In Hindi. pandasAbout Pandas Windows legacy osMicrosoft Windows Legacy Operating system. nodejsWhat is Nodejs expressjsWhat Is Express.js HTML Tables In hindiHTML Tables In Hindi ajaxAbout Ajax What is linuxLinux, What is Linux, A Complete Overview of Ubuntu Linux. Arithmetic Progression Class 10th समान्तर श्रेढ़ी कक्षा 10 (Arithmetic Progressions Class 10th) plsqlAbout Pl/Sql objective cAbout Objective C Programming angularjsWhat is Angular Js Quadratic Equation Class 10th द्विघात समीकरण कक्षा 10 (Quadratic Equations Class 10th) jsonAbout Json json javascript object notation kotlinAbout Kotlin Programming c# programmingAbout C# Programming Section Formula Class 10th python numpyAbout Python Numpy Windows 7 hindiAbout Microsoft Windows 7 Hindi. Heron’s Formula Class 9th Triangle and its Properties Class 10th त्रिभुज और इसके गुण कक्षा 10 (The Triangle and its Properties Class 10th) Geometrical (Graphical) Meaning of the Zeroes of a Polynomial Class 10th बहुपद के शून्यकों का ज्यामितीय (आलेखीय) अर्थ कक्षा 10 [Geometrical (Graphical) Meaning of the Zeroes of the Polynomial Class 10th] हीरोन का सूत्र कक्षा 9 (Heron’s Formula Class 9th) Concept of Critical Value with the help of Different Techniques to find it sql dbmsAbout Sql – Structure Query Language Windows 8About Microsoft Windows 8. First Program In C Language.First Program In C Language. विभाजन सूत्र कक्षा 10 (The Section Formula Class 10th) programingType of Computer Programming. Polynomials Class 9th perl programmingAbout Perl Programming Operations on Real Numbers Class 9th Perimeter and Area Class 6th mouse and keyboardMouse and Keyboard Operations. वास्तविक संख्याओं पर संक्रियाएँ कक्षा 9वीं (Operations on Real Numbers Class 9th) परिमाप और क्षेत्रफल कक्षा 6 (Perimeter and Area for Class 6th) Sum of First n Terms of an Arithmetic Progression Class 10th समान्तर श्रेढ़ी के पहले n पदों का योग कक्षा 10 (Sum of n Terms of Arithmetic Progression Class 10th) Windows 10 Apps HindiMicrosoft Windows 10 Apps Hindi. Sets Class 11th समुच्चय कक्षा 11 (The Sets Class 11th) Windows operating systemMicrosoft Windows Legacy Operating System Hindi. go languageAbout Go Programming Language computer networksType of Computer or Internet Network. typescript languageAbout Typescript Language assembly languageAbout Assembly Programming LinuxWhat is Linux, A Complete Overview of Ubuntu Linux Hindi. input and output deviceInput And Output Device. Computer Hardware hindiPc assembly and its operation. dart programmingAbout Dart Programming Tangent and Secant of Circle Class 10th Coordinate Geometry Class 9th वृत्त की स्पर्श रेखा और छेदक रेखा कक्षा 10 (Tangent and Secant of Circles Class 10th) Introduction to Euclid’s Geometry Class 9th यूक्लिड की ज्यामिति का परिचय कक्षा 9 (Introduction to Euclid’s Geometry Class 9th) निर्देशांक ज्यामिति कक्षा 9 (The Coordinate Geometry Class 9th) nth Term (General Term) of an Arithmetic Progression Class 10th समान्तर श्रेढ़ी का n वाँ पद (व्यापक पद) कक्षा 10 (nth Term of Arithmetic Progression Class 10th) r languageAbout R Programming Language Decimal Numbers Class 7th दशमलव संख्याएँ कक्षा 7 (Decimal Number Class 7th) Windows 8 AppsMicrosoft Windows 8 Apps Hindi. type of programmingType of Computer Programming in Hindi. Apache open office hindiApache Open Office Hindi. Most Used Popular Internet Messenger And Social Media Platform. 5 Valuable Tips for Students to Improve Their Writing Skills in English microsoft sql serverMicrosoft Sql Server delphi programmingAbout Delphi Programming First Program In C Language. in hindiFirst Program In C Language In Hindi. ProtocolInternet Technology And Network Protocols. An In-Depth Review of imagestotext.io in 2023 कार्तीय समतल में दो बिन्दुओं के बीच की दूरी और दूरी सूत्र कक्षा 10 (The Distance Formula Class 10th) Angle Subtended by a Chord of Circle Class 10th वृत्त की जीवा द्वारा अंतरित कोण कक्षा 10 (Angle Made by a Chord of Circle Class 10th) Integers Class 6th पूर्णांक संख्याएँ कक्षा 6 (Integer Class 6th) Distance Between Two Points in Cartesian Plane and Distance Formula Class 10th बहुपद कक्षा 9वीं (Polynomial Class 9th) Whole Numbers Class 6th पूर्ण संख्याएँ कक्षा 6 (Whole Number Class 6th) भिन्न संख्याएँ कक्षा 7 (Fraction Class 7th) Operations on Polynomials Class 10th बहुपदों पर संक्रियाएँ कक्षा 10 (Operation on Polynomial Class 10th)

Similar Posts

Leave a Comment

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

Scroll to Top