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

 
 
 

HTML Paragraphs vs Line Break



Paragraphs
 are useful especially when features are posted. It is also very useful in understanding the written article of a webpage properly, like how News and Blog sites have been posting as their content.

Paragraphs are another element of HTML that has an opening and closing tag. An opening tag, <p>, is declared when starting a new paragraph and a closing tag,</p>, is declared by ending the paragraph or before starting another paragraph.

Most browsers, however, display a new paragraph even by without the end tag, but using the correct syntax is more recommended to provide error-free results.

Line Break means a new line. A bit similar to a paragraph though a paragraph gives more space between the first paragraph between the second paragraph.

photo by: Unique Method



HTML Heading

HTML Headings are used for Headings only. Headings have a start tag and an end tag. It is important to remember than web visitors read a web page's heading first.

Headings are written as...

<h1>This is an H1 Heading</h1>

Headings are defined through the use of <h1> to <h6> elements or tags. The smaller value of your heading is, the bigger size of your font is.

Examples:

This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

HTML Elements and Attributes

An element is everything from the start to the end tag. Some elements, however, have empty contents.

Start TagContentEnd Tag
<b>Text are strong</b>
<br/>


Some elements have attributes.


An attribute can be identified within an element by finding the equal sign (=). Attributes give more information on HTML elements and are always introduced in the starting tag of an element.

More on attributes on the next post.

Introduction to Web

A website is a set of web pages that contains content on either or both text, images and multimedia, and etc. A Web Page on the other hand, is a document created with HTML.


There are two types of websites:

  1. DYNAMIC websites 
  2. STATIC websites


A dynamic website has a front and back end. Visitors of the site can add changes to itself frequently and usually retrieves data from a database. Blogger, Facebook and Twitter are an example of famous dynamic websites.

A static website is the simplest form of web programming and has not administrator page. It displays the same information to all the visitors and cannot be changed.

HTML stands for Hypertext Markup Language and is the most common programming tool for the web.

Markup are keywords surrounded by brackets (< >), and can be referred as HTML tags or simply tags. Usually, markups come in pairs which has an opening tag, the first tag of the pair, and a closing tag, the last tag of the pair.

Refer to next post for more of HTML.

Extended Search

Custom Search