HTML Headings
Headings in HTML are defined with the <h1> to <h6> tags.
- <h1> is the most important (largest and highest hierarchy).
- <h6> is the least important (smallest).
🔑 Key Point: Headings are crucial for SEO and accessibility. Use them in order for proper document structure, not just for styling. You should only use one <h1> per page.
The general structure of the headings looks like this:
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
HTML Paragraphs
Paragraphs are defined with the <p> tag.
The <p> tag automatically creates a new line and adds some vertical space (margin) above and below the paragraph content, separating it from other elements.
Example:
<p>This is my first paragraph.</p>
<p>This is my second paragraph. It automatically starts on a new line.</p>
Extra Information: The Importance of Structure
Using headings and paragraphs correctly gives your document a logical structure.
| Element | Purpose | Benefit |
|---|---|---|
| <h1>-<h6> | Outlining the document's main topics and sub-sections. | Accessibility (screen readers), SEO (search engines), and document hierarchy. |
| <p> | Grouping related sentences into blocks of text. | Readability and clear separation of text content. |