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

Headings (<h1> to <h6>)

Headings (h1 to h6)

Headings in HTML, denoted by the <h1> to <h6> elements, are used to define the structure and hierarchy of content on a web page. They play a vital role in organizing and presenting information in a clear and hierarchical manner. Let's explore the various heading elements:

<h1>

The <h1> element represents the highest level of heading and is typically used for the main title or heading of a web page. There should be only one <h1> per page, and it serves as the primary identifier of the page's content.

<h1>Main Title</h1>

<h2>

The <h2> element is used for subheadings that are slightly less important than the <h1>. It is used to divide the content into sections or topics within the main page.

<h2>Section Title</h2>

<h3>, <h4>, <h5>, and <h6>

The <h3>, <h4>, <h5>, and <h6> elements are used for lower-level headings, with <h6> being the least important. These headings are used to further divide content and provide a hierarchy of information. Use these elements to structure your content logically.

<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>

Semantic Structure

HTML headings are not only used for visual formatting but also play a crucial role in providing semantic structure to your web page. This structure helps search engines understand the content and provides accessibility benefits, particularly for users with screen readers.

Visual Styling

While HTML headings define the structure of the content, their visual appearance is typically controlled using CSS (Cascading Style Sheets). CSS allows you to style headings in terms of font size, color, spacing, and other visual attributes.

<!-- HTML -->
<h1>Main Title</h1>

<!-- CSS -->
<style>
  h1 {
    font-size: 24px;
    color: #333;
  }
</style>

Accessibility Considerations

When using headings, it's essential to maintain a logical and consistent hierarchy. Avoid skipping heading levels (e.g., going from <h2> to <h4> without an <h3> in between), as this can confuse both users and search engines. Additionally, make sure your headings accurately represent the content they precede.

In summary, HTML headings, from <h1> to <h6>, provide a structured way to organize content on a web page. They contribute to a page's semantics, accessibility, and visual styling. Properly using headings enhances the user experience and helps search engines understand the content's hierarchy.

Previous HTML Comments
Next Paragraphs (`<p>`)