# 2 Block Level Tags

Block Level HTML Tags insert a line break before and after itself

TAGS: Cyber Tech, HTML, Standards, TECH

!-- (HTML comment) | !DOCTYPE | a | abbr | acronym | address | applet | area | b | base | basefont | bdo | big | blockquote | body | br | button | caption | center | cite | code | col | colgroup | dd | del | dfn | dir | div | dl | dt | em | fieldset | font | form | frame | frameset | h1 | h2 | h3 | h4 | h5 | h6 | head | hr | html | i | iframe | img | input | ins | isindex | kbd | label | legend | li | link | map | menu | meta | noframes | noscript | object | ol | optgroup | option | p | param | pre | q | s | samp | script | select | small | span | strike | strong | style | sub | sup | table | tbody | td | textarea | tfoot | th | thead | title | tr | tt | u | ul | var

Block Level Tags insert a line break before and after itself. There are 37 Block Level Tags in four sub-groups:

1. Basic Block Level Tags
2. blockquote. Long quotation.
3. center. XX. LD. Shorthand for <div align="center">.
4. div. Generic language/style container.
11. hr. EE. Horizontal rule.
12. isindex. /FF. EE. XX. LD. Single line prompt. SL BL!
13. p. /OO. Paragraph.
14. pre. Preformatted text.
2. List Tags
1. dd. /OO. Definition description.
2. dir. XX. LD. Directory list.
3. dl. Definition list.
4. dt. /OO. Definition term.
5. li. /OO. List item.
7. ol. Ordered list.
8. ul. Unordered list.
3. Form Tags
1. fieldset. Form control group.
2. form. Interactive form.
3. legend. Fieldset legend.
4. optgroup. Option group.
5. option. /OO. Selectable choice.
4. Table Tags
1. caption. Table caption.
2. col. /FF. EE. Table column.
3. colgroup. /OO. Table group.
4. table.
5. tbody. OO/OO. Table body.
6. td. /OO. Table cell data.
7. tfoot. /OO. Table footer.
8. th. /OO. Table header cell.
10. tr. /OO. Table row.

## Basic Block Level Tags

Basic Block Level tags cannot be part of or contain other Block Level Tags. There are 14 tags in the Basic Block Level Tags sub-group of the Block Level Tags group.

Info on author. Automatic processes may extract contact information on the author of the page. Browsers and processes may format in a particular fashion.

<address>
John@Smith.com<br>
123 Main St.<br>
Pleasantville, NY

John@Smith.com
123 Main St.
Pleasantville, NY

### blockquote

Long quotation.  Browsers and processes may format in a particular fashion. While blockquote is block level, cite is text level.

<blockquote>
We carry adolescence around in our bodies all our lives.
We get through the Car Crash Age alive and cruise through
our early twenties as cool dudes, wily, dashing, winsome...
shooting baskets, the breeze, the moon, and then we try to
become caring men, good husbands, great fathers, good citizens.
<cite>-Garrison Keiller, Public Radio host & author for the New Yorker</cite>
</blockquote>

We carry adolescence around in our bodies all our lives. We get through the Car Crash Age alive and cruise through our early twenties as cool dudes, wily, dashing, winsome...shooting baskets, the breeze, the moon, and then we try to become caring men, good husbands, great fathers, good citizens. -Garrison Keiller, Public Radio host & author for the New Yorker

### center

XX. LD. Shorthand for <div align="center">. Use the <div> variation instead.

<center>Center me!</center>

Center me!

### div

Generic language/style container. <div> cannot be used in a block element such as a <p> element; in such a situation, use <span> instead.

<p>Different styles could be applied to this division</p>
<div class="BlueMe">
<p>which</p>
<p>contains</p>
<p>multiple</p>
</div>
<p>paragraphs</p>


Different styles could be applied to this division

which

contains

multiple

paragraphs

### h1

Heading, largest. The <h1> heading is the largest, uppermost, most important, etc. The headings are used to structure information. See the example given at the <h6> tag.

### h2

Heading. See the example given at the <h6> tag.

### h3

Heading. See the example given at the <h6> tag.

### h4

Heading. See the example given at the <h6> tag.

### h5

Heading. See the example given at the <h6> tag.

### h6

Note that the results of the example shown will be affected by the CSS styles that I've applied to this page.

