HTML Tags

HTML Structure Elements

  • HTML Element (<html>)

    Description:
    The html element contains the entire document
    Tag:
    <html></html>
    Attributes:
    No essential attributes

  • Head Element (<head>)

    Description:
    The document header that contains other elements that provide information to the browser and search engines.
    Tag:
    <head></head>
    Attributes:
    No Essential Attributes
    Notes:
    The head tag immediately follows the head tag and must be before the body tag. There can be only one head element per document

  • Title Element (<title>)

    Description:
    The title element sets the title that is displayed at the top of the browser window and will be displayed in bookmarks
    Tag:
    <title></title>
    Attributes:
    No Essential Attributes
    Notes:
    Located in the head element

  • Style Element (<style>)

    Description:
    Sets CSS styles for the web page in the head element. This allows you to control numerous style properties from the head section of the page
    Tag:
    <style type="text/css"></style>
    Attributes:
    type="text/css" - Tells the browser to treat the text as CSS
    media - defines the destination medium (screen, print, projection, braille, speech, all), (ex. media="screen")
    Notes:
    Located in the head element. Use the style element to set CSS styles for the page it is contained in.

  • Script Element (<script>)

    Description:
    Contains client side scripts that are executable by the browser
    Tag:
    <script></script>
    Attributes:
    type - script language (ex. type="text/javascript")
    src - URL of the script (ex. src="js/javascript.js")
    Notes:
    If used to include and external file with the src attribute this must be located with the head of the page. If including the script code directly in this tag it can be used in the body.

  • Link Element (<link />)

    Description:
    Used to link to an external CSS style sheet.
    Tag:
    <link href="location.css" rel="stylesheet" type="text/css"/>
    Attributes:
    type - script language (ex. type="text/css")
    rel="stylesheet"
    href="" - The URL or location of the style sheet, either a relative or absolute address.
    media - used for setting a value to display different display properties, ie for print view pages
    Notes:
    Located in the head element. You can use an external CSS style sheet to control the styles for all the web pages in your site from one place. This is superior to having to go through every file wen you want to change a color or some other style.

  • Meta Element (<meta />)

    Description:
    Provides information about the document for search browsers and search engines
    Tag:
    <meta/>
    Attributes:
    http-equiv, name, content, scheme
    Notes:
    Located in the head element. Use meta tags to set a description of your web page, the content type, or keywords to be used by search engines

  • Body Element (<body>)

    Description:
    This is where all the content to be displayed is contained. This element immediately follows the head element of the web page
    Tag:
    <body></body>
    Attributes:
    onload, onunload, style
    Notes:
    The body tag is required unless using frames. You can set style rules here, but it is advised to do so with CSS styles in the head or an external style sheet.

  • Div Element (<div>)

    Description:
    A div is a container that can hold any other element. Great for creating layouts for websites
    Tag:
    <div></div>
    Attributes:
    style - used to apply css styles to this particular div
    id - gives the div a unique identifier for use by css styles or javascript. An id value can only be applied to one element on a page
    class - applies a classification to a div for use by css styles or javascript. There can be multiple divs with the sam class name per page
    width - sets the width of the div. Preferred method is to use CSS
    height - sets the height of the div. Preferred method is to use CSS
    Notes:
    Div elements are block elements that group other elements together and display stretching the width of their container and the height of their content by default. Divs cannot be contained within a <p> tag. Most modern web page layouts are done with divs rather than tables.

  • Span Element (<span>)

    Description:
    A span is a container that can be used to define a string of text.
    Tag:
    <span></span>
    Attributes:
    id, class, style, title
    Notes:
    Span elements are inline elements and can be used to apply styles to a section of text.

  • Horizontal Rule Element (<hr />)

    Description:
    The horizontal rule element is used to separate sections of a web page.
    Tag:
    <hr/>
    Attributes:
    id, class, style, title
    Notes:
    Element is complete with opening tag containing slash at end.

