How to Use HTML Block Elements

Posted by Anonymous , 9/5/2007 Tags:UseHTMLBlockElements
Post By :
Anonymous
Rate:
Vote

How to Use HTML Block Elements

Introduction

To clarify certain style issues, new HTML code includes category labels for elements. Elements will either be "block" elements or "inline" (also called text-level) elements. There are also some elements that have attributes of both. The nature of a block-level element is that it takes up an entire line. Its format is different than an inline element in that a block element can't share space with another element.

Instructions

Difficulty: Moderate

Steps

1

Step One

Reserve an entire line or lines in your page for your block element. On your paper mark-up, if you have one, draw a line where you want your block element to be.
2

Step Two

Code your block element into the page.
3

Step Three

Make sure your block element has its opening and closing tags. The tags are the element name surrounded by brackets. These tags are necessary for your element to function; without them, it either won't show up or it will show up in erroneous ways.
4

Step Four

Do a page view to see if your block element loaded correctly. If it did, the block element will be in between other parts of the page, there will be stuff above it and stuff below it.
5

Step Five

Adjust your code as necessary until the page looks the way you want it to.

Tips & Warnings

  • Use the DIV element for generic block-level elements. The DIV tags mark a block-level element in HTML but don't include other information. Designers tutorials show that you can use the DIV as part of "classing" elements, that is, if you want a certain piece of text to show up on its own line, tag it is DIV.
  • Keep in mind that block elements can contain other elements. The block element label is essentially to show that the element has its own space. Things can easily get over-complicated. You may want to map out how elements "share" or "contain" other elements just to make it clear to yourself.
Tools: |