This is a list of the most common tags and how to use them (with examples!). It's divided into types for easy understanding. This page will be a little long but I'll try to keep the text down. Many of these tags are being phased out or it is recommended that you use CSS (Cascading StyleSheets) instead. Since CSS is a little advanced, I recommend that you use these tags if you're just starting out. All tags that have been depreciated will be marked with an asterisk (*) while tags/attributes that have been depreciated and replaced by CSS will be marked by two asterisks (**).
The indented text that is started by (-) are attributes of the tag it's indented under. This means that these attributes are to be used with the tag. The settings of these attributes don't need to be enclosed in quotes in HTML but it's considered good formatting if you do so. The "=" is required. (width="200" vs. width=200)
Font Formatting: Basically a font is how the words look in a webpage. It's made up of the letter style, the size, whether it's bold or italic, etc.
<font>**: This tells the browser how you want your text to look. Professionals frown upon using this tag instead of CSS.
- color**: Defines the font color. You can use RGB color values rgb(#,#,#) or rbg(#%,#%,#%), Hexadecimal digits (#......) [you can also use Hex shorthand for the 256 color web pallet], or color words.
- face**: Defines the font style. It's recommended to only use common font families. A list of them can be found here.
- size**: Defines the font size. Only numbers 1-7 are acceptable.
<font face="Times New Roman" size="3" color="yellow">My text is in the Times New Roman style and is yellow!</font>
My text is in the Times New Roman style and is yellow!
<b>: Makes the font bold. An alternate <strong> exists.
<i>: Italicizes the font. An alternate <em> exists.
<u>*: Underlines the font. Has been depreciated because underlined text resembles links.
<h1> - <h6>: Defines a page header. H1 is the largest while H6 is the smallest.
- align**: Sets the alignment: left, right, center, or justify.
Page Formatting: These tags assist you with the organization of your webpage.
<br>: This adds a linebreak to your text. It has no closing tag so add a backslash before >.
<center>: This centers your text.
<hr>: This draws a horizontal rule across the page like the one above this section.
- align**: Sets the alignment: left, right, or center.
- noshade*: Removes the shading on the rule so that it's a flat, solid color. This has no other settings.
- size**: Sets how thick you want your rule in either pixels or percentage.
- width**: Sets how long you want your horizontal rule in either pixels or percentage.
<p>: Defines a paragraph. These are automatically double-spaced.
<pre>: Defines preformatted text that displays exactly how you type it in a monospaced font. The examples are making use of the <pre> tag.
- width: Sets the max number of characters per line.
<span>: Defines a section of text that will have special formatting. CSS must be used with this tag, otherwise it's pointless to use it.
- style: This is where the CSS information should go.
<style>: Defines CSS properties that will be used in your webpage. This goes between <head></head>.
Tables: These are actually meant to organize information in a spreadsheet style but have been used since the dawn of the World Wide Web for webpage layouts. A word of warning, however. If you eventually want to move onto tableless (CSS) layouts, this method is difficult to unlearn.
<table>: Defines a table. Without at least <tr> and <td> inside it's useless.
- align**: Sets the alignment: left, right, or center.
- bgcolor**: Sets the background color: RGB rgb(#,#,#), Hexadecimal (#......), or color words.
- border: Sets the size of the table's border in pixels. Use "0" for no border.
- cellpadding: Sets the space within a table cell. Use either pixels or a percentage.
- cellspacing: Sets the space between table cells. Use either pixels or a percentage.
- width**: Sets the width of the table. Use either pixels or a percentage.
<table border="1" align="center"><tr><td>This is my table with one cell.</td></tr></table>
This is my table with one cell.
<th>: Defines the header in a table. The text is usually made bold. Align **, bgcolor **, and width ** can be used in addition to what's listed below.
- align: Sets text alignment: left, right, center, justify, or char.
- char: Use with align="char". Tells which character to align the text on.
- colspan: Sets how many columns this cell should span.
- height**: Sets the space between table cells. Use either pixels or a percentage.
- rowspan: Sets how many rows this cell should span.
- valign: Sets the vertical alignment of the text: top, bottom, or middle.
Forms: These are used to process data. Some sort of server-side script (such as CGI or PHP) must be used to process the information most of the time.
<form>: Defines a form for user input.
- action: Instructs the form where to send the data it has collected (use a URL or an e-mail address). This is required.
- method: Sets how you want the data sent: get or post. Get (default) transmits a small amount of data (one or two fields; the data must only contain ASCII characters and be no longer than 100 chacters), post transmits the data of a long form.
- name: Sets the name of the form.
- target: Sets how to open the URL listed in "action": _blank (a new window), _parent (the parent frame), _self (the same frame), or _top (the entire window).
<input>: Defines an input field that may be a textbox, a submit button, a checkbox, or a group of radio buttons. There is no closing tag.
- align: Sets the alignment of images only (can only be used with type="image"): left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.
- alt: Sets the alternate text for an image. Can only be used with type="image".
- checked: Sets whether or not an element should be already checked upon loading. Can only be used with type="checkbox" and type="radio".
- maxlength: Sets the max number of characters in a text field. Can only be used with type="text".
- name: Sets the name for an input field. It's required for type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and type="radio".
- readonly: Defines a field as read only. Can only be used with type="text" and is used exactly how it is.
- size: Sets the number of allowed characters. Can't be used with type="hidden".
- src: Sets the URL of an image to display. Can only be used with type="image".
- type: Sets the type of an input field: button, checkbox, file, hidden, image, password, radio, reset, submit, and text. For radio buttons to work correctly you must give all of them the same name or else they won't belong to the same group.
- value: Sets multiple things depending on the type of the field. For buttons it sets the text on the button, for image buttons it sets in words what it is, for checkboxes and radio buttons it sets the result of the element when clicked, for hidden, password, and text fields it sets the default value. This can't be used with type="file" and is required for type="checkbox" and type="radio".
<textarea>: Defines a multi-line text input field. You can have text display in the textarea by default by placing it between the tags.
- cols: Sets the number of columns. This is required.
- name: Sets the name of the text area.
- readonly: Makes the text area read only. It's used as a single word.
- rows: Sets the number of rows. This is required.
<textarea cols="30" rows="7"></textarea>
<label>: Defines a label for an element. Clicking on it will cause the element to be triggered.
- for: Points the label to something, must use with an ID.
<!DOCTYPE>: Defines the document type. This goes before <html> There is no closing tag, but it's not valid to use a forward slash.
- Transitional HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> If you mostly use HTML tags use this one.
- Strict HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> If you are going to do all of your formatting with CSS use this one.
- Frameset HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> If you use a frameset use this one on the frameset page only.
- Transitional XHTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> If you mostly use XHTML tags use this one.
- Strict XHTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> If you are going to do all of your formatting with CSS use this one.
- Frameset XHTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> If you use a frameset use this one on the frameset page only.
<!--...-->: Defines webpage comments that won't be seen by your visitors unless they view your source code. There is no closing tag. Replace the periods with your text.
<a>: Defines an anchor. This can be used to link to another webpage or website or to create a bookmark in a long document. To create an e-mail link, add "mailto:" before the e-mail address. To link to a sub-directory, add the name of the directory followed by a forward slash "/" before the filename (/dir/file.jpg). To link from a sub-directory to the another directory, use "../" for each level you want to go back to. This is called the "relative path". The "absolute path" is the full one: http://www.yourwebsite.com/file.html.
- #: Sets anchor to point to an id. I use this in the links at the top of the page.
- href: Sets the anchor to point towards a webpage, website, or e-mail address. Websites must also use "http://".
- name: Sets the name of the anchor. Each section in this page is named so that <a href="#..."> can work. Using "id" instead of "name" is also acceptable.
- target: Sets how to open the URL: _blank (a new window), _parent (the parent frame), _self (the same frame), or _top (the entire window). You can also use the name of the frame you want the link to load in (without the underscore).
<div>: Defines a division/section (also known as a layer). This is used most often with tableless CSS designs. Most browsers place a line break before and after this tag.
<frame>: Defines a frame. This must be used with <frameset> and there is no closing tag. See <frameset> for an example.
- frameborder: Sets whether or not to display a border. Values are "1" or "0".
- marginheight: Sets the sizes of the top and bottom margins.
- marginwidth: Sets the sizes of the left and right margins.
- name: Sets the name of the frame.
- noresize: Tells the browser not to allow frame resizing. It's used as is.
- scrolling: Sets what the scrollbar of the frame does. Values are auto, yes, or no.
- src: Sets the URL of the page to show in the frame.
<frameset>: Defines a frameset used to group together multiple webpages. Cannot use the <body> tag. Generally the frameset is on the index page of a website (index.html). Set the title of this frameset as you would an ordinary webpage.
- cols: Defines the number and size of columns in a frameset. Possible values are: number, percentage, * (auto).
- rows: Defines the number and size of rows in a frameset. Possible values are: number, percentage, * (auto).
- align**: Sets the alignment of the image: top, bottom, middle, left, or right.
- alt: Sets a short description of the image. This will display if the image does not.
- border**: Sets the border around the image if used as a link.
- height: Sets the height of the image in pixels or a percentage.
- align**: Sets the alignment of the image: top, bottom, middle, left, or right.
- src: Sets the <img> tag to the image you want to display. This is required.
- vspace**: Sets the amount of space above and below the image.
- width: Sets the width of the image in pixels or a percentage.
<meta>: Defines webpage information. This tag goes between <head></head> There is no closing tag. It's mainly used by search engines.
- content: Sets the content of the meta tag.
- http-equiv: Sets the meta tag to an HTTP header.
- name: Sets the name/type of the meta tag.
<meta name="description" content="This is Goku Girl's HTML tutorial #2." />
<meta name="keywords" content="HTML, tutorial, beginners" />
<meta http-equiv="refresh" content="10" url="http://www.mynewurl.com" />
<link>: Defines a relationship between two documents. It has no closing tag.
- href: Sets the target URL of the document.
- media: Sets what type of document will be displayed: all, braile, print, projection, screen, or speech.
- rel: Sets the relationship between the current document and the target one: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection
- rev: Sets the relationship between the target document and the current one: alternate
appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection
- src: Points to the location of the document.
- target: Sets how to open the target URL: _blank (a new window), _parent (the parent frame), _self (the same frame), or _top (the entire window).
<noframes>: Sends a message to browsers that don't support frames. If you use this, you must use the <body> tag or else your message won't display in the web browser. Browsers that do support frames will ignore the message and execute the frame set.
<script>: Defines a script. This must go between <head></head> See the example in <noscript>.
- src: Points to a file that contains your scripting instead of placing it into the header.
<applet>*: Defines an embedded applet. It's now preferred that a web designer use <object> instead.
- align: Sets the alignment of the applet: left, right, top, bottom, middle, baseline, texttop, absmiddle, absbottom.
- alt: Sets the alternate text to be displayed if the browser can't run the applet.
- code: Sets the URL to point to the applet's class.
- hspace: Sets the horizontal spacing around the applet.
- name: Sets the name of the applet.
- title: Sets additional info to be displayed in a tool tip.
- vspace: Sets the vertical spacing around the applet.