Week Two | Part One: How HTML Works

HTML Display Characteristics

HTML elements (words, pictures, etc.) are written into your Web page code in four different ways:

• In blocks (one element follows the next top-to-bottom).
• In a line (one element follows the next left-to-right.)
• In a list (like this one).
• Not at all (shows in your code, but not in your browser).

Elements that are displayed in blocks are known as block-level elements. Many (but not all) HTML elements are, by default, block-level elements. Allow me to illustrate:

This is my Heading

Here I'll use a paragraph tag and tell you something interesting about my dog Snuffy. Snuffy isn't a real dog. He's an imaginary dog ... and he is my very best friend!

Maybe you would like to see a picture of him:

Now, examine my example at the code level:

1.   <h2>This is my Heading</h2>
<!-- This tag creates a block. -->
2.
3.   <p>Here I'll use a paragraph tag and tell
     you something interesting about my dog Snuffy.
     Snuffy isn't a <em>real</em> dog.
     He's an imaginary dog ... and he is my very best friend!</p> 
<!-- Line 3 is a block. -->
4.
5.   <p>Maybe you would like to see a picture of him:</p>
<!-- So is line 5.-->
6.
7.   <br />
<!-- A line break creates a block. -->
8.
9.   <img src="../images/snuffy.jpg" width="150px" height="150px" alt="" /> 
<!-- As do images. -->
10.
11.  <a href="mailto:snuffy@bigplum.com" title="Email link">Email Snuffy.</a>
<!-- But hyperlinks normally don't ...
that's why it appears to the right of the picture. -->

HTML presents many elements (or tags) in blocks. One block follows the next block in sequence from the top of the page to the bottom.

HTML tags like those used in my example create these blocks. Each tag forces the next tag to sit underneath it just like a child's set of building blocks.

Learning how to manipulate block-level elements is at the heart of learning CSS.

Go to Week Two - Part Two.