HTML Block Elements
HTML Tag elements can be classified into two broad categories namely block level elements and inline elements.
HTML Block Tag Elements
HTML block level tag elements have a predefined margin before and after it. Content enclosed by block level elements do not follow its previous element on the same line, but takes its own line. Similarly content that follows them appears on a new line. Following are some of the block level elements.
<p>- paragraph tag<h1>, <h2>to<h6>- heading tags<ul>, <ol>, <dl>- list tags<pre>- pre tag<hr>- horizontal separator line
Inline Tag Elements
Inline tag elements are opposite to the block level tag elements. Inline tags appear in sequence on the same line of display. Following are some of the example of inline tag elements.
<strong>, <b>, <i>, <u>, <big>, <small>- formatting tags<em>, <cite>, <sup>, <sub>- formatting super and subscript tags<ins>, <del>- formatting tags<code>, <kbd>, <var>- code, keyboard input, variable tags.
HTML Group Elements
HTML tags can be grouped to create a layout and format it using CSS styles. We can do the grouping using <div> and <span> tags.
HTML Div Tag
<div> tag defines a division / section in a HTML document. Block level elements can be grouped by <div> tag and formatted using CSS.
<div style="color:#00FF00">
<h3>First Group: </h3>
<p>This is a paragraph 1.</p>
<p>This is a paragraph 2.</p>
</div>
<div style="color:#FF0000">
<h3>Second Group: </h3>
<p>This is a paragraph 3.</p>
<p>This is a paragraph 4.</p>
</div>
Example Output
First Group:
This is a paragraph 1.
This is a paragraph 2.
Second Group:
This is a paragraph 3.
This is a paragraph 4.
Three block level elements are grouped together and style is applied using div tag. We can create efficient HTML layouts using the div tag.
HTML Span Tag
<span> tag can be used to group inline tag elements. This does not create any division or sections. This just creating a group to apply CSS styles.
<p>Lion is a <span style="color:#0000FF"><strong>wild</strong> <u>animal</u></span>.</p>
Example Output
Lion is a wild animal.
In the above Span tag example, we have grouped couple of inline tags and applied a CSS style.
