Headings and paragraphs

Headings

HTML has six levels of heading, from <h1> (most important) to <h6> (least important):

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Headings are not about size; they describe the structure of your content, like the chapters and sections of a book:

<h1>Learn Python</h1>
  <h2>Getting started</h2>
    <h3>Installing Python</h3>
    <h3>Your first program</h3>
  <h2>Variables</h2>

Rules of thumb:

• Use one <h1> per page, for its main title.
• Don't skip levels (an <h4> straight after an <h1>).
• Never pick a heading just to make text big or bold; use CSS for looks.

Screen readers let people jump between headings, and search engines use them to understand your page.

Paragraphs

<p>This is a paragraph. Browsers add space before and after each one.</p>
<p>Extra    spaces     and
line breaks in the code     are collapsed into a single space.</p>

That second paragraph shows an important rule: HTML collapses whitespace. To force a line break inside a paragraph, use <br>:

<p>
  CodeMIRAI Street 1<br>
  Mumbai 400001<br>
  India
</p>

Horizontal rules

<hr> marks a thematic break between sections:

<p>End of the first topic.</p>
<hr>
<p>A new topic begins.</p>

Preformatted text

<pre> keeps spaces and line breaks exactly as written, in a monospace font. It's useful for code and ASCII art:

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>