Text and Paragraphs

  • Paragraph Element (<p>)

    Description:
    Used to define a paragraph
    Tag:
    <p></p>
    Attributes:
    id, class, style, title
    Notes:
    Will treat the text it contains as a single element.

  • Heading Element (<h1>)

    Description:
    Transforms text into a large bold faced font to be used as a heading for sections of the page
    Tag:
    <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
    Attributes:
    id, class, style, title
    Notes:
    Heading tags are used as a text heading. They range in size from 1-6 with 1 being the most prominent (biggest) and 6 the least.

  • Line Break Element (<br />)

    Description:
    The line break element forces a line break in the html page.
    Tag:
    <br />
    Attributes:
    id, class, style, title
    Notes:
    The line break can be used to create a new line in text or create more vertical space between elements on a web page.

  • Pre-formatted Element (<pre>)

    Description:
    The pre-formatted element will cause the text it contains to be displayed in the browser in the exact manner in which it is written in the html.
    Tag:
    <pre></pre>
    Attributes:
    id, class, style, title
    Notes:
    This element will cause all text it contains to be displayed in monospace font, exactly as it is in the html, including spaces, tabs and line breaks, without the need for further html formatting.

  • Strong Element (<strong>)

    Description:
    The Strong element will cause the text it contains to be displayed in a stronger emphasis
    Tag:
    <strong></strong>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Subscript Element (<sub>)

    Description:
    The Subscript element will cause the text it contains to be displayed lower than normal
    Tag:
    <sub></sub>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Superscript Element (<sup>)

    Description:
    The Subscript element will cause the text it contains to be displayed higher than normal
    Tag:
    <sup></sup>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Bold Element (<b>)

    Description:
    The Bold element will cause the text it contains to be displayed in a bolder font
    Tag:
    <b></b>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Italics Element (<i>)

    Description:
    The Italics element will cause the text it contains to be displayed in an italicized font
    Tag:
    <i></i>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Big Element (<big>)

    Description:
    Makes text bigger
    Tag:
    <big></big>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Small Element (<small>)

    Description:
    Makes text smaller
    Tag:
    <small></small>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

  • Teletype Element (<tt>)

    Description:
    Displays text in a teletype or monospace format
    Tag:
    <tt></tt>
    Attributes:
    id, class, style, title

  • Teletype Element (<tt>)

    Description:
    Displays text in a teletype or monospace format
    Tag:
    <tt></tt>
    Attributes:
    id, class, style, title
    Notes:
    The same effect can be accomplished with CSS styles and a span element.

HTML Links

  • Anchor Element (<a>)

    Description:
    Use to define links and anchors in web pages.
    Tag:
    <a></a>
    Attributes:
    href - the URL that the link is pointing to
    name - defines an anchor
    rel - forward link types, can be used to keep robots from following (rel="nofollow")

  • Base Element (<base />)

    Description:
    Used to set the base url that all other links will be based off of.
    Tag:
    <base />
    Attributes:
    href - the URL that the link is pointing to

HTML Lists

  • Unordered List Element(<ul>)

    Description:
    Defines an un-ordered list
    Tag:
    <ul></ul>
    Attributes:
    id, class, style, title
    Notes:
    Used to create a list with bullets instead of numbers. This creates/defines the list while the <li> tag defines each item in the list

  • Ordered List Element (<ol>)

    Description:
    Defines an ordered, or numbered list
    Tag:
    <ol></ol>
    Attributes:
    id, class, style, title
    Notes:
    Used to create a list with numbered items. This creates/defines the list while the <li> tag defines each item in the list

  • List Item Element (<li>)

    Description:
    Defines a list item within an ordered or unordered list
    Tag:
    <li></li>
    Attributes:
    id, class, style, title
    Notes:
    The list item element must be used within either an ordered(<ol>) or unordered(<ul>) list. Each item is displayed as a block item.

  • Definition List Element (<dl>)

    Description:
    Defines a definition style list
    Tag:
    <dl></dl>
    Attributes:
    id, class, style, title
    Notes:
    Must contain one <dt> or <dd> element

  • Definition Term Element (<dt>)

    Description:
    The definition term within a definition list.
    Tag:
    <dt></dt>
    Attributes:
    id, class, style, title
    Notes:
    Element cannot be empty and the text may be modified by html text modifiers (ie. <b>)

  • Definition Description Element (<dd>)

    Description:
    The definition description within a definition list.
    Tag:
    <dd></dd>
    Attributes:
    id, class, style, title
    Notes:
    This element can contain other block level elements, such as divisions and paragraphs