<h1>Biggest Dog</h1>
<h2>Bigger Dog</h2>
<h3>Big Dog</h3>
<h4>Small Dog</h4>
<h5>Smaller Dog</h5>
<h6>Smallest Dog</h6>


# Biggest Dog

## Bigger Dog

### hr

EE. Horizontal rule.

The attributes of the <hr /> are deprecated in favor of CSS.
<hr align="center" size="5" width="25%" />


The attributes of the <hr /> are deprecated in favor of CSS.

### isindex

/FF. EE. XX. LD. Single line prompt. SL BL! The <isindex> tag creates a primitive form and a <input> tag should be used instead. The can also be placed in the Header Tags sub-group of the Structural Level Tags group, where it has a different effect.

<isindex prompt="Ignore this sample of isindex:" />


### p

/OO. Paragraph.

<p>The paragraph tag is very basic.</p>


The paragraph tag is very basic.

### pre

Preformatted text. The <pre> tag cannot contain the <img>, <object>, <big>, <small>, <sub>, or <sup> tags. This is used especially for text files that use the specific numbers of spaces and characters to line things up.

<pre>
ColA    ColB    ColC
The     quick   brown
fox     jumped  over
the     lazy    dogs.
</pre>

ColA   ColB    ColC
The    quick   brown
fox    jumped  over
the    lazy    dogs.


## List Tags

List Tags can be part of or contain other Block Level Tags. Lists can also be nested.  There are 8 tags in the List Tags sub-group of the Block Level Tags group.

The three major lists are: ordered (<ol>), unordered (<ul>), and definition (<dl>). Two other types of lists are deprecated: directory (<dir>) and <menu>. The lists consist of list items (<li>s) except for definitions lists, which consist of definition terms (<dt>) and definition descriptions (<dd>).

### dd

/OO. Definition description. See the example given at <dl>.

### dir

XX. LD. Directory list. Use <ul> instead. Originally used to list files. Must contain at least one <li>.

<dir>
<li>program.exe</li>
<li>foobar.dll</li>
</dir>

• program.exe
• foobar.dll
• ### dl

Definition list. Must contain at least one <dd> or <dd> element.

<dl>
<dd>Just a definition description.</dd>
<dt>A</dt>
<dd>The first letter.</dd>
<dt>B</dt>
<dd><p>Multiple block elements</p>
<p>can be entered.</p></dd>
<dt>C</dt>
<dd>The third letter</dd>
<dt>Just a definition term.</dt>
</dl>

Just a definition description.
A
The first letter.
B

Multiple block elements

can be entered.

C
The third letter
Just a definition term.

### dt

/OO. Definition term. See the example given at <dl>.

### li

/OO. List item. Used by <dir>, <menu>, <ol>, and <ul>, but not <dl>.

The TYPE attribute sets the numbering style (1 , a, A, i, I) in ordered lists and the bullet style (disc, square, circle) in unordered lists.  The type attribute is hypothetically deprecated in favor of the CSS list-style-type attribute.

The VALUE attribute sets the list item number starting with the given list item.

<ul>
<li type="circle">three</li>
<li type="disc">bullets</li>
<li type="square">shown</li>
</ul>

• three
• bullets
• shown

XX. LD. Menu list. Use <ul> instead. Must contain at least one <li>.

<menu>
<li>New</li>
<li>Open</li>
<li>Exit</li>

• New
• Open
• Exit
• ### ol

Ordered list. Must contain at least one <li>.

The START attribute provides an integer denoting the value of the first <li>.

<ol>
<li>First</li>
<li>Second
<ol>
<li type="a">Sub</li>
</ol>
</li>
<li>Third</li>
</ol>

1. First
2. Second
1. Sub
3. Third

### ul

Unordered list. Must contain at least one <li>.

<ul>
<li>The</li>
<li>browser</li>
<li>usually
<ul>
<li>changes
<ul>
<li>bullets</li>
</ul>
</li>
</ul>
</li>
<li>automatically.</li>
</ul>

• The
• browser
• usually
• changes
• bullets
• automatically.

## Form Tags

Form Tags can be part of, or contain other Block Level Tags. Form Tags create an interface for users to enter data and select options. See also the <button>, <input>, <label>, <select>, and <textarea> tags grouped with Text Level Tags, sub-group Form Control Text Tags. There are 5 tags in the Form Tags sub-group of the Block Level Tags group. See also EG Handling Forms.

