Master the six levels of HTML headings, learn to write paragraphs, and understand how to organize text content on a web page.
HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings create a hierarchy that helps both users and search engines understand the structure of your page.
<h1> — Main heading. There should generally be only one per page.<h2> — Section headings under the main topic.<h3> — Subsection headings under an <h2>.<h4> through <h6> — Deeper levels of subsections.Think of headings like the outline of a book: the <h1> is the book title, <h2> tags are chapter titles, and <h3> tags are sections within chapters.
Important: Do not skip heading levels. For example, do not jump from <h1> directly to <h4>. This confuses screen readers and hurts accessibility.
<h1>The Solar System</h1>
<h2>Inner Planets</h2>
<h3>Mercury</h3>
<p>Mercury is the closest planet to the Sun.</p>
<h3>Venus</h3>
<p>Venus is the hottest planet in our solar system.</p>
<h2>Outer Planets</h2>
<h3>Jupiter</h3>
<p>Jupiter is the largest planet.</p>The <p> tag defines a paragraph of text. Browsers automatically add vertical spacing (margin) before and after each paragraph, which visually separates blocks of text.
An important concept to understand is whitespace collapsing. No matter how many spaces or line breaks you type inside a paragraph, the browser collapses them into a single space. To force a line break within a paragraph, you can use the self-closing <br> tag.
<p>This has extra spaces.</p>
<!-- Renders as: "This has extra spaces." -->
<p>First line.<br>Second line.</p>
<!-- Renders on two separate lines -->Use <br> sparingly. If you need two distinct blocks of text, use two separate <p> elements instead.
What is the correct order of heading importance?