The HTML Element: HTML and Elements

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 6

The HTML <pre> Element

The HTML <pre> element defines preformatted text.


The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
<strong>This text is strong</strong>

HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra importance.
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.
<em>This text is emphasized</em>

HTML <small> Element


The HTML <small> element defines smaller text:

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element


The HTML <mark> element defines marked or highlighted text:

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element


<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element


The HTML <sub> element defines subscripted text.

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element


The HTML <sup> element defines superscripted text.

<p>This is <sup>superscripted</sup> text.</p>

HTML Lists
1 Unordered List:

2 Ordered List:

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
type="1" numbers 
type="A" uppercase letters
type="a" lowercase letters
type="I" uppercase roman numbers
type="i" lowercase roman numbers
Example
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Defining an HTML Table
An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<table border=”2”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

HTML Table - Cells that Span Many Columns


To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>55577854</td>

<td>55577855</td>

</tr>

</table>

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">

<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>55577854</td>

</tr>

<tr>

<td>55577855</td>
</tr>

</table>

HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag:

<table style="width:100%">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

You might also like