### fieldset

Form control group. Used to thematically arrange form controls and labels. Each <fiedlset> may have a caption enclosed in a <legend> tag.

<form>
<fieldset>
<legend>Customer Info</legend>
<!-- Various controls related to "Customer Info" here. / -->
</fieldset>
<fieldset>
<legend>Car Info</legend>
<!-- Various controls related to "Car Info" here. / --></fieldset>
</form>


### form

Interactive form. The <form> tag cannot contain other <form> tags but it can contain form controls (<button>, <input>, <select>, and custom <object> tags) and most other HTML tags such as paragraphs and lists, and especially for the purposes of laying out the format of the form.

The ACTION attribute specifies a form processing agent (program identified via an HTTP URL) to handle the completed and submitted form.

The METHOD attribute is either get (the default) or post . The METHOD attribute identifies the HTTP method used to submit the form data. "get" uses a "?" to append the form data to the URL specified in the ACTION attribute. "post" includes the form data in the body of the form and submits the form. Note that although "get" is limited to ASCII character, it is the preferred method.

The ENCTYPE attribute specifies the Internet type (MIME or Internet media type) of the document submitted via "post". The default value is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file", i.e. this sends the entire file indicated as opposed to just the file name in the INPUT element. Note that in this last case, form variables cannot be accessed via the ASP Request.Form collection.

<form action="http://nosuchsite.com/prog/adduser" method="post">
<p>
<label for="firstname">First name: </label>
<input type="text" id="firstname"><br/>
<label for="lastname">Last name: </label>
<input type="text" id="lastname"><br/>
<label for="email">email: </label>
<input type="text" id="email"><br/>
<input type="submit" value="Send"> <input type="reset">
</p>
</form>


Male
Female

### legend

Fieldset legend. The caption for a <fieldset> tag. Most web developers avoid <legend> for greater control of the display.

The ACCESSKEY attribute applies.

The ALIGN attribute has these possible values: top (the default), bottom, left, and right. The ALIGN attribute is deprecated.

<form>
<fieldset>
<legend>Customer Info</legend>
...Various controls related to "Customer Info"</fieldset>
<fieldset>
<legend>Car Info</legend>
...Various controls related to "Car Info"</fieldset>
</form>


### optgroup

Option group. Groups <option> tags together logically within a <select> tag.

The LABEL attribute is used by some browsers to show the LABEL attribute of the <optgroup> in the menu; those <optgroup> may then be expanded by the user to show the <options>. HTML 4.01 does not allow <optgroup> tags to be nested but that may come in a later version.

The DISABLED attribute applies, i.e. options can be shown but cannot be selected.

<select name="SelectForOPTGROUP">
<option selected label="none" value="none">None</option>
<optgroup label="Oranges">
<option label="Tangerine" value="OTXTa" disabled>Tenessee Tangerine</option>
<option label="Tangelo" value="OTNTo">Tennessee Tangelo</option>
</optgroup>
<optgroup label="Apples">
<option label="Mac" value="AWAMa">Washington Macintosh</option>
<option label="Gala" value="AORGa">Oregon Gala</option>
</optgroup>
<optgroup label="Banana">
<option label="Plantain" value="BCUPl">Cuban Plantain</option>
<option label="Mini" value="BPHMi">Philippine Mini-Banana</option>
</optgroup>
</select>

### option

/OO. Selectable choice. An item to in a menu created by a <select> tag. The <option> tag is enclosed by a <select> tag.

The LABEL attribute is a label that may be shown instead of the contents of the <option> tag.

The SELECTED attribute indicates a selected option. The last item marked as selected is selected.

The VALUE attribute is the value submitted if the option is selected.

The DISABLED attribute applies, i.e. options can be shown but cannot be selected.

<select name="SelectForOPTION">
<option selected label="none" value="none">None</option>
<option label="Tangerine" value="OTXTa">Tenessee Tangerine</option>
<option label="Tangelo" value="OTNTo" disabled>Tennessee Tangelo</option>
<option label="Mac" value="AWAMa">Washington Macintosh</option>
<option label="Gala" value="AORGa">Oregon Gala</option>
<option label="Plantain" value="BCUPl">Cuban Plantain</option>
<option label="Mini" value="BPHMi" selected>Philippine Mini-Banana</option>
</select>


## Table Tags

