Organize content hierarchically using heading tags (h1 to h6) and paragraph elements.
Headings form the structural framework of any written web document. In HTML, headings are defined using six tags ranging from <h1> to <h6>. These tags instruct the browser engine how to organize content visually and hierarchically.
Headings are block-level elements. They automatically begin on a new line and force surrounding elements downwards, incorporating default top and bottom margins provided by the browser's user-agent stylesheet.
| Heading Tag | Default Font Size (User-Agent) | Semantic Role & Outline Importance |
|---|---|---|
<h1> |
2.0em (32px) | Highest priority. Represents the main document title or primary page topic. |
<h2> |
1.5em (24px) | Major section title. Subdivides main topics under the primary h1. |
<h3> |
1.17em (18.72px) | Sub-section title. Groups specific sub-topics within an h2 section. |
<h4> |
1.0em (16px) | Minor sub-heading. Used for deeply detailed sub-points. |
<h5> |
0.83em (13.28px) | Low priority sub-heading. Rare in basic documents. |
<h6> |
0.67em (10.72px) | Lowest priority heading. Used for fine print sections or technical footnotes. |
<!-- Complete Heading Hierarchy Demonstration --> <h1>Main Page Title (H1)</h1> <h2>Major Chapter Section (H2)</h2> <h3>Detailed Sub-topic (H3)</h3> <h4>Specific Detail Point (H4)</h4> <h5>Minor Detail Heading (H5)</h5> <h6>Lowest Level Note Heading (H6)</h6>
A common beginner mistake is picking a heading tag based on text size (e.g., using an <h3> because an <h1> looks "too big"). In modern web development, **heading tags must be chosen strictly based on semantic meaning, not visual appearance**.
If you need an <h1> to appear smaller, keep the <h1> tag for SEO and modify its size using CSS (e.g., font-size: 1.5rem;).
<h1> per web page. The <h1> represents the subject of the entire document.<h1> directly to an <h4>. Move down sequentially (h1 → h2 → h3) to maintain a valid document tree for screen readers.<strong> if you simply want text to be bold, not a structural heading.Visually impaired users rely on screen readers (like NVDA or JAWS) that generate a searchable index based solely on headings. If heading levels are skipped or missing, screen readers present a broken navigational menu.
Textual narrative content on web pages is grouped using paragraph elements (<p>...</p>). The <p> tag is a block-level container designed to hold sentences, narrative blocks, or brief text statements.
Browsers automatically insert empty space (vertical margins) above and below every paragraph tag to separate adjacent text blocks visually. By default, browsers apply a 1em top and bottom margin to paragraphs.
<!-- Structured Paragraph Blocks --> <h2>Web Development Fundamentals</h2> <p>HTML provides the structural backbone of every page on the World Wide Web. It organizes plain text into structured elements that browsers interpret.</p> <p>CSS works alongside HTML to control styling, positioning, fonts, and responsive layouts across different device viewports.</p>
HTML provides the structural backbone of every page on the World Wide Web. It organizes plain text into structured elements that browsers interpret.
CSS works alongside HTML to control styling, positioning, fonts, and responsive layouts across different device viewports.
In real-world production websites, headings and paragraphs work together to create scannable, well-structured articles.
<!-- Realistic Article Outline -->
<article>
<h1>The Evolution of Web Browsers</h1>
<p>Web browsers have transformed from simple document viewers into full operating engines.</p>
<h2>The Early Era</h2>
<p>In the early 1990s, browsers like Mosaic rendered static text and basic image files.</p>
<h2>Modern Rendering Engines</h2>
<p>Today engines execute complex JavaScript, hardware-accelerated 3D graphics, and real-time audio.</p>
</article>
Web browsers have transformed from simple document viewers into full operating engines.
In the early 1990s, browsers like Mosaic rendered static text and basic image files.
Today engines execute complex JavaScript, hardware-accelerated 3D graphics, and real-time audio.
Create an article.html file. Write a news story that includes one <h1> main title, two <h2> section titles, four total paragraphs, and at least two <h3> sub-section headings. Verify that no heading levels are skipped.
In your article.html file, use inline CSS (style="...") to make your <h2> headings display with a custom blue color (#2563eb) and smaller font size than default. Explain why changing font size via CSS is superior to using a lower heading tag like <h4>.
Combine learnings from Lessons 01 through 09: Open your completed news story page in Google Chrome, launch DevTools, inspect the headings in the Elements Panel, run the page through the validator.w3.org outline checker tool, and verify that the document outline displays cleanly.
Answer: While HTML5 technically allows multiple <h1> tags when wrapped inside separate <section> or <article> tags, SEO best practices recommend having exactly one <h1> per page. The <h1> acts as the primary topic indicator for search engine crawlers like Googlebot.
Answer: No, according to HTML specifications, a paragraph tag (<p>) can only contain phrasing content (inline elements like <span>, <strong>, <a>). If a browser parser encounters a block-level element (like a <div> or <h2>) inside an open <p> tag, it automatically closes the paragraph prematurely, breaking the layout.
Answer: When two vertical block margins touch (such as the bottom margin of paragraph 1 and the top margin of paragraph 2), browsers collapse them into a single margin equal to the larger of the two margins, rather than adding them together.
Answer: Screen reader software provides shortcuts (such as pressing the 'H' key) allowing visually impaired users to skip directly from heading to heading, scanning page content efficiently without listening to the entire document line-by-line.
+91 7877547686
E-mailonlinecbtportal@gmail.com
Helpline Number+91 7877547686
ऐप डाउनलोड करने
के लिए Google
Play पर
उपलब्ध है
