HTML provides tags that are used to define whether pieces of text should be treated as headings, paragraphs, or comments. Headings help you to add structure to your documents and highlight key concepts. Paragraphs are used for the main body of the text. And including comments can make your code much easier to read and understand. In this topic, you'll learn more about these important tags and see how you can utilize them effectively.
Headings
HTML headings define a webpage's title and subtitles. Headings are denoted by placing pieces of text within heading tags, i.e. <h1> ... </h1>. Headings are displayed in the browser with bold formatting, and the size of the text depends on the heading level. There are six levels to choose from.
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are the six available headings types. These are ranked in descending order, so <h1> is the most important and <h6> is the least important. Headings are block-level elements, meaning they take up the whole line width. The below example demonstrates how headings are created on a webpage:
HTML:
<h1> Heading - 1 </h1>
<h2> Heading - 2 </h2>
<h3> Heading - 3 </h3>
<h4> Heading - 4 </h4>
<h5> Heading - 5 </h5>
<h6> Heading - 6 </h6>Output:
Heading tags should be used for headings or subheadings only. They should not be used to make a piece of text bolder or bigger.
The main title for the content of a webpage should be an <h1> heading. It's considered good practice to have only one <h1> element per HTML document. Taking this approach makes it easier for screen readers to recognize the document's structure, which is helpful for visually impaired users. You'll learn more about this later in the Accessibility topic.
The other major sections of your webpage's content should be headlined with <h2> tags. Subsection headings can then be enclosed in <h3> tags, and so on.
Paragraphs
Paragraphs are defined in HTML documents using the <p> tag. This important tag is used to display the bulk of the text on web pages.
You can see the paragraph tag syntax below:
<p> This is a paragraph </p>
<p> This is another paragraph </p>The browser will remove additional spaces and lines between words in a piece of text that is enclosed within <p> tags.
Let's look at an example that illustrates this effect:
HTML:
<p>
This is a paragraph.
It contains lots
of spaces,
but the browser ignores
them when rendering
the page.</p>Output:
Note that paragraphs are also block-level elements.
Comments
Comments play a vital role in programming and markup languages because they make code easier to understand. HTML comments are ignored by the browser when it renders a webpage. Let's take a look at how to write comments in HTML:
<!-- This is a comment -->Modern HTML comments begin with <!-- and end with -->, as shown above. There are three ways to write comments in HTML code:
With a single-line comment
With a multi-line comment
By using the deprecated
<comment>tag
As its name indicates, the text of a single-line comment all appears on the same line. So, if the comment you wish to add is brief enough, this is the best approach to use. But if you need to add more information, it makes sense to split it across lines with a multi-line comment.
The <comment> tag was utilized in the past to denote a comment within HTML code. However, it's now deprecated, meaning that you should not use it in your codebase.
Let's take a look at examples of these different comment types.
<body>
<!-- This is a single-line comment -->
<h1>JetBrains Academy</h1>
<!-- This is a
multi-line comment. It has the same syntax
as a single-line comment. -->
<p>Learn to program by creating working applications.</p>
<comment>This comment tag is deprecated and you should not use it.</comment>
<p>Take a project based approach to learning.</p>
</body>Output:
As you can see in the output above, the deprecated <comment> tag does not work in modern browsers, so you should avoid using it.
Conclusion
In this topic, you have learned about the different heading levels and the way headings are displayed on web pages. You've also discovered how to add paragraphs to a webpage with the <p> tag. Remember that adding comments can make your code much easier to understand. And that you can do this in HTML by putting <!-- and --> at either end of the comment.