Semantic tags in HTML5 - Structure and Layout

Zia

2 Followers

Follow

Jul 1, 2024

-

0 sec read

606

0

0

0

Introduction

Several elements and principles are used to get the desired results from website design. Using these principles and elements helps to develop a rich, attractive, efficient, and aesthetically pleasing website. In other words, using some HTML tags and graphics does help to create a useful and efficient website. The navigation bar plays an important role in making the Web page user-friendly.

HTML5 Semantic Tags

HTML5 has evolved by introducing new elements that bring semantics to a higher level. New tags were developed to create a stable semantic structure. The earlier version of HTML had the universal tag div used to accomplish various tasks in the HTML structure. The constraint with the div tag was that. It confused the user when multiple div tags were used in large coding. Now, HTML5 has introduced two types of semantic tags. They are namely, text-level and structural.

Structural Semantic Tags

They are block-level elements and are used to structure pages. The new structural-semantic elements are as follows:

1. Section:

The section element represents a section of a Web document. It is used for grouping related content and is different from other content groups present on a Web page. It is similar to a div tag though the section element has more semantic meaning. In other words, the section element is more meaningful as the content inside the section tags should be related.

2. Header:

The header element represents the header of a Web page. It can be used either at the top of the document or at the top of a section. Though most of the Websites currently use a single header at the top of the page called a masthead, a Web developer can have multiple headers in a single HTML5 document. This element is used as a container containing a group of introductory content or a set of navigational links.

3. Footer:

The footer is similar to the header and can be presented as the footer either for the document or the section. There can be multiple footer elements in an HTML5 document. A footer element has information about the Web document. The typical contents that are placed in the footer are as follows:

• Author's information
• Copyright information
• Text-based navigation bar
  

Any metadata for the section can also be included in a footer tag.

4. Aside:

The aside element is used for representing content related to the document's main text. It aligns itself as a sidebar. Compared with other structural tags its importance is not related to its position within a document, but rather to its relationship with the content. It is not mandatory to have an aside element aligned to the right or left of a Web page. It can be at the top, bottom, or even in the middle of a Web page.

5. Nav:

The nav element represents a section of a Web page that contains navigation links/menus to other Web pages or to other parts of the Web page. In other words, it allows the user to navigate through the Web page and site. This section is created for major navigational information such as a navigation bar for the entire site or a subsection menu.

6. Article:

The article element represents a section of content that is independent of Web page or site content. It is self-contained and stands on its own. The possible sources for the article tag are as follows:

• Blog post
• News story
• Comment
• Review
• Forum post

Note - The div tag must not be entirely replaced by semantic tags. The semantic tags must only be used in semantically appropriate scenarios.

Text-level semantic tags

The text-level semantic tags are currently inline elements and they are as follows:

1. Mark:

The <mark> tag is used for defining marked or highlighted text because of its relevance to the context. For example, the mark tag can be used for highlighting words on a Web page that a visitor searches for.

2. Time:

The <time> tag is used for defining either the time or a date in the Gregorian calendar. It is optionally used with a time and a time-zone offset. This element can be used to encode dates and times in a machine-readable format. For example, a Web user can add birthday reminders and scheduled events to the user's calendar and enable search engines to produce better search results.

Lists attributes and value of <time> tag.

• datetime - datetime: Provides the date/time given by the element's content
• pubdate - pubdate: It is used for specifying the publication date and time of the document

The datetime attribute is not mandatory.

3. Meter:

The <meter> tag displays markup or scalar measurements within a defined range. Absolute scalar values, such as height or weight, are not represented automatically by the meter tag. For this, the user must specify the height and weight within a known range of values. It is also used for displaying fractional values.

This displays a bar with a green indicator for the measurement.

Lists attributes and value of <meter> tag.

• form - form_id: Is used for specifying one or more forms to which <meter> belongs
• high - number: Is used for specifying high-range value
• low - number: Is used for specifying a range of values that is to be considered as low and should be greater than the min attribute value
• max - number: Is used for specifying the maximum value of the range
• min - number: Is used for specifying the minimum value of the range
• optimum - number: Is used for specifying the optimal value for <meter> tag
• value - number: Is used for specifying the current value of <meter> tag
  
  

4. Progress:

The <progress> tag can be used with JavaScript to display the progress of a task.

Lists attributes and value of <progress> tag.

• max - number: Is used for specifying the work as a floating point number that the task requires in total
• value - number: Is used for specifying how many tasks have been completed

HTML5 Semantic Layout

A sample representation of a Web page layout is displayed. The <section> element is used to explain how each section is defined and the purpose of each section.

In other words, HTML5 semantic layout and uses elements for each section.

1. <header>:

The <header> element provides introductory information. This information can include titles, subtitles, logos, and so on. It can also include navigation aids. The <head> tag provides information about the entire document, whereas the <header> tag is used only for the body of the Web page or for the sections inside the body.

In the code, the <header> element shows the commencement of the body. This is the visible part of the document. Inside the <header>, the <h1> element is used to indicate the importance of the heading.

2. <nav>:

The nav element is a section that contains links to other pages or links to different sections within the page. In other words, it is a section containing navigation links. Navigational elements help identify large blocks of navigational data and are generally not preferred for small navigational displays.

In the code, the <nav> element is present between the <body> tags, but after the closure of the <header> tag.

3. <section>:

It is the main information bar that contains the most important information about the document and it can be created in different formats. For example, it can be divided into several blocks or columns.

For example, a Website's home page could be divided into sections for an introduction, news updates, and contact information.

Similar to the navigation bar, the main information bar is a separate section. Therefore, the main information bar appears after the </nav> closing tag.

4. <aside>:

The <aside> element is a column or section that generally contains data linked to the main information, but not as relevant or important as the main information. This element is used for typographical effects, such as sidebars, for groups of nav elements, for advertising purposes, and for other content that cannot form part of the main content of the page.

The <aside> element can be placed in any part of the site layout. It can also be used in any way as long as the content is not considered the main content of the document.

5. <footer>:

HTML5 provides the <footer> element to give an end to the document's body. A footer typically contains information about sections. This can include author or company details, links to related documents, copyright data, and so on.

Usually, the <footer> element represents the end of the body section. However, the <footer> tag can be used many times inside the body to represent the end of different sections.

6. <article>:

The <article> element helps to insert a self-contained composition into an application, page document, or site. For example, an <article> element could be an interactive widget, an entry in a blog, an article in a newspaper or magazine, a post in a forum, a comment submitted by a user, or any other independent content.

In this code, the <article> tags are placed within the <section> tags. This indicates that the <article> tag belongs to this section. The <article> tags are placed individually one after another because each one is an independent part of the <section>.

The content of the website <article> element has an independent structure.