Attributes

The most common attributes are as follows...


*
Attribute NameElementsDescription
align<applet> , <caption> , <col> ,<colgroup> ,  <hr> , <iframe><img> , <table> , <tbody> , <td> ,  <tfoot> , <th> ,<thead> , <tr>Specifies the horizontal alignment of the element.
alt Alternative text in case an image can't be displayed.
autoplay<audio> , <video>The audio or video should play as soon as possible.
bgcolor<body> , <col> , <colgroup> ,<marquee> , <table> , <tbody><tfoot> , <td> , <th> , <tr>
Background color of the element.
Note: This is a legacy attribute. Please use the CSS background-color property instead.
border<img> , <object> , <table>
The border width.
Note: This is a legacy attribute. Please use the CSS border property instead.
checked<command> , <input>Indicates whether the element should be checked on page load.
cite<blockquote> , <del> , <ins> ,<q>Contains a URI which points to the source of the quote or change.
classGlobal attributeOften used with CSS to style elements with common properties.
code<applet>Specifies the URL of the applet's class file to be loaded and executed.
color<basefont> , <font> , <hr>
This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.
Note: This is a legacy attribute. Please use the CSS color property instead.
cols<textarea>Defines the number of columns in a textarea.
colspan<td> , <th>The colspan attribute defines the number of columns a cell should span.
content<meta>A value associated with http-equiv or namedepending on the context.
dirGlobal attributeDefines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname<input> , <textarea>
disabled<button> , <command> ,<fieldset> , <input> ,<keygen> , <optgroup> ,<option> , <select> ,<textarea>Indicates whether the user can interact with the element.
form<button> , <fieldset> ,<input> , <keygen> , <label> ,<meter> , <object> , <output><progress> , <select> ,<textarea>Indicates the form that is the owner of the element.
headers<td> , <th>IDs of the <th> elements which applies to this element.
height<canvas> , <embed> , <iframe><img> , <input> , <object> ,<video>Note: In some instances, such as <div> , this is a legacy attribute, in which case the CSS height property should be used instead. In other cases, such as <canvas> , the height must be specified with this attribute.
href<a> , <area> , <base> , <link> The URL of a linked resource.
hreflang<a> , <area> , <link>Specifies the language of the linked resource.
list<input>Identifies a list of pre-defined options to suggest to the user.
loop<audio> , <bgsound> ,<marquee> , <video>Indicates whether the media should start playing from the start when it's finished.
low<meter>Indicates the upper bound of the lower range.
manifest<html>Specifies the URL of the document's cache manifest.
max<input> , <meter> ,<progress>Indicates the maximum value allowed.
maxlength<input> , <textarea>Defines the maximum number of characters allowed in the element.
media<a> , <area> , <link> ,<source> , <style>Specifies a hint of the media for which the linked resource was designed.
method<form>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min<input> , <meter>Indicates the minimum value allowed.
multiple<input> , <select>Indicates whether multiple values can be entered in an input of the type email or file.
name<button> , <form> ,<fieldset> , <iframe> ,<input> , <keygen> , <object><output> , <select> ,<textarea> , <map> , <meta> ,<param>Name of the element. For example used by the server to identify the fields in form submits.
placeholder<input> , <textarea>Provides a hint to the user of what can be entered in the field.
poster<video>A URL indicating a poster frame to show until the user plays or seeks.
rel<a> , <area> , <link>Specifies the relationship of the target object to the link object.
required<input> , <select> ,<textarea>Indicates whether this element is required to fill out or not.
reversed<ol>Indicates whether the list should be displayed in a descending order instead of a ascending.
rows<textarea>Defines the number of rows in a textarea.
rowspan<td> , <th>Defines the number of rows a table cell should span over.
selected<option>Defines a value which will be selected on page load.
size<input> , <select>Defines the width of the element (in pixels). If the element's type attribute is text orpassword then it's the number of characters.
span<col> , <colgroup>
src<audio> , <embed> , <iframe> ,<img> , <input> , <script> ,<source> , <track> , <video>The URL of the embeddable content.
styleGlobal attributeDefines CSS styles which will override styles previously set.
tabindexGlobal attributeOverrides the browser's default tab order and follows the one specified instead.
titleGlobal attributeText to be displayed in a tooltip when hovering over the element.
type<button> , <input> ,<command> , <embed> ,<object> , <script> ,<source> , <style> , <menu>Defines the type of the element.
value<button> , <option> , <input><li> , <meter> , <progress> ,<param>Defines a default value which will be displayed in the element on page load.
width<canvas> , <embed> , <iframe><img> , <input> , <object> ,<video>Note: In some instances, such as <div> , this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas> , the width must be specified with this attribute.




