HTML Review

HTML elements

<element attribute="value">Content</element>
- < ... >: is an opening tag
- </ ... >: is a closing tag
- element: is the name of the element
- attribute: is a property of an element, there can be zero or more attributes associated with a tag
- value: is the value of an attribute

Semantic Markup

The purpose of HTML is to add meaning and structure to the content
HTML is not intended for presentation, that is the job of CSS
When marking up a document, choose the element that provides the most meaningful description of the content

Block and inline elements

Block elements start on new lines
Inline elements do not start a new line
Each type of element has a default value, but this can be modified with CSS

Paragraphs and Headings

<p>...</p> a paragraph
<h1>...</h1> a heading
There are six levels of headings: h1, h2, h3, h4, h5, h6
Headings should be used semantically – change the size with CSS

Unordered Lists

<ul>...</ul> an unordered list
<li>...</li> a list item

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ordered Lists

<ol>...</ol> an ordered list
<li>...</li> a list item

Example:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

Description Lists

<dl>...</dl> a list containing name and value pairs
<dt>...</dt> the name or term
<dd>...</dd> the value or description

Example:

<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>

  <dt>Term 2</dt>
  <dd>Description 2</dd>

  <dt>Term 3</dt>
  <dd>Description 3</dd>
</dl>

Elements for Organizing Page Content (HTML5)

<section>...</section> a thematic group of content
<article>...</article> a self-contained composition
<nav>...</nav> primary navigation links
<header>...</header> introductory material
<footer>...</footer> a footer

Inline Text Elements

Recommended:
- <em>...</em> stressed emphasis
- <strong>...</strong> strong importance
Not Recommended:
- <b>...</b> visual emphasis
- <i>...</i> alternate voice
- <s>...</s> incorrect text
- <u>...</u> annotated text
- <small>...</small> legal text; small print

Generic Elements

<div>...</div> generic block-level element
<span>...</span> generic inline element
Usually given a class or id attribute to indicate purpose

HTML Special Characters

Character	Named Entity	Numeric Entity
	` `
&	`&`	&
<	`<`	<
>	`>`	>

Links

<a>...</a> the anchor element (hypertext link)
Requires an href attribute indicating a URL

Example:

<a href="http://example.com">Example</a>

The href URL value can be an absolute or relative path

Images

<img> the image element
Required attributes:
- src: source URL
- alt: alternate text
Example:
```
<img src=/image.gif" alt="an image">
```
Some additional attributes:
- height: height in pixels
- width: width in pixels

Tables

<table>...</table> tabular content
<tr>...</tr> table row
<th>...</th> table header
<td>...</td> table cell data

Table Example

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  <tr>
  <tr>
    <td>Row 1 Column 1 Data</td>
    <td>Row 1 Column 2 Data</td>
    <td>Row 1 Column 3 Data</td>
  <tr>
  <tr>
    <td>Row 2 Column 1 Data</td>
    <td>Row 2 Column 2 Data</td>
    <td>Row 2 Column 3 Data</td>
  <tr>
</table>

Spanning Table Cells

Spanning is stretching a table cell to cover multiple rows or columns
Attributes for th and td:
- colspan
- rowspan
Example:

<table>
  <tr>
    <th colspan="2">Two Columns</th>
  <tr>
  <tr>
    <td>Row 1 Column 1 Data</td>
    <td>Row 1 Column 2 Data</td>
  <tr>
</table>

Forms

<form>...</form> is a container for all the content of a form
Attributes:
- action: the URL of the action page
- method: the HTTP method used to send data

Example:

<form action="/process.php method="post">
FORM ELEMENTS
</form>

Form Controls

Form controls facilitate the data submission
Example form controls
- Text entry fields
- Buttons
- Menus
The name attribute is used in form controls to provide a variable name for the server application

Text Entry

<input type="text"> a single line text entry control
<textarea>...</textarea> a multiline text entry control
<input type="password"> password text control
<input type="search"> a search line text entry control
<input type="email"> an email text entry control
<input type="tel"> a telephone number text entry control
<input type="url"> a URL text entry control

Submit and Reset Buttons

<input type="submit"> submits the form data to the server
<input type="reset"> resets the form
The value attribute can be used to change the text displayed on the buttons
Example:
```
<input type="reset" value="Start Over">
```

Radio Buttons

<input type="radio"> is a radio button
The name attribute binds multiple radio inputs into a set
Example:

<input type="radio" name="x" value="1" checked>
<input type="radio" name="x" value="2">
<input type="radio" name="x" value="3">
<input type="radio" name="x" value="4">

Checkbox Buttons

<input type="checkbox"> is a checkbox button
The name attribute with brackets sends the checkbox data as an array to PHP
Example:

<input type="checkbox" name="x[]" value="1">
<input type="checkbox" name="x[]" value="2">
<input type="checkbox" name="x[]" value="3">
<input type="checkbox" name="x[]" value="4">

Menus

<select>...</select> is a menu control
<option>...</option> is an option within a menu

Example:

<select>
  <option value="x">X</option>
  <option value="y">Y</option>
  <option value="z">Z</option>
<select>

HTML Review

HTML elements

Recommended Basic Document Structure

Semantic Markup

Block and inline elements

Paragraphs and Headings

Unordered Lists

Ordered Lists

Description Lists

Elements for Organizing Page Content (HTML5)

Inline Text Elements

Generic Elements

HTML Special Characters

Links

Images

Tables

Table Example

Spanning Table Cells

Forms

Form Controls

Text Entry

Submit and Reset Buttons

Radio Buttons

Checkbox Buttons

Menus