headingsSo, we've learned how to setup the basic shell for an HTML document and add a little text. Now we can get into a little more of the formatting for our site's content. I briefly mentioned block-level elements in the previous basics post when we used the <p> tag. Specifically, a block-level element displays our content in a separate section within the page. So, basically it's just setting it off from other items or blocks. The elements we will be using today just happen to be block-level elements. You will see how they separate from other sections of content. Enough with the chit-chat let's get going.

Heading Elements!

As you can see the heading elements will make your text really stand out from the normal content. We use <h#>content</h#> to create headings - where # is a number 1 through 6. <h1> is the largest heading while <h6> is the smallest. So let's make some headings:

<html>
<head>
<title>Some Headings</title>
</head>
<body>
<p>Some placeholder text to show how block-level
 elements separate</p>
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<p>Some placeholder text to show how block-level
 elements separate</p>
</body>
</html>

My results
So, there they are - a little more diversity to your normal text. Notice how they separate from each other. There is extra room between each heading and each one starts on its own line. Which brings me to a side note:

HTML ignores white space. What's white space? It's just like it sounds - empty spaces between text, elements, tags, etc. For example, if you hold down the space bar between say the H and the e it will only read one space. So, just hitting the enter button at the end of a line does not mean it will look the same in the browser.

<html>
<head>
<title>Some Headings</title>
</head>
<body>
<p>Some                  placeholder text to show
how block-level
 elements separate</p>
<h1>h1                 Heading</h1>
<h2>h2 He         ading</h2>
<h3>h3
Heading</h3>
<p>Some placeholder
text to show how block-level
 elements separate</p>
</body>
</html>

results
Even with all those extra spaces and returns HTML only counts one of the spaces and doesn't pay attention to the line returns.

Another word on block-level elements - You are not suppose to place block-level elements inside other block-level elements. For example, <p><h1>Hello</h1></p> is not valid. Yes, it will still show up in an Internet browser but it is still not good practice and won't validate(will learn more about validation in the future).

That's it for now…

Popularity: 6% [?]

Related Post: