checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

HTML5 Structural Elements

HTML5 Structural Elements

HTML5 introduced a set of new structural elements to improve the organization and semantics of web documents. These elements help web developers create more accessible and meaningful web pages. Let's explore some of these structural elements:

<header>

The <header> element represents the introductory content or a container for a set of navigational links at the beginning of a section or page. It often includes the website logo, site title, or a navigation menu.

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<nav>

The <nav> element is used to define a section of navigation links, often located within the <header> element. It contains links that allow users to navigate the website or a specific section of it.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>

The <main> element represents the main content of the document. It should be unique to each document and should not be nested within other structural elements such as <article> or <section>.

<main>
  <h1>Welcome to our Blog</h1>
  <!-- Main blog content goes here -->
</main>

<section>

The <section> element defines a thematic grouping of content within a document. It is often used to group related content, and it helps improve the document's structure and semantics.

<section>
  <h2>Introduction</h2>
  <p>This is the introduction section of the document.</p>
</section>
<section>
  <h2>Conclusion</h2>
  <p>This is the conclusion section of the document.</p>
</section>

<article>

The <article> element represents a self-contained composition within a document, such as a news article, blog post, or forum post. It should make sense on its own and be distributable independently from the rest of the page.

<article>
  <h2>How to Start Your Own Blog</h2>
  <p>Here are some steps to help you get started with your own blog.</p>
</article>

<aside>

The <aside> element is used for content that is tangentially related to the content around it. It can be used for sidebars, pull quotes, or advertising sections. However, it should not be the main content of the page.

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/related-article1">Related Article 1</a></li>
    <li><a href="/related-article2">Related Article 2</a></li>
  </ul>
</aside>

<footer>

The <footer> element represents the footer of a section or page. It typically contains information about the author, copyright notices, contact information, and links to related documents.

<footer>
  <p>&copy; 2023 MyWebsite. All rights reserved.</p>
  <p>Contact: info@mywebsite.com</p>
</footer>

These HTML5 structural elements enhance the semantics and organization of web documents, making them more accessible and easier to understand. By using these elements appropriately, you can create well-structured web pages that benefit both users and search engines.

Previous Multimedia Attributes
Next Role of Semantic Elements