Headings: HTML Web Development Tutorial Series Part 4

html headings

Headings

In this lesson, we are going to start working with some elements. You should now have a good understanding of how html works, what a tag is, and what an element is, along with empty and nested elements. We’ll begin with the heading elements. There are six default headings in html that are available to use. They range from the h1 heading (most important) to the h6 heading (least important). Headings are very important in web development. Besides providing nice headlines for your content, they are also used by search engines to index the content on your web page. Keywords and headings play a big role in search engine results. Below is an example of the six default headings in html.

index.html Example 1

Headings html

Displayed Page Example 1

HTML Headings Display

Looking at the displayed page image, you can see the h1 heading has the largest and boldest font. The font-size decreases all the way down to the h6 heading. With CSS, the size and style characteristics can be changed, but this is how the headings will display by default. The h1 and h2 headings are the two most commonly used and should be used for main headings that the viewers will skim through to find specific content on the web page. The rest of the heading elements can be used as sub headings and so on. Note: You should never use a heading element to make text larger or bolder. There are specific elements to do those jobs and more often than not are done with CSS. As we go through this tutorial series, you’ll see that HTML is used to create content for the most part, and CSS is used to style, design and position that content. We will go over some basic html elements that can be used to bold, italicize, center, align, among other things so that you know how to do it, but it is recommended that all styling and positioning be done with CSS. To learn more about CSS, CLICK HERE. See the images below for an example of the wrong way to use an html heading element.

index.html Example 2

headings wrong use html

Displayed Page Example 2

html headings display

In the above example of the wrong way to use an html heading, you can see that the browser has added some whitespace and a line break where we specified the h3 heading. This whitespace or “margin” is added by default to each of the six headings. As a side note follow up from the last lesson, NESTED ELEMENTS, the h3 element in this example is nested inside of a p element which is nested inside of the body element.

In the next lesson, we’ll learn about the p element and use it with the heading element in an exercise. I’ll see you in the next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Heading Elements</title>
</head>
<body>
<h1>This is a Heading 1 Element</h1>
<h2>This is a Heading 2 Element</h2>
<h3>This is a Heading 3 Element</h3>
<h4>This is a Heading 4 Element</h4>
<h5>This is a Heading 5 Element</h5>
<h6>This is a Heading 6 Element</h6>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: