HTML Path

Examples

HTML Semantic Layout

Building a Semantic Layout

HTML semantic layout uses <header>, <main>, and <footer> for structure.

Introduction to HTML Semantic Layout

HTML semantic layout involves using tags like <header>, <main>, and <footer> to structure your web page content. These tags help to define the different sections of a web page, making it easier for search engines and developers to understand the content.

The Role of <header> in Semantic Layout

The <header> element represents the introductory content or a set of navigational links. It typically contains the site's logo, title, navigation links, or any other introductory content.

Here is an example of how a <header> might be structured:

Understanding the <main> Element

The <main> element is used to encapsulate the dominant content of the <body> of a document. This content should be unique to the document and not include any content that is repeated across documents such as sidebars, navigation links, or footers.

Here is how you might use the <main> tag:

Implementing the <footer> Element

The <footer> element represents the footer for its nearest sectioning content or sectioning root element. It typically contains information about the author of the section, copyright data, or links related to the document.

Here's an example of a <footer>:

Conclusion

Using semantic elements like <header>, <main>, and <footer> not only improves the accessibility of your web pages but also enhances SEO by providing clear structure and meaning to your content. Implementing these elements ensures that both users and search engines can navigate and understand your website more effectively.

Examples

Next
Responsive Image