-
HTML Choosing Editors
-
HTML Basic Structure
-
HTML Head
-
HTML Element
-
HTML Attribute
-
HTML Headings
-
HTML Paragraphs
-
HTML Style
-
HTML Formatting
-
HTML Colors
-
HTML CSS
-
HTML Comments
-
HTML Links
-
HTML Images
-
HTML Table
-
HTML List
-
HTML Block and Inline
-
HTML Class & Id
-
HTML iFrames
-
HTML JavaScript
-
HTML File Paths
-
HTML Layout
-
HTML Responsive
-
HTML Style Guide
-
HTML Forms
HTML Headings: Structuring Your Content
In HTML, headings are used to organize and structure the content of a web page. They provide a hierarchical outline, with <h1> being the highest level and <h6> the lowest. Headings play a crucial role in conveying the content’s meaning and hierarchy to both human readers and search engines.
HTML Headings
HTML provides six levels of headings, from <h1> (the highest) to <h6> (the lowest).Use headings to create a structured outline for your content.
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>This is Heading 1 (H1)</h1>
<h2>This is Heading 2 (H2)</h2>
<h3>This is Heading 3 (H3)</h3>
<h4>This is Heading 4 (H4)</h4>
<h5>This is Heading 5 (H5)</h5>
<h6>This is Heading 6 (H6)</h6>
</body>
</html>
Each level of heading represents a different level of importance and hierarchy. <h1> is typically used for the main title or heading of the page, while subsequent headings indicate subsections and sub-subsections.
Semantic Meaning:
-Headings are not just about font size; they convey semantic meaning.
-<h1> represents the main heading, and subsequent levels represent subheadings.
Proper Hierarchy:
-Maintain a proper hierarchy when using headings. Start with <h1> and use subsequent levels as needed.
-Avoid skipping levels (e.g., using <h2> directly after <h4>).
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Sub-subheading 1.1</h3>
<h3>Sub-subheading 1.2</h3>
<h2>Subheading 2</h2>
</body>
</html>
In summary, HTML headings are essential for structuring content, improving accessibility, enhancing SEO, and providing a better user experience. Properly using headings ensures that your web page is well-organized and user-friendly.
- Example 1
- Example 2
- Example 3
