HTML Is Your Friend/ pg. 17 APPENDIX A1: ELEMENT REFERENCE CHART Featured here is a list of all the HTML elements, their tags, and their attributes. I hope this is helpful.
Page Structure Tags | ||||
| Quick Information: <html> | ||||
| Start Tag | End Tag | |||
| Is it needed? | optional | optional | ||
| How it looks: | <html> | </html> | ||
| What it does | This tag simply defines the document as an HTML document, and anything within these two tags will be registered as part of the webpage | |||
| Attribute: Name | Values | What it does | ||
| None. So don't worry about it. | ||||
| Quick Information: <head> | ||||
| Start Tag | End Tag | |||
| Is it needed? | optional | optional | ||
| How it looks: | <head> | </head> | ||
| What it does | The <head> tag simply defines a section of the page called the head | |||
| Attribute: Name | Values | What it does | ||
| None. So don't worry about it. | ||||
| Quick Information: <title> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <title> | </title> | ||
| What it does | As its name suggests, this tag gives the webpage its title, which is seen on the application's window bar. This tag is located in the head section. | |||
| Attribute: Name | Values | What it does | ||
| Another tag without attributes | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | forbidden | ||
| How it looks: | <meta> | doesn't exist | ||
| What it does | The <meta> tag provides additional information about your webpage, which is utilized by search engines. It appears only in the head section. | |||
| Attribute: Name | Values | What it does | ||
| name= | keywords description author generator abstract expiration | This provides the general catogory your content information will provide. | ||
| content= | whatever you want to say | This is the more specific information you want search-engines to see. | ||
| Quick Information: <body> | ||||
| Start Tag | End Tag | |||
| Is it needed? | optional | optional | ||
| How it looks: | <body> | </body> | ||
| What it does | This tag defines the section of the HTML document called the body | |||
| Attribute: Name | Values | What it does | ||
| bgcolor= | #rrggbb or color name | this attribute sets the color of the background of the entire webpage. The first value type is a hexadecimal color code. The second value type is a color name. | ||
| background= | url source path | "Background" sets the imageto be in the background, as opposed to the color in the background. The value is URL source path. So if the image you want is in a folder named "images" and is named "bkgrd.jpg", the source path would be "images/ bkgrd.jpg". One more note: most browsers tile the background image. | ||
| link= | #rrggbb or color name | This attribute defines the color of an unvisited (never been clicked) hyperlink. Its values are the same type as the bgcolor attribute's. | ||
| alink= | #rrggbb or color name | Same as above, but this attribute sets the color of a link as it is being clicked upon. | ||
| vlink= | #rrggbb or color name | Same as above, but this attribute sets the color of a visited linke (one you have clicked before). | ||
| text= | #rrggbb or color name | Sets the color of the regular text in the body. Pretty much the same as the other color attributes. | ||
Miscallaneous Body Tags | Quick Information: <div> | |||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <div> | </div> | ||
| What it does | This tag creates a division within an HTML document, which acts like a mini-webpage | |||
| Attributes:Name | Values | What it does | ||
| align= | left center right | Like in a word processor, anything inside the division will be horizontally aligned to the left, center, or right. | ||
| Quick Information: <span> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <span> | </span> | ||
| What it does | This tag creates a span of space within an HTML document, which acts like a mini-webpage, but doesn't force a line-break | |||
| Attributes:Name | Values | What it does | ||
| None of any concern. | ||||
| Quick Information: <p> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | optional | ||
| How it looks: | <p> | </p> | ||
| What it does | A paragraph is a line break with a line's worth of space preceding the text in the paragraph. | |||
| Attributes:Name | Values | What it does | ||
| None for the poor <p> tag. | ||||
| Quick Information: <br> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | forbidden | ||
| How it looks: | <br> | none | ||
| What it does | This tag creates a line break like the paragraph element, but without the space in between | |||
| Attributes:Name | Values | What it does | ||
| None. | ||||
| Quick Information: <hr> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | forbidden | ||
| How it looks: | <hr> | none | ||
| What it does | This tag makes a little horizontal line on the page | |||
| Attributes:Name | Values | What it does | ||
| size= | number of pixels | The size attribute determines how tall the hr is. The rules on this page are 1 pixel tall. Rules can be as tall as you want, ie 100 pixels or more. | ||
| width= | no. of pixels or XXX% (percent of window) | "Width" determines the width of the rule. This can be a fixed number of pixels, or can be a percentage of the window; if the browser window is resized, then the rule also resizes in proportion to the percentage. | ||
| noshade | no values | Horizontal rules usually have a 3D look, ie they are carved into the page. This attribute makes the rule look like a 2D, flat line, like the rules on this page. | ||
| align= | left center right | This attribute aligns the horizontal rule to either left, center, or right. Horizontal rules are, by default, aligned to the center. | ||
| Quick Information: <!--comment--> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <!-- | --> | ||
| What it does | This makes a comment within the code, which is not visible on the page. | |||
List Tags | ||||
| Quick Information: <ul> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <ul> | </ul> | ||
| What it does | This tag defines an area to be formatted as an unordered list. | |||
| Attributes:Name | Values | What it does | ||
| type= | disc circle square | This attribute will define the shape of the bullet that precedes each list item. | ||
| Quick Information: <ol> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <ol> | </ol> | ||
| What it does | This tag defines an area to be formatted as an ordered list. | |||
| Attributes:Name | Values | What it does | ||
| type= | 1 a A i I | This attribute will determine the type of number before each item. NOTE: this is one of the few times when anything is CASE-SENSITIVE. You can pick capital letters of Roman numerals. | ||
| start= | whatever your heart desires; numerically, of course | Like its name suggests, you can determine where the numbering will start. Sorry, negative numbers not allowed. | ||
| Quick Information: <li> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | optional | ||
| How it looks: | <li> | </li> | ||
| What it does | This tag defines the following content as a single item in an unordered or ordered list. Each <li> is preceeded by a bullet (unordered) or a number/letter (ordered). | |||
| Attributes:Name | Values | What it does | ||
| type= | 1 a A i I | This attribute will determine the type of number before each item. NOTE: this is one of the few times when anything is CASE-SENSITIVE. You can pick capital letters of Roman numerals. | ||
| Quick Information: <dl> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <dl> | </dl> | ||
| What it does | This tag defines an area to be formatted as a definition list. | |||
| Quick Information: <dt> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | optional | ||
| How it looks: | <dt> | </dt> | ||
| What it does | This tag determines the content to be formatted as a definition term. | |||
| Quick Information: <dd> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | optional | ||
| How it looks: | <dd> | </dd> | ||
| What it does | This tag defines an area to be formatted as a definition data, aka the definition for the term. | |||
Text Format Tags | ||||
| Quick Information: <h1-6> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <h1-6> | </h1-6> | ||
| What it does | This tag makes the text in the heading format. Remember that the tag is not <h1 - 6>, it's <h1> or other numbers. | |||
| Attributes:Name | Values | What it does | ||
| align= | left center right | Aligns the heading text left, center, or right. | ||
| Quick Information: <b> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <b> | </b> | ||
| What it does | Makes text bold. | |||
| Quick Information: <i> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <i> | </i> | ||
| What it does | Makes text italic | |||
| Quick Information: <u> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <u> | </u> | ||
| What it does | Makes text underlined | |||
| Quick Information: <tt> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <tt> | </tt> | ||
| What it does | Makes text teletype style. | |||
| Quick Information: <sup> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <sup> | </sup> | ||
| What it does | Makes text superscripted | |||
| Quick Information: <sub> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <sub> | </sub> | ||
| What it does | Makes text subscripted. | |||
| Quick Information: <font> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <font> | </font> | ||
| What it does | This tag changes the face, size, and color of text. | |||
| Attributes:Name | Values | What it does | ||
| face= | name of a font, ie "arial" | Changes the font face (appearance) of text. | ||
| size= | +/- 1 - 7 | Changes the size of the text, from 8pt to 36pt. | ||
| color= | #rrggbb name of color | Changes the color of text. | ||
| Quick Information: &#special character; | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | &#number; or &name; | |||
| What it does | This creates a special character, one that cannot be typed via the keyboard. | |||
Hyperlinks and Anchor Tags | ||||
| Quick Information: <a> - Hyperlink | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | required | ||
| How it looks: | <a> | </a> | ||
| What it does | The hyperlink allows you to click on text or an image to open a new file in the browser window. | |||
| Attributes:Name | Values | What it does | ||
| href= | the URL desired | This is the address of item you want to link to. | ||
| href=# | the name of the anchor desired | This sub-attribute lets you link to an anchor in the same file. | ||
| href=mailto: | email address desired | This sub-attribute lets you create a link to an email address. | ||
| target= | the name of the frame desired _top _parent _self | This is the name of the frame where you want the item to be opened in. | ||
| Quick Information: <a> - Anchor | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | forbidden | ||
| How it looks: | <a> | none | ||
| What it does | The anchor provides a point in a page to be linked to within that page. | |||
| Attributes:Name | Values | What it does | ||
| name= | whatever you little heart desires | Provides a name for the anchor so that it can be hyperlinked to. | ||
Image Tags | ||||
| Quick Information: <img> | ||||
| Start Tag | End Tag | |||
| Is it needed? | required | forbidden | ||
| How it looks: | <img> | none | ||
| What it does | This content-less tag indicates that there is an image. | |||
| Attributes:Name | Values | What it does | ||
| src= | the URL of the image | This is the path for the image you want to be displayed. Include filename extensions! | ||
| width= | pixel values | Controls the width of the image. | ||
| height= | pixel values | Controls the height of the image. | ||
| align= | left right | Sets the align of the image so that text will wrap around the image. Text wraps in the opposite direction of the value. | ||
| border= | pixel values | Controls the border of the image when it is linked. The border doesn't show up when an image is not linked. | ||
| alt= | whatever you want; remember quotation marks | Sets the text to be shown if a) the reader has a text-only browser or b) when the reader puts the mouse pointer over a image. | ||
| ismap | none | Tells the browser that the image uses a server-side imagemap. | ||
| usemap= | name of the map | This tells the browser which client-side imagemap the image will use. | ||