HTML Basics

HTML Introduction HTML Basic HTML Comments HTML Tags/Elements HTML Attributes HTML Formatting HTML Block and Inline HTML Charsets HTML Classes HTML Colors HTML Div HTML Headings HTML Id HTML Iframes HTML Images HTML File Paths HTML Tables HTML Layout HTML Lists HTML Links <a> HTML Paragraphs HTML Quotations HTML JavaScript HTML Emojis HTML URL Encode HTML Entities HTML Computercode HTML Symbols HTML Styles

HTML Forms

HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Input Regex HTML Input Form Attributes HTML Input Types

HTML SEO

HTML Head HTML Page Title HTML Responsive HTML Semantics HTML Favicon

HTML Graphics

HTML Canvas HTML SVG

HTML Media

HTML Media HTML Audio HTML Video

HTML Reference

a abbr acronym address applet area article aside audio b base basefont bdi bdo big blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl DOCTYPE dt em embed fieldset figcaption figure font footer form frame frameset h1_-_h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noframes noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script search section select small source span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr

HTML Semantics Tutorial

HTML semantics refers to the proper use of HTML tags to define the different parts of a web page and provide meaning to the content. By using semantic elements correctly, you can improve the accessibility and understandability of your website for both users and search engines.

1. Header

The <header> tag is used to define the header section of a web page. It typically contains the logo, navigation menu, and other introductory content.

<header>
    <img src="logo.png" alt="Logo">
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

2. Main Content

The <main> tag is used to define the main content of a web page. This section typically contains the main article or information that the page is focused on.

<main>
    <article>
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
</main>

3. Sidebar

The <aside> tag is used to define a sidebar section on a web page. This section typically contains additional content that is related to the main content.

<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
        <li><a href="#">Article 3</a></li>
    </ul>
</aside>

4. Footer

The <footer> tag is used to define the footer section of a web page. It typically contains copyright information, contact details, and links to other pages.

<footer>
    <p>Copyright © 2023 MyWebsite. All Rights Reserved.</p>
    <p>Contact: info@mywebsite.com</p>
</footer>

By using these semantic elements, you can structure your web page in a clearer and more organized way. This not only improves the accessibility and SEO of your website but also makes it easier for developers to understand and maintain the code.