Table Tags display data in tabular format. The use of tables to layout pages has been deprecated since CSS is so much more powerful. There are 10 tags in the Table Tags sub-group of the Block Level Tags group.

A <table> can have a <caption>. The rows (<tr>) may be divided into a header (<thead>), a footer (<tfoot>), and a body (<tbody>). The columns (<col>) may be grouped into groups (<colgroup>). Each cell in the table may contain either a header info (<th>) or data info (<td>).

### caption

Table caption. A brief description of the table. Each table may only have one <caption> tag and it must immediately follow the <table> start tag. A longer description may be specified by the SUMMARY attribute of the TABLE tag.

<table border="1" width="70%">
<caption>A Simple Table</caption>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>


### col

/FF. EE. Table column. A tag used to assign attributes to columns. The <col> tag may or may not be enclosed by a <colgroup> tag.

EGs: See the <colgroup> tag.

### colgroup

/OO. Table group. The <colgroup> tag explicitly structurally groups tags and can be used for assigning attributes to columns whereas the <col> tag is used only for the latter. A table without either a <col> or <colgroup> tag is considered to be a single implicit column group.

The <col> and <colgroup> tags have the same set of attributes but the attributes of a <col> tag enclosed by a <colgroup> tag take precedence.

The SPAN attribute specifies a positive integer number of columns spanned by the tag. If this is not specified, then the default value is "1". The number of columns calculated when using <col> and/or <colgroup> tags is calculated by summing the SPAN attributes of each <col> tag and each empty <colgroup> tag. The number of columns calculated when using <col> and/or <colgroup> tags should be the same as the maximum number of columns required by any row in the table.

The WIDTH attribute specifies the width of each column contained by the tag. The possible values can be in pixels (eg "10"), percentage (eg "10%"), or relative value (eg "0*", "*", "1*", "3*"). Note that "*" and "1*" are the same. Note also that "0*" indicates the minimum width required to hold its contents.

Other important attributes are the same as for <tbody>.

<table width="100">
<colgroup span="4" width="25"></colgroup>
<tr><td><td><td><td>
...rows...
</table>

<table width="100">
<colgroup>
<col width="1*"/>
<col span="2" width="80"/>
<col width="*"/>
</colgroup>
<tr><td><td><td><td>
...rows...
</table>

<table width="100">
<col align="char" char=":"/>
<colgroup></colgroup>
<colgroup span="3">
<tr><td><td><td><td>
...rows...
</table>

<table width="100">
<tr><td><td><td><td>
...rows...
</table>


### table

BL. Arranges data into rows and columns.

The SUMMARY attribute summarizes the tables purpose, content, and structure. Non-visual browsers render the summary into speech or Braille. A briefer description can be specified by the <caption> tag

The ALIGN attribute is deprecated but specifies either left (the default), center, or right.

The WIDTH attribute specifies pixels (EG: "100") or percentage (EG: "80%"). The default is "0%".

The HEIGHT attribute specifies pixels (EG: "100") or percentage (EG: "80%"). The default is "0%". This is not part of the HTML specs but is supported by Microsoft. This is particularly useful if you have divided the table into header, body, and footer rows since the header and footer rows will always be visible but the body rows may be scrolled.

The BGCOLOR attribute specifies the background color.

The FRAME attribute specifies which of the outermost sides of the table are visible. The possible values are: void (the default), above, below, hsides, vsides, lhs, rhs, box, and border. Note that "box" and "border" are equivalent.

The RULES attribute specifies which of the inner sides of the table are visible. The possible values are: none (the default), groups (rules will show between <thead>, <tbody>, <tbody>, and <colgroup> cells), rows, cols, and all.

The BORDER attribute specifies the thickness of the outermost sides of the table in pixels. Note that a border of zero also eliminates rules. The border usually matches the color and other properties of the object containing the table.

The CELLPADDING attribute indicates the pixels between the margin and its contents. It usually matches the color and other properties of the cell.

The CELLSPACING attribute indicates the pixels between the edges of adjacent cells.

EGs: See the Example Tables.

### tbody

OO/OO. Table body. A grouping of table rows. This is required if there are two or more groupings of body rows, or if there is either a <thead> or <tfoot> present. The <tbody> tags must follow <thead> and <tfoot> tags so that the headers and footers can be rendered first. The <thead>, <tfoot>, and <tbody> tags must contain the same number of columns.

