Headings & Rules

Headings & Ruled Lines

For our fifth website/web page we are going to expand our knowledge of HTML Headings.  We are going to learn how to add horizontal ruled lines with the <hr> tag. And finally the head element will be introduced along with some meta data to put in it.

HTML Headings

We have already used headings: eg <h1>This is a Heading</h1>

Headings are defined with the <h1> to <h6> tags where <h1> defines the most important heading and <h6> defines the least important heading.

Save the following HTML page as HeadingsTest.htm and take a look for yourself:

<!DOCTYPE html>
<html>
<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>

Note that headings vary in font size in accordance with their importance. Notice also that Browsers automatically add some white space before and after a heading.

Headings are important in HTML documents because search engines use them to index the structure and content of your web pages.

Users tend to 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.

Important: Use HTML headings for headings only. Do not use headings to simply make text BIG or bold. There are other ways to do that.

HTML Horizontal Rules <hr>

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is also used to separate content (or define a change) in an HTML page.

Save the following HTML page as TestHorizontalRules.htm and check it for yourself:

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

HTML Head Element

The HTML <head> element has nothing to do with HTML headings; the <head> element is a container for HTML metadata.

HTML metadata is data about the HTML document itself and is not displayed by the browser; metadata typically define the document title, character set, styles, links, scripts, and other meta information.

The <head> element is placed between the <html> tag and the <body> tag:

Save the following HTML page as TestHeadElement.htm and check it for yourself:

<!DOCTYPE html>
<html>

<head>
<title>My 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>

 

The HTML head element is a container for all the head elements.

The <head> element can include a title for the document, scripts, styles, meta information, and more.

The following elements can go inside the <head> element:

<title>     (this element is required in an HTML document)
<meta>
<style>
<base>
<link>
<script>
<noscript>

So let’s put our new knowledge to the test

Copy your “index04.htm” to “index05.htm” and edit as follows:

<!DOCTYPE html>

<html lang="en-US">

<head>
  <title>Minimal Website 05</title>
  <meta charset="UTF-8">
</head>

<body>

<img src="../Images/MyBanner.jpg" alt="A banner image of the Aguillon Town Hall" width="1012" height="256">

<h1>This is a Heading</h1>

<p title="This web page is called Minimal Website 05">
This page contains a head element containing a title element (Minimal Website 05) and some meta data.

The title should be displayed by your browser, possibly as a tab label
</p>

<p title="I'm a tooltip">
This is a paragraph with a tooltip. Hover your mouse here and you will see the tooltip.
</p>

<img src="../Images/MyPortrait.jpg" alt="A Picure of the author" width="104" height="104">

<p>
This is a paragraph with a ruled line underneath it
</p>
<hr>

<p>
This is a paragraph with a link to W3C <a href="https://www.w3.org/">Click Here</a>
</p>

</body>
</html>

Note: additions/edits are in bold text

Save the HTML page as “index05.htm”

View the HTML Page in Your Browser

Lets move on with more sophisticated styling and formatting in Minimal Website 06

 

Eric Pickstone