How to Use HTML Inline Elements

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

How to Use HTML Inline Elements

Introduction

New HTML style rules have split up elements into several categories. One essential distinction is between "block" and "inline" (also called text-level) elements. The distinctive feature of the inline element is that it shares space with other elements, possibly on the same line. Block elements, on the other hand, take up their own lines within the page. Using an inline HTML element requires knowing where you want to put the element on the page and how to code it so that it appears in the right location.

Instructions

Difficulty: Moderately Challenging

Steps

1

Step One

Look over HTML element lists to see if an element is an inline element. Lists are available on coding webpages, showing the difference between a "head" element that would not be inline and other small elements that usually share space.
2

Step Two

Find where you want your inline element to appear on the page.
3

Step Three

Code your element into the page code, in between the 2 elements that would be adjacent to it. For example, if your element is a "widget" (small graphic or animation) that goes in between, say, a link and a piece of text, your code would be arranged something like this: (link tags and text) - (widget tags) - (text).
4

Step Four

Do a quick page view to see if your inline element shows up the way you wanted it to.
5

Step Five

If the page doesn't look quite right, go back and tweak the code until you get what you want. One way to adjust inline elements is with ALIGN tag commands like ALIGN CENTER or ALIGN RIGHT. Working these alignment tags into each element's code can get really confusing. Be sure you keep the tags untangled and have a clear picture of how your code will set up your page the way you want it.

Tips & Warnings

  • HTML has gained a generic element to represent an inline element. This is sometimes used to "class" elements where the user adds properties to "blank" elements. The SPAN tag can be used to indicate a generic inline element. Think of it as a "container" that appropriates space for something that you will create.
Tools: |