HTML Tables

  • Table Element (<table>)

    Description:
    Creates or defines a table.
    Tag:
    <table></table>
    Attributes:
    id, class, style, title, width, cols, rows, border, cellpadding, cellspacing, frame, rules, summary
    Notes:
    This element defines the container for a table. You must include table rows (<tr>) and table cells (<td>).

  • Table Row Element (<tr>)

    Description:
    Defines a row within a table.
    Tag:
    <tr></tr>
    Attributes:
    id, class, style, title, align, valign, char, charoff
    Notes:
    This element must include either table headers (<th>) or table cells (<td>)

  • Table Header Element (<th>)

    Description:
    Defines the contents of a table header.
    Tag:
    <th></th>
    Attributes:
    id, class, style, title, align, valign, char, charoff, rowspan, colspan
    Notes:
    This element is to be included in the first row of a table. Its text will be displayed in bold font.

  • Table Cell Element (<td>)

    Description:
    Defines the contents of a table cell.
    Tag:
    <td></td>
    Attributes:
    id, class, style, title, align, valign, char, charoff, rowspan, colspan
    Notes:
    This element must be contained in a table row

HTML Embedded Content

  • Image Element (<img />)

    Description:
    Used to include an image in a web page.
    Tag:
    <img />
    Attributes:
    id, class, style, title, src, alt, width, height, border
    Notes:
    The source attribute points to the URL of the image. The alt attribute is required by xhtml standards and gives accessibility to text only browsers.

  • Object Element (<object>)

    Description:
    Used to include object such as flash or other types of video and audio players.
    Tag:
    <object></object>
    Attributes:
    id, class, style, title, classid, codebase, declare, data, type, standby, height, width, border, name, hspace, vspace

  • Param Element (<param>)

    Description:
    Used to Initialize and object
    Tag:
    <param></param>
    Attributes:
    name, value, valuetype, type

HTML Forms

  • Form Element (<form>)

    Description:
    Used to define a form
    Tag:
    <form></form>
    Attributes:
    id, class, style, title, action, method, enctype, onsubmit, accept, accept-charset
    Notes:
    The form element contains all the inputs and fields of a form.

  • Fieldset Element (<fieldset>)

    Description:
    Used to group together related parts of a form
    Tag:
    <fieldset></fieldset>
    Attributes:
    id, class, style, title
    Notes:
    The fieldset element groups parts of a form together by surrounding them within a line border.

  • Legend Element (<legend>)

    Description:
    Applies a label to a fieldset
    Tag:
    <legend></legend>
    Attributes:
    id, class, style, title
    Notes:
    The legend element creates a title, or label for parts of a form that are grouped together with the fieldset element.

  • Label Element (<label>)

    Description:
    Labels a form input or element
    Tag:
    <label></label>
    Attributes:
    id, class, style, title, for, onfocus, onblur
    Notes:
    The label element creates a title, or label for form inputs.

  • Input Element (<input />)

    Description:
    Labels a form input or element
    Tag:
    <input />
    Attributes:
    id, class, style, title
    type - One of (text, password, checkbox, radio, submit, reset, file, hidden, image, button)
    name - the name of the control, required on all but the submit and reset inputs
    value - initial value of the control (required for radio and checkbox)
    checked - sets radio button to checked state (ex. checked="checked")
    disabled - disables the control
    readonly - for password inputs
    size - width of the control
    src - The URL for an image control type
    Notes:
    Input elements are used to gather information and to submit or reset the form

  • Textarea Element (<textarea>)

    Description:
    Creates a multi-line input control.
    Tag:
    <textarea></textarea>
    Attributes:
    id, class, style, title, name, rows, cols

  • Select Element (<select>)

    Description:
    Defines a drop down selection menu.
    Tag:
    <select></select>
    Attributes:
    id, class, style, title, name, size, multiple
    Notes:
    The select element must contain option elements to choose from.

  • Option Element (<option>)

    Description:
    Defines different choices in a select menu.
    Tag:
    <option></option>
    Attributes:
    id, class, style, title, selected, label, value
    Notes:
    The closing tag for an option menu is optional

HTML Tutorials