All HTML Tags Table
Essential HTML Tags
There are four sets of HTML tag that form the basic structure needed for every HTML file:
Definition – <html></html>
This basically defines the document as web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the html tags.
Header – <head></head>
The header contains information about the document that will not appear on the actual page, such as the title of the document, the author, which style sheet of use and also Meta tags.
Title – <title></title>
The title tag defines the title that will appear in the title bar of your web browser. The title must appear between the head tags.
Body – <body></body>
The body tags contain all the information and other visible content on the page. All your images, links and plain text must go between the <body> and </body> tags.
<title>this is the title</title>
This is everything that goes in the document!
Html basic tags:
· Heading :
<h1> A Heading </h1>
Use headings for titles and subtitles, and make some text stand out from others
<p>Some text </p>
Most content on a simple web page will appear in paragraphs or sections.
<a href=”home.html“>My homepage </a>
Links are necessary for users to jump from one page to another
Adding your holiday photos or other images to your web page is fairly simple.
· Division – <div></div>
The div tag defines a section or division within a HTML file.
It typically contains headings, paragraphs, tablesor other elements that need to be grouped together. Commonly used with cssby setting the <div class=”?”> attribute to set the look and feel of a section of your web page.
· Paragraph – <p></p>
Used to define paragraphs of text, much like you would see in a book. A lot of text can appear within the <p> and </p> tags, and browsers will automatically wrap the text onto the next line once it reaches the edge of the screen. When another <p> tag is used to start the next paragraph, the browser will add some blank space between the paragraphs. It has the following attributes.
Align=”?” – Alignment of text in the paragraph: left, center or right.
Width=”?” – Paragraph will occupy a fixed width or percentage of the page, default 100%
· Span – <span></span>
Used to group inline elements together, such as a few words within a sentence, in order to apply a css styleto those words only. The span tag can be used within div and p tags as it does not create a new horizontal block boundary.
· Line Break – <br>
Equivalent to one carriage return, it is used to start text on a new line. Multiple <br> tags in a row will create a large vertical space on a web page.
· Horizontal Line – <hr>
The horizontal rule, often referred to as the HTML line separator tag, creates a horizontal line commonly used to visually separate sections on a page. It has the following attributes.
Width=”??%” – The line will occupy a fixed width or percentage of the default 100% width.
Color=”#??????”–Colorof the line
Noshade – Prevent the 3D ‘etched’ look and create a flat, solid line separator.
· No Breaks – <nobr></nobr>
If for some reason you want text to continue in one straight line, and not to wrap at the edge of the screen screen, you can use the nobr. Note: this will force a user to scroll to the right to see the rest of the line, which is considered bad design.
The following HTML tags are used to format the appearance of the text on your web page.
This can jazz up the look of the web page, however, too much variety in the text formatting can also look displeasing.
· Header – <h?></h?>
There are 6 levels of headings available, from h1 for the largest and most important heading, down to h6 for the smallest heading.
· Bold – <b></b>
The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.
· Italic – <i></i>
Also working the same way as a word processor, italics displays the text at a slight angle.
· Underline – <u></u>
Again, the same as underline in a word processor. Note that html linksare already underlined and don’t need the extra tag.
· Strike-out – <strike></strike>
Puts a line right through the center of the text, crossing it out. Often used to show that text is old and no longer relevant. Also works by using <s></s> instead.
· Preformatted Text – <pre></pre>
Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)
· Source Code – <code></code>
Text is displayed in a fixed-width font, commonly used when showing source code. I have used it on this site, along with style sheets,to show all tags.
· Typewriter Text – <tt></tt>
The text appears to have been typed by a typewriter, in a fixed-width font.
· Block Quote – <blockquote></blockquote>
Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.
· Small – <small></small>
Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it. Useful for displaying the ‘fine-print’.
· Font Color – <font color=”#??????”></font>
Change the color of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colors and codes for some samples.
· Font Size – <font size=”?”></font>
Replace the? With a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest.
· Font Size Change – <font size=”+/-?”></font>
For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify. Eg: <font size=”-1″>Some Text</font>
· Change Font Face – <font face=”?”></font>
To show text in a particular font, use the font name such “Helvetica” or “Arial” or “Courier”. Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them.
· Centre – <center></center>
A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page).
· Emphasis – <em></em>
Used to emphasize text, which usually appears in italics, but can vary according to your browser.
· Strong Emphasis – <strong></strong>
Used to emphasize text more, which usually appears in bold, but can vary according to your browser.
o Images are used in HTML documents to one: make the page visually effective and two:
Display information. Images can also be used as links, but this is discussed in the topic on linking. Although images are good for a number of things, a page with too many images often looks too cluttered and can take too long to load, which can be frustrating, and as a business aspect it could lose clients.
· An image – <img src=”url”>
To display an image you need to specify the URL of the image using the srcattributereplacingurl with the filename of your image. There are several ways this can be done:
src=”picture.jpg” – the filename if the image is in the same directory as the html file.
src=”images/picture.jpg” – a relative path when the image is in another directory.
src=”http://madhavapps.com/images/photo.jpg” – a full URL can also be used.
· Alternate Text – <img … alt=”?”>
The altattributedefines the text shown in place of an image when the image cannot load. This is actually a required attribute for valid html, and should briefly describe what the image normally would.
· Image Size – <img … width=”?” height=”?”>
An image will normally be shown actual size, but by using the width and height attributes you can change the displayed size. You can specify the size in pixels or as a percentage. Tip: specify the size using the actual size of the image in pixels to force browsers to allocate space for the image before it is even loaded, ensuring you page layout remains the same with or without images displayed.
· Border – <img … border=”?”>
Add a border by specifying the thickness in pixels. You can also set border=”0″ to remove the border added when images are used as links.
· Image Alignment – <img … align=”?”>
By default an image appears at the place specified in the html code(as with any other tag). However, you can align an image with the surrounding text or paragraph by setting any of align=”left | right | top | bottom | middle”.
· Spacing – <img … vspace=”?” hspace=”?”>
Adjust the whitespace (or runaround space) around an image, in pixels. Use vspace to adjust the vertical spacing above and below, or hspace for the left and right sides
Learn how to create links on your web page. Links allow you to jump from one page to another by clicking on the link text. You can also jump to places on the same page (called fragments), to different sections of your site, or to another web site altogether.
· Basic Link – <a href=”url”>link text</a>
There are two main parts to a link tag: the text a user can click, and the web address they go to if they click it. The bit between the <a> and </a> tags is the link text, and is generally displayed in blue and underlined by web browsers. The href=”url” part is the web address, where URL can be set in several ways:
href=”example.html” – another page in the current directory
href=”example/page.html” – a relative location
href=”http:/xyz.com/page.html” – a full address (URL).
· Link to a Fragment – <a href=”#fragment”>link</a>
It is often usefull to link to other places on the same webpage, such as other sections or chapters further down the page. The technical term for this is linking to a Fragment, where browsers will automatically try and scroll to that part of the page.
Fragments first need to be defined somewhere in a webpage by giving them a name, for example <a name=”fragment_name”>, then links to this fragment are created by using the hash (#) character: <a href=”#fragment_name”>Link</a>. To link to a fragment on another page you would simply append the fragment name to the address, for example: href=”example.html#fragment_name”.
· Target Window – <a href=”url” target=”???”>link</a>
You may not always want to link to a page and have it load up over the one you are currently viewing. Thats where the target attribute comes in handy. By setting the target=”_BLANK” the page you link to will load up in a new window (or new tab in some newer browsers). Similary, “_self”, “_parent”, or “_top” will open the link in the current window, the parent window (used with frames) or the top level window, respectively.
· Image as a Link – <a href=”url”><img …></a>
By placing an image tagbetween the <a> and </a> tags, you can turn an image into a link, and clicking on that image will then load the referenced page. You may notice that the image gets a blue border just as link text became underlined. This can be resolved by setting the border=”0″ attribute of the image, or using css.
· Email Link – <a href=”mailto:email”></a>
A special kind of link, the mailto notation link instructs the browser to compose and email to the specified address using the default email program. It but does not actually send any emails automatically. You can also set a subject for the email by using <a href=”mailto:[email protected]?Subject=Linking”>email me</a>. You may notice that I have used this type of link over on the contact mepage.
There are three types of lists, ordered,unorderedand definition lists.
An unordered list is a bulleted list, similar to the menu on the right (although the menu has been altered using style sheetsto use images instead of the standard bullets.)
· Define Unordered List – <ul> … </ul>
Use the <ul> tags to define the start and end of an unordered list. A number of list items (li elements) will go within the ul tags.
· Unordered List Item – <li> some item </li>
Add the text for each item in between some <li> and </li> tags. Each list item must have its own li tags.
· Bullet Type <ul type=”disc | circle | square”>
By default a browser will show a round bullet. This can be changed by using the typeattribute of the ul tag, which will change the bullet type for the entire list.
· Item Type <li type=”?”>
You can set the type of bullet for an item in the middle of the list by setting the type attribute of an li tag.
This list is used to create and indexed list, such as a numbered or alphabetical list.
· Define Ordered List – <ol> … </ol>
Use the <ol> tags to set the start and end of the list. A number of list items will then go between the ordered list tags.
· Ordered List Item – <li> an item </li>
Each item must use the <li> tags the same as with an unordered list. But this time the browser will number each item automatically, instead of showing bullets.
· List Type <ol type=”A | a | I | i | 1″>
Set the type of list index by using the type=”?” attribute. The default style is numeric, and you can also choose from upper or lowercase, alphabetic or roman numerals.
· List Starting Position <ol start=”?”>
Set the starting number (or letter) if you dont want the list to start at 1 or A.
· Item Value <li value=”?”>
You can set the value of an item in the middle of the list manually, if you do not want it to follow the previous letter or number. Simply set the value attribute of the item you wish to change. Note: subsequent items will follow the new value.
This type of list is used to define and describe terms, much like a dictionary. Typically an entry in the list consists of a term, and a definition of that term. A browser will usually bold the term, and indent the definition.
· Define a Definition List – <dl></dl>
Set the start and end of a definition list. All entries go within the dl tags. Each entry will usually consist of one dt and one dd element.
· Definition Title – <dt></dt>
The title of a term being defined. Note: you may have a term with no definition, or multiple terms with the same definition.
· Definition Description – <dd></dd>
The definition of a term. Note: you can have multiple definitions for a single term.
· Table – <table> … </table>
Used to define a table, it contains all row and column tags along with their content. Think of it like the body tag, although there must always be at least one row in a table. It has some attributes to define the table layout.
Border=”?” – The size of the border (in pixels) surrounding the table
cellspacing=”?” – The space (in pixels) between each cell, eg. Between rows or columns
cellpadding=”?” – The space, or margin, between the content of a cell and its border
· Table Row – <tr></tr>
To start a table row, the tr tags must appear within the table tags.
· Table Cell – <td></td>
A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes:
align=”?” – Alignment of text in the cell: left, center or right.
valign=”?” – Vertical alignment of the cell: top, middle or bottom.
Width=”?” – Specify a fixed with of a cell, by default they will only take up as much space as they need.
colspan=”?” – Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace? With the number of columns to span.
rowspan=”?” – Row spanning, similar to column spanning, forces a cell to occupy more than one row.
nowrap – No text in the cell will be wrapped onto the next line. Similar to the nobr tag for paragraphs
· Header Cell – <th></th>
Similar to a table cell, a header cell must appear within a table row. Normally found in the first row, header cells are usually shown in bold and centered by the browser.
Frames allow you to have multiple sections of the browser window, called frames, each showing their own .html file within the frame. This used to be common practice when trying to show separate sections of a site in separate sections of the browser window, such as a header at the top, navigation at the side, and the rest was page content that someone could scroll down without making the header and navigation disappear.
Frame sets are rarely used these days, as the introduction of server side scriping languages such as php and asp allow you to create content pages dynamically. The introduction of HTML5 has also provided new methods of doing page layouts without having to use frames.
· Frame Set – <frameset> … </frameset>
Used instead of the body tag, the frameset tag defines a group of frames. Setting the rows and cols attribute allow you to create the number of frames needed for your layout.
rows=”??,??” – To set up multiple frames in rows, replace the question marks by the size of each row, either in pixels or as a percentage. A * can be used as a wild card, for instance: rows=”100,*” would give you a top frame of 100 pixels high, and a bottom frame using the rest of the screen.
cols=”??,??” – Similar to rows, a number of frames can be set out in columns.
border=”?” – Frame border thickness in pixels.
bordercolor=”?” – Color of border between frames.
· Frame – <frame>
Each frame within a set will need a frame tag to tell it which web page to load in the frame. It uses the attribute.
src=”url” – Filename or URL of page to show in the frame
noresize=”noresize” – The frame will not be able to be resized by a visitor
scrolling=”auto” – Each frame will have vertical and horizontal scroll bars appear automatically when needed. You can change this by setting the scrolling attribute to yes, no, or auto.
frameborder=”auto” – Individual Frame Border. Set to 0, 1 to specify whether or not that frame must have a border.
· Unframed Content – <noframes> … </noframes>
Very old browsers are unable to display frames, and in this case we need to specify what these browsers should display instead of the frames. Even though this is not much of a problem anymore, it is still suggested that you specify unframed content when using frames. Anything between the noframes tags will not be shown in modern browsers that show framed content.
· Form – <form> … </form>
All form elements such as inputs and buttons must go within the form tags. In most cases, a form must have the name, action & method attributes set.
name=”?” – A unique name identifying the form, used by the action script.
method=”?” – The method used by the action script, post or get. For example, post would be used to submit data to a user-registration form, and get is used for searches or forms that must return information.
· Input Field – <input>
Used to create a simple text-entry field for your form, but is also the basis for many other form input types using the type attribute.
name=”?” – Unique name for the input to be used by the action script.
type=”?” – There are several types of form input fields, text, password, checkbox, radio, file, image, & hidden are among the most common.
value=”?” – Initial value or data displayed in the input field when the form is first loaded.
size=”?” – Defines the input size or width, typically defined in terms of number characters wide instead of pixels.
maxlength=”?” – Maximum length of input field, such as the maximum number of characters for a text input.
checked – Used with checkbox and radio inputs, it sets the field default to be already checked.
· Button – <button>
A form button is similar to other form inputs but has its own set of attributes
name=”?” – Unique name for the button to be used by the action script.
type=”?” – The button type, either submit or reset, determines whether the form is to be submitted or cleared upon pressing it.
value=”?” – Text that appears on the button, such as OK or Submit.
size=”?” – Determines the length (or width) of the button.
· Selection List – <select> … </select>
A drop-down list, also referred to as a combo-box, allowing a selection to be made from a list of items.
name=”?” – Selector name
size=”?” – The minimum size (width) of the selection list, usually not required as the size of the items will define the list size.
multiple – Allows a user to select multiple items from the list, normally limited to one.
· Selection Item – <option></option>
An option tag is needed for each item in the list, and must appear within the select tags. The text to be shown for the option must appear between the option tags.
value=”?” – The value is the data sent to the action script with the option is selected. This is not the text that appears in the list
selected – Sets the default option that is automatically selected when the form is shown.
· Large Text Area – <textarea></textarea>
An input that allows a large amount of text to be entered, and allows the height of input box to be a specified unlike the standard input tag.
name=”?” – The unique name assigned to the form field.
rows=”?” – The number of rows of text, defines the vertical size of the text area.
cols=”?” – The horizontal size of the text box, defined as the number of characters (ie. columns).
Tags that don’t seem to fit in any other section…
· Comment – <!– hello world –>
Anything between the comment tags is not displayed by the browser, so they are used to document your html code, or sometimes for hiding sections of html that you don’t want to delete just yet.
· Document Type – <!DOCTYPE … >
The purpose of the DOCTYPE declaration is to define the type of HTML document to web browsers, more specifically, which versions of HTML to use. The DOCTYPE should appear on the first line of a file, even before the html tag, and will typically be similar to one of the following:
· META Tags – <meta>
Meta tags contain information about the page that does not need to be displayed, but it still used by search engines and other web crawlers. They are typically used to give search engines a brief description of the page, as well as the important keywords on it. Meta tags must appear within the head section of the html, and have usually have two of the following attributes:
name=”?” – The name of the meta tag, such as description, keywords or author.
content=”?” – The actual content or value of what was specified in the name attribute. Can also be used along with http-eqeiv.
http-equiv=”?” – An alternate way of defining names for some special meta tags such as content-type and language.
· Blinking Text – <blink> … </blink>
Blinking text can be usefull when making things stand out, however overuse of this tag can actually cause a web page to appear ugly. I find blinking text extremely annoying, and should probably remove it from this guide:-