The <H1>-<H6> tags in the HTML document define 6 headings that indicate different levels of importance.
HTML Heading Example
HTML Heading is defined by <h1> – <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Here is a sample code for the <h1>-<h6> tag:
<h1>This is an h1 heading. </h1>
<h2>This is an h2 heading. </h2>
<h3>This is an h3 heading. </h3>
<h4>This is an h4 heading. </h4>
<h5>This is an h5 heading. </h5>
<h6>This is an h6 heading. </h6>The heading is very important
Make sure to use the HTML Heading tags only for the title.Don’t just use Heading tags to generate bold or larger text.
The search engines use the headings to index the structure and content of your web pages.
Because users can quickly browse through your web pages with headings, so it is important to use headings to present the structure of the document.
You should use <h1> as the main heading (most important), followed by <h2> (less important), followed by <h3>, and so on.
Change the font of the HTML headings
The heading text is blod and large by default.Usually the font size is slightly different in different browsers.However, we can change the default font size of the heading text by changing the style attribute.For example:
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs
The HTML <p> element defines a paragraph:
<p>This is a paragraph </p>
<p>This is another paragraph</p>The margins of HTML <p> element
The browser can automatically set margins for the <p> element. You can also customize the margins by setting style attribute:
<p style="margin-top:16px;margin-bottom:16px">This is a custom margin paragraph</p>The output of the HTML <p> elements
You cannot change the effect of the output by adding extra spaces or blank lines in the HTML code.All consecutive spaces or blank lines are counted as one space.
The following two paragraphs show the same effect:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>Don’t forget to use the end tag
Even if you forget to use the end tag, most browsers will show the contents of the paragraph correctly:
<p>This is a paragraph that forgot to use the end tag.
<p>This is another paragraph that forgot to use the end tag.However, the W3C does not recommend this because it may cause unexpected errors.
Line breaks in HTML <p> element
Use <br> tag if you want a line break (a new line) without starting a new paragraph:
<p>This <br>paragraph<br>shows the effect of a line break</p>The HTML <pre> element
If you want to keep spaces and blank lines in the paragraph, you can use the <pre> tag, for example:
<pre>
When you are old and grey and full of sleep,
And nodding by the fire，take down this book,
And slowly read,and dream of the soft look,
Your eyes had once,and of their shadows deep.
</pre>
