HTML Tutorials

HTML - Tags : header, footer, article, section,aside,nav

HTML Semantic Tags

Introduction

HTML5 introduced several semantic tags to improve the structure and readability of web pages. These tags provide meaning to the content they wrap around.

Common Semantic Tags

<header> Tag

The <header> tag represents the introductory content of a page or section. It often contains navigation menus, logos, or headings.

Example:

My Website

Welcome to my personal blog

<footer> Tag

The <footer> tag is used for footer content of a web page or a section. It usually contains copyright information, links, or contact details.

Example:

© 2025 My Website. All Rights Reserved.

<article> Tag

The <article> tag defines independent, self-contained content such as blog posts, news articles, or forum posts.

Example:

How to Learn HTML

HTML is the foundation of web development. It structures web pages and provides content elements.

<section> Tag

The <section> tag is used to group related content within a page. Each section should have a heading.

Example:

About Us

We are a company dedicated to web development and design.

<aside> Tag

The <aside> tag represents content that is related to the main content but not essential, such as sidebars, advertisements, or related links.

Example:

<nav> Tag

The <nav> tag is used for navigation links within a website.

Example:

logo

HTML

Beginner 5 Hours

HTML Semantic Tags

Introduction

HTML5 introduced several semantic tags to improve the structure and readability of web pages. These tags provide meaning to the content they wrap around.

Common Semantic Tags

<header> Tag

The <header> tag represents the introductory content of a page or section. It often contains navigation menus, logos, or headings.

Example:

My Website

Welcome to my personal blog

<footer> Tag

The <footer> tag is used for footer content of a web page or a section. It usually contains copyright information, links, or contact details.

Example:

© 2025 My Website. All Rights Reserved.

<article> Tag

The <article> tag defines independent, self-contained content such as blog posts, news articles, or forum posts.

Example:

How to Learn HTML

HTML is the foundation of web development. It structures web pages and provides content elements.

<section> Tag

The <section> tag is used to group related content within a page. Each section should have a heading.

Example:

About Us

We are a company dedicated to web development and design.

<aside> Tag

The <aside> tag represents content that is related to the main content but not essential, such as sidebars, advertisements, or related links.

Example:

<nav> Tag

The <nav> tag is used for navigation links within a website.

Example:

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.