*thanks to Mozilla Developer Network for the attribute list

List of HTML Elements

As promised, the list of the commonly-used HTML elements are as follows...

Head Section

  • TITLE - Document title
  • ISINDEX - Primitive search
  • META - Meta-information
  • LINK - Site structure
  • BASE - Document location
  • SCRIPT - Inline script
  • STYLE - Style information
Body Section


  • H1 - Level 1 header
  • H2 - Level 2 header
  • H3 - Level 3 header
  • H4 - Level 4 header
  • H5 - Level 5 header
  • H6 - Level 6 header
  • UL - Unordered list
  • OL - Ordered list
  • DIR - Directory list
  • MENU - Menu item list
  • LI - List item
  • DL - Definition list
  • DT - Definition term
  • DD- Definition
  • P - Paragraph
  • PRE - Preformatted text
  • BLOCKQUOTE - Large quotation
  • CENTER - Centered division
  • FORM - Input form
  • HR - Horizontal rule
  • TABLE - Tables
  • EM - Emphasized text
  • STRONG - Strongly emphasized
  • CITE - Short citation
  • I - Italics
  • B - Bold
  • U - Underline
  • STRIKE - Strikeout
  • BIG - Larger text
  • SMALL - Smaller text
  • SUB - Subscript
  • SUP - Superscript
  • INPUT - Input field, button, etc.
  • SELECT - Selection list
  • OPTION - Selection list option
  • TEXTAREA - Input area
  • CAPTION - Table caption
  • TR - Table row
  • TH - Header cell
  • TD - Table cell
  • A - Anchor
  • IMG - Image
  • FONT - Font modification
  • BR - Line break


PS
  • NOT all tags above have a closing tag.
  • Remember that each element are enclosed of brackets (<>), example, <em>Emphasize</em>

HTML Formatting Tags

In order to display a bold or italic text in HTML, we use the formatting tags.

There are two types of tags:

  1. PHYSICAL tags
  2. LOGICAL tags
As Scripting Master describes the difference as follows...
physical character tag controls how the characters are formatted. For instance, you might display some characters as bold or italic. Listing 1 displays some common physical character tags. 
HTML codeOutput
This is <b>bold</b>This is bold
This is <big>big font</big>This is big font
This is <i>italic</i>This is italic
Was <s>$50</s>; now $40Was $50; now $40
This is <small>small</small>This is small
H<sub>2</sub>OH2O
May 5<sup>th</sup> 2005May 5th 2005
<tt>fixed-width font</tt>fixed-width font
This is <u>underlined</u>This is underlined
logical character tag describes how the text is being used, not necessarily how it is formatted. Listing 3 displays common examples logical character tags. 
HTML codeOutput
This is used for a short <cite>quote</cite>.This is used for a short quote.
<code>y = m * x + b</code>y = m * x + b
<del>Deleted</del> textDeleted text
<dfn>definition</dfn> textdefinition text
This is <em> emphasized </em>.This is emphasized .
<ins>inserted</ins> textinserted text
<kbd>code</kbd> samplecode sample
<samp>code</samp> samplecode sample
This is <strong>strong</strong>.This is strong.
<var>program</var> variableprogram variable

 
 
 

Extended Search

Custom Search