leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML title

Estimated reading: 5 minutes 41 views

In HTML documents, headings are important.

HTML title

Heading is defined by <h1> – <h6> tags.

<h1> defines the largest heading. <h6> defines a minimal heading.

example

<h1> This is a heading. </h1>

<h2> This is a heading. </h2>

<h3> This is a heading. </h3>

Note: Browsers automatically add blank lines before and after headings.

title matters

Make sure to use HTML title tags for titles only. Don’t use headings just to generate bold or large text.

Search engines use headings to index the structure and content of your web pages.

It’s important to use headings to present the structure of your document because users can use headings to quickly navigate your web page.

You should use h1 as the main heading (most important), followed by h2 (less important), followed by h3, and so on.

HTML horizontal line

The <hr> tag creates horizontal lines in the HTML page.

The hr element can be used to separate content.

example

<p> This is a paragraph. </p>

<hr>

<p> This is a paragraph. </p>

<hr>

<p> This is a paragraph. </p>

HTML comments

Comments can be inserted into HTML code to improve its readability and make the code easier to understand. Browsers ignore comments and don’t display them.

Notes are written as follows:

example

<!– This is a comment –>

Comments: An exclamation mark ! (English punctuation mark) is required after the opening parenthesis (the left parenthesis), and is not required before the closing parenthesis (the right parenthesis). Reasonable use of comments can help future code editing work.

HTML Tips – How to View Source Code

Have you ever looked at some web pages and marveled at how it was implemented.

If you want to find the mystery, just right-click and choose “View Source” (IE) or “View Page Source” (Firefox), other browsers do the same. Doing so will open a window containing the HTML code for the page.

Examples of this site

Headings
How to display headings in HTML documents.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginners Tutorial (coding180.com)</title>
</head>
<body>
<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>
</body>
</html>


HTML heading

Hide Comments
How to insert comments in HTML source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginners Tutorial (coding180.com)</title>
</head>
<body>
<!--This is a comment, the comment will not be displayed in the browser -->
<p>This is a paragraph</p>
</body>
</html>
html hide comment

Horizontal lines
How to insert horizontal lines.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginners Tutorial(coding180.com)</title>
</head>
<body>
<p>hr tags define horizontal lines:</p>
<hr/>
<p>This is a paragraph.</p>
<hr/>
<p>This is a paragraph.</p>
<hr/>
<p>This is a paragraph.</p>
</body>
</html>
html horizontal lines

HTML Tag Reference Manual

The Beginners Tutorial Tag Reference Manual provides more information on these headers and their properties.

You will learn more about HTML tags and attributes in the following chapters of this tutorial.

LabelDescription
<html>Define HTML documents
<body>Define the body of the document
<h1> – <h6>Define HTML title
<hr>Define horizontal line
<!–…–>Define annotations, labeling (not visible to readers)

Note
The relationship between title size and font size Headings 1 to 6 correspond to Fonts 1 to 6 in reverse order, for example, “font 1” corresponds to “heading 6”, and “font 2” corresponds to “heading 5”.

<h1>This is heading 1</h1><font size="6">This is font size 6 text</font>
<h2>This is heading 2</h2><font size="5">This is font size 5 text</font>
<h3>This is heading 3</h3><font size="4">This is font size 4 text</font>
<h4>This is heading 4</h4><font size="3">This is font size 3 text</font>
<h5>This is heading number 5</h5><font size="2">This is font size 2 text</font>
<h6>This is heading number 6</h6><font size="1">This is font size 1 text</font> .

Leave a Comment

CONTENTS