DEV Community

Dhananjay Warade
Dhananjay Warade

Posted on • Updated on

Important HTML Properties You Must Know

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 instead)

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

<i> </i> : Creates italicized text (should use 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

Top comments (0)