Thursday, February 19, 2015


TagWhat it isWhen to use it
<a>Anchor (most commonly a link)Vital. Use to create links in content. Use the title attribute whenever the contents of the <a>…</a> pair do not accurately describe what you’ll get from selecting the link. Title attribute often displays as a tooltip in visual browsers, which may be a helpful usability aid.
<abbr>Defines an abbreviationWorks in a similar way to <dfn> and <acronym>, using atitle attribute (displays a tooltip in standard visual browsers). e.g. <abbr title=”Hypertext markup language”>HTML</abbr>
<ACRONYM>Defines an acronymWorks in a similar way to <abbr> and <dfn>, using a titleattribute (displays a tooltip in standard visual browsers).
<ADDRESS>Used for marking up a physical (e.g. mailing) addressNot commonly used. Recommend looking into microformats, which allow for more detail and interoperability.
<APPLET>Inserts a Java appletThe old way to insert a Java app. Use <object> instead today.
<AREA>Hotspot in image mapAvoid image maps where possible. Occasionally necessary.
<BASE>Specifies the base location of the document.Use only when necessary. Adjusts any relative links and paths within the document.
<BASEFONT>Sets default font sizeDisplay info – never use it
<BIG>Larger textDisplay info – never use it
<BLINK>Makes text blinkYou go to hell if you use this
<BLOCKQUOTE>Large quoted block of textUse for any quoted text that constitutes one or more paragraphs (note: should contain <p> tags as well). Use <q>for quotations within a paragraph. Often used in conjunction with <cite> to cite the quotation’s source.
<BODY>Document bodyEssential (unless you’re using frames)
<BR>Line breakThis is arguably display information. Still in common use, but use with restraint.
<B>Bold textDisplay info – never use it
<BUTTON>Used for a standard clickable button within a formOften better than <input type=”button” /> or <input type=”submit” />, as it allows you to assign different styles based on the HTML element alone, whereas differentiating style based on the type of input is less well supported.
<CAPTION>Caption for a table: describes the table’s contentsThe correct way to assign a title to a table
<CENTER>Centred blockDisplay info – never use it. Use <div> or some other block-level tag with the style text-align:center instead
<CITE>Defines a citationDefines the source of a quotation (in conjunction with content in <q> or <blockquote> pairs).
<CODE>Defines an extract of codeNot commonly used. Similar to <pre> tag, but collapses consecutive white spaces and line breaks in the source.
<COL>Identifies a particular column in a tableCan be very useful. e.g. <col class=”namecol”> can be applied to each first column in a series of tables, then the width of each column may be set to be equal in the stylesheet, overriding the table’s natural tendency to adjust its own column widths to fit its contents.
<DFN>Definition of a termWorks in a similar way to <abbr> and <acronym>, using atitle attribute (displays a tooltip in standard visual browsers).
<DIR>Directory listNow deprecated. Use a standard <ul> or other list instead.
<DIV>DivisionSpecifies a logical division within a document. Use it to separate or identify chunks of content that are not otherwise distinguished naturally using other tags.One of the most common HTML tags.
<DL>Definition listp>Contains one or more definition-term / definition-description pairs.
<DT>Definition termUsed as part of a <dt></dt><dd></dd> pair within a definition list (<dl></dl>)
<DD>Definition description
<EM>EmphasisCommonly used in place of the old <i> (italics) tag to indicate emphasis (but less than <strong>)
<FONT>Font settingsDisplay info – never use it
<FORM>Input formEssential for data input
<H1>Level 1 headerAim to have one H1 on each page, containing a description of what the page is about.
<H2>Level 2 headerDefines a section of the page
<H3>Level 3 headerDefines a sub-section of the page (should always follow an H2 in the logical hierarchy)
<H4>Level 4 headerEtc. Less commonly used
<H5>Level 5 headerLess commonly used. Only complex academic documents will break down to this level of detail.
<H6>Level 6 headerLess commonly used
<HEAD>Document headEssential. Contains information about a page that does not constitute content to be communicated as part of the page.
<HR>Horizontal ruleDisplay info with no semantic value – never use it. “Horizontal”, by definition, is a visual attribute.
Read More Tags:


Post a Comment