Important HTML Properties You Must Know
Tags: beginners, html, webdev, 100daysofcode
Published: 2022-02-14 07:29:05

**HTML** Stands for _HyperText Markup Language_.

HTML is the foundation of all websites.

HTML describes the structure of a Web page.


## **Basic Tags**

`<html> </html>`  : Creates an HTML document

`<head> </head>`  : Sets off the title & other info that isn't displayed

`<body> </body>`  : Sets off the visible portion of the document

`<title> </title>`: Puts the name of the document in the title bar; when bookmarking pages, this is what is bookmarked

## **Body attributes**

`<body bgcolor=?>` : Sets background color, using name or hex value

`<body text=?>` : Sets text color, using name or hex value

`<body link=?>` : Sets the color of links, using the name or hex value

`<body vlink=?>`: Sets the color of visited links, using the name or hex value

`<body alink=?>`: Sets color of active links (while mouse-clicking)

## **Text Tags**

`<pre> </pre>` : Creates preformatted text

`<h1> </h1> --> <h6> </h6>` : Creates headlines -- H1=largest, H6=smallest

`<b> </b>` : Creates **bold** text (should use <strong> instead)

`<strong> </strong>`: Emphasizes a word (usually processed in **bold**)

`<i> </i>` : Creates **italicized** text (should use <em> instead)

`<em> </em>`: Emphasizes a word (usually processed in **italics**)

`<font size=?> </font>` : Sets size of font - 1 to 7 (should use CSS instead)

`<font color=?> </font>`: Sets font color (should use CSS instead)

`<font face=?> </font>` : Defines the font used (should use CSS instead)

## **Formatting**

`<p> </p>` : Creates a new paragraph

`<br>`: Inserts a line break **(Self Closing Tag)**

`<blockquote> </blockquote>` : Puts content in a quote - indents text from both sides

`<div> </div>` : Used to format block content with CSS

`<span> </span>`: Used to format inline content with CSS

## **Links**

`<a href="URL">clickable text</a>` : Creates a hyperlink to a Uniform Resource Locator

`<a href="mailto:EMAIL_ADDRESS">clickable text</a>` : Creates a hyperlink to an email address

`<a name="NAME">` : Creates a target location within a document

`<a href="#NAME">clickable text</a>` : Creates a link to that target location

## **Graphical elements**

`<hr>` : Inserts a horizontal rule

`<hr size=?>` : Sets size (height) of horizontal rule

`<hr width=?>` : Sets width of rule (as a % or absolute pixel length)

`<hr noshade>` : Creates a horizontal rule without a shadow

`<img src="URL" />` : Adds image; it is a separate file located at the URL

`<img src="URL" align=?>` : Aligns image left/right/center/bottom/top/middle (use CSS)

`<img src="URL" border=?>` : Sets size of border surrounding image (use CSS)

`<img src="URL" height=?>` : Sets height of image, in pixels

`<img src="URL" width=?>` : Sets width of image, in pixels

`<img src="URL" alt=?>` : Sets the alternate text for browsers that can't process images (required by the ADA)

## **Lists**

**Unordered list** :

- An

- Unordered 

- list

`<ul> </ul>` : Creates an unordered list

**Ordered List** :

1. An
2. Ordered
3. List

`<ol start=?> </ol>`: Creates an ordered list (start=xx,
where xx is a counting number)

`<li> </li>` : Encompasses each list item

`<dl> </dl>` : Creates a definition list

`<dt>` : Precedes each defintion term

`<dd>` : Precedes each defintion


## **Forms**

`<form> </form>` : Defines a form

`<select multiple name=? size=?> </select>` : Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.

`<select name=?> </select>` : Creates a pulldown menu

`<option>` : Sets off each menu item

`<textarea name=? cols="x" rows="y"></textarea>`: Creates a text box area. Columns set the width;rows set the height.

`<input type="checkbox" name=? value=?>` : Creates a checkbox.

`<input type="checkbox" name=? value=? checked>`: Creates a checkbox which is pre-checked.

`<input type="radio" name=? value=?>` : Creates a radio button.

`<input type="radio" name=? value=? checked>` : Creates a radio button which is pre-checked.

`<input type="text" name=? size=?>` : Creates a one-line text area. Size sets length, in characters.

`<input type="submit" value=?>`: Creates a submit button. Value sets the text in the submit button.

`<input type="image" name=? src=? border=? alt=?>` : Creates a submit button using an image. 

`<input type="reset"> `: Creates a reset button

## **Tables**

use only for data layout - use CSS for page layout

`<table> </table>` : Creates a table

`<th> </th>`: Sets off the table header (a normal cell with bold,
centered text)

`<tr> </tr>`: Sets off each row in a table

`<td> </td>`: Sets off each cell in a row


## **Table attributes**
 (only use for email newsletters)

`<table border=?>`: Sets the width of the border around table cells

`<table cellspacing=?>`: Sets amount of space between table cells

`<table cellpadding=?>`: Sets amount of space between a cell's border and its contents

`<table width=?>` : Sets width of the table in pixels or as a percentage

`<tr align=?>`: Sets alignment for cells within the row
(left/center/right)

`<td align=?>`: Sets alignment for cells (left/center/right)

`<tr valign=?>`: Sets vertical alignment for cells within the row
(top/middle/bottom)

`<td valign=?>`: Sets vertical alignment for cell (top/middle/bottom)

`<td rowspan=?>`: Sets the number of rows a cell should span (default=1)

`<td colspan=?>`: Sets the number of columns a cell should span

`<td nowrap>`: Prevents lines within a cell from being broken to fit


## **HTML5 input tag attributes**

`<input type="email" name=?> `: Sets a single-line textbox for email addresses 

`<input type="url" name=?> ` : Sets a single-line textbox for URLs 

`<input type="number" name=?>` : Sets a single-line textbox for a number 

`<input type="range" name=?> `: Sets a single-line text box for a range of numbers 

`<input type="date/month/week/time" name=?>` : Sets a single-line 
text box with a calendar showing the date/month/week/time 

`<input type="search" name=?> `: Sets a single-line text box for searching 

`<input type="color" name=?> `: Sets a single-line text box for picking a color