Headings in HTML

HTML Headings

HTML Headings

  • Headings are important in HTML documents.
  • Headings are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Click here to Run the Program
Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

  • Search engines use the headings to index the structure and content of your web pages.
  • Users skim your pages by its headings. It is important to use headings to show the document structure.
  • <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Note : Use HTML headings for headings only. Don't use headings to make text BIG or bold.

HTML Horizontal Rules

  • The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
  • The <hr> element is used to separate content (or define a change) in an HTML page:
<h1>Heading 1</h1>
<p>Copy and Paste your content here.</p>
<hr>
<h2>Heading 2</h2>
<p>This is some other text. Copy and Paste your content here.</p>
<hr>   
Click here to Run the Program

The HTML Element

  • The HTML <head> element has nothing to do with HTML headings.
  • The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
  • The <head> element is placed between the <html> tag and the <body> tag :
 
<!DOCTYPE html>
<html>
<head>
  <title>W3ProfessorsMy First HTML</title>
  <meta charset="UTF-8">
</head>
<body>

<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>

</body>
</html>
 
Click here to Run the Program
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

HTML Tip - How to View HTML Source

  • Have you ever seen a Web page and wondered "Hey! How did they do that?"
  • To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.

HTML Tag Reference

  • W3Professors' tag reference contains additional information about these tags and their attributes.
  • You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content