The <thead>, <tfoot>, <tbody>, <tr>, <td>, and <th> tags have these attributes, although each can be set independently:

The ALIGN attribute specifies the horizontal alignment of the cell contents. The possible values include left (the default), center, right, justify, and char.

The VALIGN attribute specifies the vertical alignment of the cell contents. The possible values include top, middle (the default), bottom, and baseline.

The CHAR attribute specifies the character to align on, when the ALIGN attribute is set to "char". the default value usually a decimal point.

<table border="1">
<tfoot>
<tr><th> ...tfoot th...</th></tr>
<tr><td> ...tfoot td...</td></tr>
<tr><td> ...tfoot td...</td></tr>
</tfoot>
<tbody>
<tr><th> ...tbody th...</th></tr>
<tr><td> ...tbody td...</td></tr>
<tr><td> ...tbody td...</td></tr>
</tbody>
<tbody>
<tr><th> ...tbody th...</th></tr>
<tr><td> ...tbody td...</td></tr>
<tr><td> ...tbody td...</td></tr>
</tbody>
</table>

...tfoot th...
...tfoot td...
...tfoot td...
...tbody th...
...tbody td...
...tbody td...
...tbody th...
...tbody td...
...tbody td...

### td

/OO. Table cell data. Table cells hold data (<td>), header info (<th>), or sometimes both (use <td> in this case).

The ROWSPAN attribute specifies the number of rows spanned by the current cell. The default value is "1". A value of "0" indicates that the cell spans from the current row to the last row of the table or the row grouping (<thead>, <tfoot>, or <tbody>).

The COLSPAN attribute specifies the number of columns spanned by the current cell. The default value is "1". A value of "0" indicates that the cell spans from the current column to the last column of the table or the column grouping (<colgroup>).

The NOWRAP attribute indicates that the browser should not automatically wrap the text, but instead make the cell wide enough to fit the data. This attribute is deprecated —Use CSS instead:white-space:normal.

The WIDTH and HEIGHT attributes specify the cell width and height respectively. This attribute is deprecated.

The ABBR attribute specifies a brief description of the cell content. Some browsers may speak out the <abbr>  before rendering the cell content.

The SCOPE attribute specifies the cells for which the current cell provides header info for. Some browsers may speak out the header info  before rendering the cell content. The SCOPE attribute  can only have the following values: row, col, rowgroup, colgroup.

The HEADERS attribute can be used in place of the SCOPE attribute for more complicated situations. The HEADERS attribute specifies a space-separated list of cell names that it covers. Each cell specified must have its ID attribute set.

The AXIS attribute specifies a comma-separated list of category names. The current cell may be considered to be a member of conceptual categories for the purpose of querying the table for information.

<table border="1" width="100%" cellpadding="2">
<tr>
<td width="34%" rowspan="2">rowspan=&quot;2&quot;</td>
<td width="66%" colspan="2">colspan=&quot;2&quot;</td>
</tr>
<tr>
<td width="33%" rowspan="2">rowspan=&quot;2&quot;</td>
<td width="33%">x</td>
</tr>
<tr>
<td width="67%" colspan="2">colspan=&quot;2&quot;</td>
</tr>
</table>
 colspan="2" rowspan="2" rowspan="2" x colspan="2"

<table border="1" width="70%" cellpadding="2">
<tr>
<td width="33%" id="a1">a1</td>
<th width="33%" scope="col">b1</th>
<td width="34%">c1</td>
</tr>
<tr>
<td width="33%">a2</td>
<td width="33%" >b2</th>
<td width="34%">c2</td>
</tr>
<tr>
<td width="33%">a3</td>
<td width="33%">b3</td>
</tr>
</table>

 b1 a1 c1 b2 b2 b2 c3 c3 c3

### tfoot

/OO. Table footer. Contains footer rows that always show, especially if the body is scrolled on screen or if the body prints out across multiple pages.

For attributes and an example, see <tbody>.

### th

/OO. Table header cell. Table cells hold data (<td>), header info (<th>), or sometimes both (use <td> in this case).

For attributes and an example, see <td>.

/OO. Table header. Contains header rows that always show, especially if the body is scrolled on screen or if the body prints out across multiple pages.

For attributes and an example, see <tbody>.

### tr

/OO. Table row. A table row consists of <td> and <th> cells.

For attributes and an example, see <tbody>.

GeorgeHernandez.comSome rights reserved