Home > Tutorials > HTML > Block Elements
Block Elements
So now that we know a little about the elements which describe a webpage, let's look at the elements which display the actual content in your browser window. The next few lessons focus on the basic text elements of a webpage. Let's begin by looking at block elements.
Block elements are displayed just like you would think - in blocks. When a block element is displayed on a webpage, a new line is created both before and after the block. In addition, some padding or margins are added to the elements, to make it stand out from the rest of the information on the page. The block elements are:
- <h#>
- These form headings on your webpage. The biggest heading is an <h1> tag, and the smallest is an <h6> tag. To give you an idea of what they look like...
h1 heading
h6 heading
- <p>
- Anytime you have a paragraph, designate it with the <p> tag. The <p> element is used 4 times on this page - twice above in the introduction, and twice below (for the excercise).
- <pre>
- If you haven't noticed yet, it's very hard to read source code unless there is nice tabbing and spacing. Because of this, web pages won't display extra whitespace (as it could be used to simply make the code readable). If you need the whitespace to be displayed for any reason, use the <pre> tag.
- <address>
- This is used mainly for displaying contact information for the person in charge of a given document.
- <blockquote>
- "Four score and seven years ago..."
Put really long quotes inside this tag.
Excercise: Open "MyFirstPage.html". Using what you now know, place "Hello World" in a heading, and write two paragraphs: one explaining that this is your first web page, and one explaining the significance of "Hello World" (if you don't know, try using google or wikipedia). Try to fit in another element, as well.
If your code looks like mine, you've succeeded, and can go on to another lesson.
Comment on this page:
Comments
No one has commented on this lesson yet. You can be the first!