Encyclopedia of HTML elements

HTML is a much richer language than what it’s used for. There are 77 elements and each one has a certain purpose. It is possible to find that reason by reading the specification, but who does that? I wrote this list as a way to tell you what I think each of the HTML tags should be used for, common problems you might encounter, and general advise about each one.

I’ve included all the elements from HTML 4.01 Strict. It’s a long one, but I’m sure you have more “tips and tricks” to add to it. Leave a comment and I’ll add yours to the list too. Let’s start off with a list of all the elements:

A, ABBR, ACRONYM, ADDRESS, AREA, B, BASE, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I , IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MAP, META, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, VAR

For people that view this site in a visual browser I added colored bars on all the elements. They represent if an element is recommended to use or not. Green bar means “Use this!”, Yellow means “Consider if you really need it”, and Red means “Don’t use this unless you have a really good reason”.

A – Links, the very foundation of the web

Should have the href attribute, but be sure to not include & in it. Write that as & instead.

Don’t put blocks (divisions, paragraphs) inside of links or you will get a validation error.

If you set display: block on a link, you can set its width and height with CSS.

ABBR – Explain what your abbreviations mean

Abbreviations are words which are short forms of a longer word or phrase. Examples include HTML, int, and Amex

Should have a title attribute with the explaination of your term.

Make sure this explanation is humanly readable (unlike how it’s used in microformats). It’s here to help people not machines.

ACRONYM – Special case of the above where the word is formed from beginning parts of the words in a phrase

No need to use this one, abbr is enough. Do we really need to differ between acronyms and abbreviations? What about initialisms and the other types of words?

ADDRESS – Contact information of some kind

Can be used for more than just street addresses, be creative! E-mail address and other contact info?

AREA – Define links in any shape

Useful if you need clickable links in odd shapes. A possible example of this is a map with clickable regions.

CSS sprites is another way of doing something similar using CSS.

Don’t forget to specify alt text for your area links.

Isn’t the shape of links really design? Should be specified in the CSS then, not in the HTML.

B – Make text look bold

Don’t use. Boldness is design and should be specified in the CSS using font-weight: bold;

If you intended to show that something was very important you can use instead. It describes the meaning better and has the same default styling.

BASE – Change your links to be relative to this address

If you have to use this one, you’re probably doing something wrong. I’ve seen terrible sites using this one.

There’s a very strange Internet Explorer bug with the base element

BDO – For foreign languages (ie. Hebrew), mark text direction

This is a tricky one. I wouldn’t say text direction is structure (and belong to the HTML), but it isn’t design either (and belong in the CSS). Perhaps it’s content?

Text direction can be set in the CSS with the dir attribute

BIG – set larger text relative to surrounding text

Don’t use. This is design and should be in the CSS. Use font-size instead.

BLOCKQUOTE – Longer quotes

Include one or many paragraph(s) inside of this one.

Takes a cite attribute but this isn’t rendered in browsers so use the cite element instead.

Don’t ever use this one for indenting text, there’s margin and padding in CSS for that.

BODY – All your real content goes inside this one

Always use (even though a page without it for strange reasons still validate).

Never use bgcolor, background or the a-/v-/link attributes on body. Those can be set by using CSS instead.

Set a class or id to the body on each of your different pages if you want to style them differently. By using body#contact div, you can easily style all the divs on only the contact page.

BR – Line break

Instead of marking the line-breaks between your items, mark the items! For ordinary text use paragraphs around each text block instead of breaks between them. Use a lists and add a line item around each of the items instead of separating them with line breaks.

A valid use-case is poems, where line breaks are part of poems themselves.

BUTTON – Alternative to inputs with types submit and reset

A much more general way to add buttons to your form elements (Thanks Rowan Lewis for correcting my misstake.)

Allows you to add more than just text as the label, wrap the content you want inside of the button element.

CAPTION – Description of a table

As many other table elements, caption is sometimes hard to style with CSS in some browsers. If you start to get into trouble, use a header instead.

CITE – Source where quoted text originated

Use together with blockquote to connect the quotation and source.

Can be used to mark something as reference by wrapping cite around it. This could be useful if you are talking about a book but don’t have a link to it.

CODE – Computer code example

Perfect for authors writing about computer code.

Don’t fall into the trap of using the lang attribute on code to specify what computer language your code is written in. The specification clearly states that’s not allowed (I need to fix one of my plug-ins that does that on this blog). Thanks trovster.

COL – Used to specify that some table cells belong together in columns

A very nice way of setting attributes of columns of cells in a table. Why not use this to set a class on that last column of cells you want to give that grey background?

Keep using table headers, this is not a replacement for them

COLGROUP – Shorter way of specifying table columns

Use colgroup instead of several col elements by setting the span attribute to the number of columns you want to affect.

DD – Description of a term in a definition list

Several dd:s after each other means that there’s many meanings to a certain term.

DEL – Mark deleted text in documents

Good for marking up document revisions, where one author makes changes and what to clearly mark where.

An interesting idea is to use this for version management (together with ins). Probably rare but an interesting idea. An example is how this is used at Wikipedia when comparing historical versions of an article (thanks Fredrico).

I have never seen an example where this element would be appropriate. Very rare.

Some screen readers are uncertain of what to do with the text inside of a del element. Should it be included in the page content or not? Be careful (Thanks Peter Krantz)

DFN – Term that’s being explained by you

Useful when you explain a term in the middle of a sentence. Add dfn around the word you explain.

A definition list is more appropriate if you want to explain many terms at the same time.

DIV – Divider into logical parts

Divide the page into logical parts. Typical examples are “header”, “content”, “sidebar” and “footer”.

Divisions should only be used when there’s no other better fitted element available. Keep the number of divs down as much as you can.

A similar element for inline stuff is the span element

DL – List of definitions

Very useful for glossaries where you provide a term and it’s explanation.

I use it much wider than just the above, more like a structure for matching key and value. Say you have a list of people and their preferred colors. I would use a definition for that.

Use dt for the key and dd for the value

DT – What you define in a definition list

If you put two dt elements after each other that means that the two terms means the same. The explaination that follows applies to them both.

EM – Important phrase

Use this to mark some part of your text a bit more important. Try not the think of the default styling, think importance.

If you want something stronger, use strong.

It’s not always possible to just change a italic element to a em element, are you really using it to mark up importance?

FIELDSET – Groups form elements that belong together

Perfect if you have a first and last name in two different text fields and want to show that they belong together.

A legend element should be put inside of the fieldset to label it.

Fieldset borders are tricky with different browsers, I generally disable them with border: none.

Don’t fall into the trap of using fieldsets for non-form elements. They are meant for grouping form elements, nothing else.

FORM – Wrapper for all kinds of form fields

Use the form element just like you would use a div, like a wrapper.

If possible make sure your forms work without javascript enabled. I’m not asking that your sliding-fadeout-gradients are working, just make sure the basic stuff gets through.

H1, H2, H3, H4, H5, H6 – Headings for your sections

One of the most important elements in HTML. If you don’t have any headers on a certain page you’re most certainly doing something wrong. Think about your structure!

Always start with the h1 element. If you don’t like the size, change it with font-size.

Don’t skip levels of headings. If you have a h5 on the page, all four previous levels should be there too.

Different browsers have different default sizes for headings. Make sure you set the size for every one of them to get rid of that problem.

For validation, you only need a title inside this element, but typical documents have a link element for the stylesheet, a script element for the javascript, and some meta data inside meta elements.

HR – Horizontal line

Don’t use. This is design, the same effect can be accomplished through border-bottom in CSS.

Some people claim that hr is a section divider, but isn’t that what we have divisions for?

HTML – Wrapper for everything except the doctype

The HTML element can be used as a wrapper (an outer div around all content). Use this to get rid of one unnessesary wrapper.

Also takes the lang attribute that tells browsers what lanugage the site is written in (thanks Ben Millard). This is extra useful for screen readers that needs to change their pronunciations. Language codes are available through the US Library of congress. Use the two letter variants.

I – Italic text

Don’t use. Purely presentational way of adding italic styling. Use the em element instead.

IMG – Embedded image

Used incorrectly very frequently. IMG should only be used for images that can be considered content on the page. An example of this is a thumbnail gallery or a helpful image somehow connected to the text. Things that shouldn’t be img elements are decorations: rounded corners, bullet points in lists, and page dividers. Use background-image in CSS for that instead.

If the image contains information that you want to convey, use the alt attribute to give that information to user-agents that doesn’t load images.

INPUT – Radio button, check box, text field, button, or hidden data

Element used as a building block for form fields. The type is determined by the setting the type attribute to either radio, checkbox, text, image, submit, reset, or hidden.

Other elements normally used together with this one is select and textarea.

Make sure you add an id to each input field and tie an label element to it. No input should be without it.

Wrap your inputs and labels in a fieldset, paragraph or div to stop the validator from complaining that elements are not allowed where they are.

INS – Inserted text

Similar to del, this element can be used to mark deleted text.

Might be useful for tracking changes in your document but again, I have never seen a site where this element was needed.

KBD – Text that should be entered on the keyboard

One of the numerous elements that can be used to mark up documents about computers. Rarely used.

How do you know your user will use the keyboard?

LABEL – Text that describes a corresponding form field

The for attribute associates this element with a form field id. Important out of an accessibility standpoint, both because it gives screen readers better info and because it makes form fields clickable (in most browsers, but not Safari, thanks Roger).

LEGEND – Heading for a fieldset element

Wrap this element inside each of your fieldsets to provide a reason why you think the following fields belong together. Typical examples include “Credit card”, “Full address”, and “Shipment details”.

Somewhat tricky to style since browsers handle them very differently. I tend to keep them pretty plain.

LI – Items in ordered or unordered lists

Gets different styling by default depending on browser: padding-left or margin-left. If you want to change the indention, make sure you first reset the other one.

Most often used to define external stylesheets for the document (use rel="stylesheet")…

.. but can be used to define other types of relations too. Some browsers show custom rel types to users like a list of bookmarks.

MAP – Wrapper for image map areas

Used together with the area element for image maps.

META – Information about the document

Can be used to for custom information about the document.

Search engines use some predefined names that you should know about.

NOSCRIPT – Content to show if the browser doesn’t support javascript

The default should be to show content that does not require javascript, we don’t need a certain element for that.

OBJECT – Embedding other types of information in to document

The new way of adding flash, quicktime and other multimedia content to your site.

OL – Ordered list of items

Ordering means that the content only makes sense in that order. This means that a step-by-step recipe is an ordered list, but a basic navigation menu is not (see unordered list).

OPTGROUP – Group your option elements

One of the least known elements in HTML. Impress your friends!

Similar to fieldset but for option elements. Wraps around them and uses the label attribute to name the group.

Nesting of optgroups is not allowed.

OPTION – One of the choices in a select

If you set the value attribute, that value is sent instead of the text inside the element.

P – Wrapper around each of your paragraphs

Replacement for line breaks (the br element).

By wrapping all your paragraphs in a p element you can easily change the space between them with margin or padding.

PARAM – Set properties on embedded objects

The exact param names used depends on what you embed, check the documentation for the document you are dealing with.

PRE – Preformatted text

Used to define that a certain piece of text is formatted (designed) in the HTML. While this is most often a bad idea there’s applications in e.g. ASCII art, text-only e-mails, and Python code (thanks zcorpan).

Use white-space: pre; and font-family: monospace; to get the “pre design” with CSS.

Q – Add quotations in a language independent way

Instead of setting what kind of quotes you use (there are several you know), you simply define that you’re dealing with a quote and work out the details in a separate file.

Good idea, but no support by IE6 makes it a lot less useful.

SAMP – Sample text or characters

Seriously, don’t we have enough of the computer related elements already? If you need sample text that isn’t code or keyboard type-in then fine, use this one.

SCRIPT – Run javascript on your site

Remember to set the type attribute to text/javascript if that’s what you use. Language is no longer needed.

SELECT – Let the user select among a number of fixed options

Don’t forget to use a label for this element too.

It’s easy to make selects work without javascript, just add a submit button. Also check so that all options can be reached with the keyboard.

Selects take the size attribute which makes you able to show more than one option at the time. If you set size to something larger than one, you can use CSS to set a height.

SMALL – Presentational way of setting font-size

Don’t use. A presentational way of saying that some text is smaller than the rest. Use font-size in CSS instead!

I’ve seen some interesting ideas of using this tag for “fine print”, those copyright messages that always are tiny. The idea is that the size really is tied to the content, and that small therefore is a good semantic way of representing it. I’m not sure, for now I won’t recommend people using it.

SPAN – Similar to div but for inline elements

Can be used when you don’t find a better representation. Make sure the class you set describes what you mark up instead.

STRONG – Mark something as very important

Stronger than emphasis with the em element.

STYLE – Add style info to your page

Needs to be in the head section of the page, inside body isn’t valid.

Don’t forget to set the type attribute to “text/css”.

In my opinion, using link separates the design better than using the style element. It also makes the browser able to cache the CSS.

SUB, SUP – Raised and lowered characters

Don’t use for lowering and raising letters with no semantic meaning.

Use in math or chemical formulas (see comments).

TABLE – Row and column based data

Misused in the “tables for layout” days. Tables. Are. Not. For. Layout.

Proper use is for scientific, statistical, or other cell-based data.

Frequently forgotten elements include the thead, tbody, and th elements.

If you nest tables you are doing something wrong.

You can set border-collapse: collapse; to get rid of the annoying default cellpadding. No attributes need to be set in the HTML.

Combining border-collapse and a border on td elements makes it possible to get nice 1 pixel borders between all cells.

TBODY – Container meant to separate the body of your table from your headers

Simply use this as a way to style your body different from your headers. Have th elements both in the tbody and thead? Then use tbody th { ... } to style only the ones in the header.

You can use several tbody elements, something that can be a nice way to divide one big table into several logical parts.

TD – Represent one cell of data

Use padding, margin and border on td and th to change the spacing inside your table.

TEXTAREA – Let users send big chunks of text

The size can be specified with height and width in CSS.

Don’t forget a corresponding label element.

TFOOT – Extra information in the bottom of a table

I rarely use this one, most often a caption is what I want below.

A possible use case for tfoot is for adding column sums at the bottom of the table.

TH – Specify that a certain cell is not part of the data, it just describes the other cells.

Very convenient way of specifying a different style for the headers of the table.

Takes the scope attribute if you want to specify what cells a certain table header describes.

THEAD – Container for (some of) the metadata for a table

Some browsers repeat this element on all pages when printing long tables, very useful!

TITLE – Topic of the page summarised in a few words

Single most important part of your site, think a while before setting it.

Meant for a single page, not the whole site.

Required for validation, and gives strange validation errors about “head not closed” if not included.

TR – Way of specifying rows of table cells

Very few browsers support styling the tr element, so set your styles on the containing table cells instead. Example: If you want alternating row colors you can set a class on the tr element but style the table cells with tr.odd td { background: ... }.

TT – Text formatted like if it was written on a typewriter

Don’t use. Presentational way of adding text that looks like it was written on a typewriter. Use font-family: monospace; to get the same effect with CSS.

UL – List where the order doesn’t matter

Perfect for navigation menus, don’t use br for that.

See tip on cross browser use with the ol element.

VAR – Variable of some kind

Another element from the computer science area. Some people claim this can be used for other variables too, but that’s a really rare use case. No need to remember.

What did I miss? Please leave a comment!

77 responses to “Encyclopedia of HTML elements

  1. * The CITE element has not a cite attribute.
    * INS and DEL may be used at the Wikipedia when comparing historical versions of an article.
    * Element I may not be always safely replaced by EM.

  2. I’ve had to learn just how complecated it is…

    Over the past few weeks I’ve been writing a script that:
    – Corrects bad tag nesting: [b][i][/b][/i].
    – Cleans element attributes, removing those which don’t belong on the current element and adding the required attributes with their default values.
    – Removes any elements which don’t belong unter their parent elements: [a][p]text[/p][/a] => [a]text[/a].
    – And so much more…

    My head hurts.

  3. I disagree with your NOSCRIPT bashing, so I did some googling. Apparently both PPK and Robert Nyman agree with you.

    “Just do it with javascript” isn’t good enough. Yeah, you could write some DOM that hides a paragraph if javascript is enabled, but to make sure it degrades gracefully, works for all browsers, and selects every element that you want to hide, you will just get bloated code for a simple result. Noscript is semantically correct, less code, and works in every situation where a javascript workaround could.

  4. I also want to have a little nitpick about a few things:

    1. BUTTON elements do have a default action: submit, exactly the same as with an INPUT element with the TYPE attribute set to “submit”.
    2. BUTTON elements give you more control over the button label.
    3. PRE elements are good, they describe exactly the type of content they contain: preformatted text.

    Anyhow, I’m working on a copy of your list with code examples…

  5. @Elliot Swan: Thanks! Now you know the reason for the lack of posts for a couple of days ;)

    @Sean Fraser: Oh, I forgot to tell you about the bars, I’ll add that info.

    @Fredrico: Thanks for the updates, I have no idea what I was thinking with cite.

    @TJ: I think it’s a matter of how you look at javascript. To me it’s a way to add extra stuff, not something that should be required. Thanks for the links. It’s not hard writing javascript that hides content, even getting it cross browser.

    @Rowan Lewis: Thanks for the fixes, I agree with all of them except the pre element. Hmm… Ok if I add code examples too? It has been on my radar all along.

  6. “To me it’s a way to add extra stuff, not something that should be required”. A fair evaluation. I wish I could always provide alternate solution, but it’s not easy.

    Thanks for this list. It’s a great expansion of w3school’s indispensable HTML reference.

  7. Emil, the reason I’m pro PRE element is because its the best thing suited for the job, I’ve known people to use display:block; on CODE elements, but that is wrong, since its a strictly inline element.

  8. Thank you for an interesting summary! Contrary to what you write, I think that HTML isn’t rich at all. It has a background in computer science publication which is evident when looking at the domain specific elements KBD, VAR, etc.

    Some other feedback:

    SUB, SUP: They just say that content should go up or down. This means that you can not parse any valuable meaning from them (is the expression squared or is it a footnote reference?). What practical use can you make from that?

    INS, DEL: Although they mean something many browsing devices do not know what to do with them. Is it clear to a user that something has been deleted just because you style it with strikethrough? Some screen readers ignore these elements and read all of the text which may have unintended consequences. Be careful.

    HR: This element actually menas something. It acts as a section divider and is there even when styling is switched off. DIV has no meaning and should be used to structure the document without affecting the content. Unfortunately the name implies a horizontal line. In XHTML2 it has been renamed to separator which properly describes it’s use.

    I, B: Well, these actually have a meaning if your content is about typography. But maybe that is a special case.

  9. @Peter Krantz: It isn’t contrary to what I write at all, it just has to do with what you compare with. Modern HTML is a lot richer than oldfashoned table layouts. That was what I was getting at with my comment. HTML certainly lacks elements from areas outside of the computer science domain.

    SUP and SUB: After some consideration I agree. I was not thinking of “to the square of” or “atom number” rather than just design like the spec states. Updated.

    INS and DEL: Text updated, I had no idea.

    HR: I don’t agree. In my world div has the semantical meaning of representing a section of the page, a division. This is what HR tries to define too, but instead of marking the section it marks the space in between them. Similar to BR and simply not the best way of doing things.

    I and B: You could say that about all elements. “If you write about horizontal lines HR is a semantical element”. It might be valid use, but like you say, it’s a border case .

  10. <html> is very useful for setting the primary language of the document via the lang attribute.

    The reason many tags are optional is because they can be inferred programattically. Many end tags are optional in HTML so that code-heavy structures (like lists and tables) aren’t quite so inefficient.

    You can set images via the background shorthand property in CSS. This allows a colour to be set as a fallback for areas the image doesn’t cover and it will be used when the image cannot be displayed.

    A user without a keyboard (or assistive peripherals capable of sending keycodes to the device) obviously can’t use the contents of <kbd>. Explain the same operation when using a mouse (or equivalen assistive peripheral) if you are that worried about device independance. :P

    You can use multiple <tbody> elements in a <table> if the table has several sections. An use-case example of this would be the final stages of the FIFA 2006 Tournament.

    Typo: In the TR section, you refer to “th” instead.

    I think marking up your tag names (like you do with CSS property names) would make these explanations easier to follow. Using the same case for all tag names would help, too; currently some are uppercase and some are lowercase.

    (EDIT) Your use of <dt> in the article doesn’t seem right, even when taking a “key=>value” interpretatation of. You often include a description (value) of the tag name as part of the term (key) when descriptions (values) should be in <dd>s?

    I’d suggest using headings and paragraphs instead of an enourmous <dl>. Headings would better describe the structure of the document by spliting the content area subsections, since each tag has a significant amount of content about it.

  11. Pingback: Tip(z) » HTML-elementen - med kommentarer
  12. Pingback: pristina.org | everything design » links for 2006-09-21
  13. @Ben Millard: Thanks for your comments, the comment section is becomming a resource in itself. I updated the lists on some places.

    I think the use of a dl is ok here. It is a list of elements, not headers. This is certainly key -> value where you can look up an element (key) and see the tips connected to it (values). I only use caps in the dt as far as I see. That’s the intended way.

    Thanks again.

  14. ABBR is for abbreviations, not terms.

    ADDRESS is for contact information about the author, not addresses.

    I disagree about the use of B. If you use bold for a purpose of which HTML doesn’t have an element type (e.g., the name of a product) then B is appropriate and STRONG is not. EM and STRONG are not replacements for B and I.

    BDO is for rtl text. CSS is an optional layer and the text should still be readable without CSS, so BDO should be used when you want bidi-override.

    CITE can also be used for references.

    EM is for stress emphasis, not importance. STRONG is importance (see Web Apps).

    HR isn’t a section divider, it’s a paragraph divider. They are common in books as “* * *” or some such which represents, e.g., “meanwhile” or “later on”. (This will eventually be defined in Web Apps.)

    The HTML element can’t be used just like any DIV. It is specifically the root element of an HTML document and may not be used elsewhere.

    KBD is about user input, not specifically keyboard user input. Also note that keyboard buttons are not user input. (Web Apps defines numerious ways to nest KBD/SAMP to represent different things.)

    NOSCRIPT is only useful for document.write() scripts, which arguably should be avoided anyway.

    PRE: Preformatted text means that line breaks and white space is significant. Applications other than ASCII art includes text-only e-mails and Python code.

    SAMP is for computer output.

    SUB/SUP, while they are presentational by nature, HTML doesn’t have an element which represents “the power of” in the mathemathical sense, so if you don’t intend to use MathML or some other math markup SUP is better than SPAN to express “the power of” (and other things), because at least it has correct typographical representation and typographical representations are not limited to visual presentations (screen readers could announce superscript, for instance). (In Web Apps, they are appropriate when the absense of them would change the meaning.)

    VAR is not only for computer variables, but for any type of variable, and can be used in general prose.

  15. @zcorpan:
    ABBR, I didn’t want to use the “abbrreviations” word at first because people might not know what it means. I change the text to use it but explains it below instead.

    ADDRESS, HTML, VAR, updated the wording there.

    B, I, SUP, SUB: This is about structure, we can’t start using elements just because their default look in some browser. I don’t agree.

    BDO, you can also represent this in the content, by using certain UTF-8 characters. I think that’s a better way than claiming this has with semantics or structure to do. Where’s the direction for western text?

    Thanks for your comments. Our opinions seems to differ on some points, but I think that’s mostly because you base your statements on Web Apps and I base mine on what feels right for me.

  16. Pingback: links for 2006-09-21 | blog.ftofani.com
  17. Pingback: zean.no-ip.info » Encyclopedia of HTML elements
  18. this is very very helpfull ;) xpcialy 4 those who have limited knowledge of html ;)

    can i link it to my blog ;)

    thank you very much ^^

  19. Pingback: Ramblings From the Abyss of Insanity » Blog catch-up
  20. Pingback: meneame.net
  21. I’ve always wondered why browsers render PRE as monospace, when that’s the purpose of tt.
    Nothing is stopping PRE from being rendered as variable width text.

  22. BODY – All (…)
    Always use (even though a page without it for strange reasons still validate).

    Why? Is there a special reason for this?

  23. @me: Yeah, the default styling is very strange in some cases…

    @blaise: Good question! I use it because I think it’s a nice way of separating what’s meta information about the page and what’s the real content. You can also use it as a wrapper :)

  24. Pingback: Santhosh Online › links for 2006-09-22
  25. First, I’d like to say, you put a lot of work into this, and thanks for doing it. It looks very useful. But I do have some disagreements with your definitions, along the lines of zcorpan above.

    If something is really just “presentational” and not “semantic” at all, then nothing should happen to the meaning if we alter the presentation. Consider SUP when used in mathematics:

    X2 vs. X2

    The physical positioning of the “2” means something, just like a physical line break in a poem.

  26. @Evan: If we markup that example with X<span class=”powerof”>2</span> we don’t change the meaning by removing style. You see what I mean?

  27. Pingback: links for 2006-09-22 « Sri’s Blog
  28. Pingback: links for 2006-09-22 at SridhaReena
  29. Pingback: links for 2006-09-23 « Sanjeev.NET
  30. May I translate parts of this list? Of course I’ll link here, as a reference.
    @Emil: I agree with Evan. <sup>/<sub> does have a meaning, even if it may vary depending on whether it is used in mathematics, as a note, or in e.g. chemistry. Even if it’s not the “perfect” element there is a need to specify raised and lowered characters, even when CSS is turned off, and since the elements <pow>, <base>, <note>, <elcharge> (and quite a few more if you include various terms in physics and chemistry) don’t exist, I think we might as well use <sup>/<sub>.

  31. Pingback: Links for 2006-09-22 (via Cogmios.nl)
  32. @Dan Pettersson: yes you may translate it. Just make sure the original gets a link from somewhere in the beginning.

    I don’t agree on sub and sub, they are no better than b and i.

  33. But Emil, thats the same reason the PRE element is so important, it has to represent preformatted text no matter what, you can’t just place the text in a paragraph and style it with CSS, because what then happens to search engines, text browsers and screen readers?

    By the way, you’re never on IRC…?

  34. I bet not everyoen will ever use all of these tags. Can anyone make a webpage that contains all these tags.

    It is also important to know when to use what.

    And what tags are useful in which case.

    For a webpage that is meant for a general website, you wont be needing all of them.

    what is the SEO value of all these tags?

    Which attributes go with the corresponding tags?

  35. @Rowan Lewis: I’m not sure what you mean. The formating of the text doesn’t matter to Search engines, screen readers and the likes, so why does it matter if it’s inside a pre block or not?

    @Johan: I have used all of the above tags, at least once (including the don’t-use ones. The article is all about when to use what tag, wasn’t that clear?

    I won’t list all the attributes, that’s far too much information at one place. I do list common misstakes with attributes though…

    For SEO: title is most important, then the header tags, followed by strong and em (which has the same weight as b and i).

  36. Emil, because if you place source code or other preformatted text in a P element or something else, it’ll be the bigest mess and completely unreadable.

  37. > For SEO: title is most important, then the header tags, followed by strong and em (which has the same weight as b and i).

    I know that. I even thought that h1 has more weight than h2. Or is it just the consistent use of
    headings as titles of any content block, eg archives, testimonials, etcetera which in turn results into a higher number og headings.

    Also the number of links do count for SEO, search engines take in account links.

    And images?

    I agree that there is a whole lot more to get deeper into.

    Now people dont have an excuse anymore.

  38. I was reading about your discussion of the HR, and I feel that it is still useful. Let’s say, for instance, I have a sidebar that also has my “bottom links” in it, and I’ve used CSS to have it be all pretty with rounded edges and whatnot. I don’t want two seperate divisions, making two of these boxes. I want one box, with all of this information neatly divided. How else to do that but with HR?

  39. First of all; very nice work! It’s a great list, very helpful.

    You said you didn’t want to go too deep into attributes, but I’m wondering; the INS-attribute “datetime” should, according to the W3C be formatted as YYYYMMDD. Is this mandatory? I think it would be more readable (and therefore more valuable) when the author can format this date to his likings (for instance, inserting hyphens).
    This would certainly help when your content is non-English and national date-formatting rules differ from YYYYMMDD.

  40. Pingback: Helping Your User With tabindex - Monday By Noon
  41. But SUB and SUP has semantical meaning. Just like emphasis (EM) and strong emphasis (STRONG) has.

    It’s a way to give meaning to content. What does the superscripted number mean in relation to its context. That’s the important thing and that is why it is not simply just presentational. Just like EM and STRONG isn’t.

  42. Pingback: lillbra » Blog Archive » Att tänka på när du knappar html
  43. > KBD: Rarely used.

    Really? If so, that’s probably because FrontPage, etc. don’t use it, and everyone else is glibly dismissive of it.

    > KBD: How do you know your user will use the keyboard?

    If you are documenting a command-line interface, text to be entered into a web form, a command to type at a prompt, or the name of a file to enter into a Save As dialog, chances are good that the user will not be using a mouse for this.

    > SAMP: Seriously, don’t we have enough of the computer related elements already?

    Well, if we’ve got an element for program input (KBD), it only makes sense to have one for program output.

    > SAMP: If you need sample text that isn’t code or keyboard type-in then fine, use this one.

    Such as status messages, error messages, or records output?

    > SMALL: The idea is that the size really is tied to the content…

    The times that I’ve used the element this way, I’ve considered “small” to describe the prominence or importance (rather than the physical size) of the text.

    > VAR: Another element from the computer science area.

    Not exclusively. “Indicates an instance of a variable or program argument.” This includes math variables, or any other kind of placeholder such as “I, [state your name], pledge to …”.

  44. @Brianary: How often do you use the kbd, samp or var elements? I’ve never used any of them on this blog and this site is surely on a computer topic. Now even that out over all sites on the net. I’d say that they are not needed.

    About small, yeah I’ve used it like that too. Strictly speaking, how’s that different than using b(old) and thinking of it like “important”?

  45. I’m a copywriter and while I will probably (O.K. surely) never program a Web site I try to learn as much as I can about how they are built. You site has become a reference for me. Thanks for your dedication and willingness to share.

  46. @Moria: Hi! Glad you like it. I tend to forget that not all of my readers are professional web developers, your comment nicely remind me of that.

  47. Pingback: Abbreviation or Acronym? What’s the Difference? - Monday By Noon
  48. I really like the layout and colors that you chose for this website! It certainly is incredible! :)

  49. Pingback: Enciclopedia de los elementos HTML » CalinSoft | Adictos al Desarrollo Web
  50. I would regard the BDO element as content, since it is used to ensure the correct processing of text itself.

    Also, note that BDO is not the same as the HTML “dir” attribute (or the parallel CSS “direction” property); the latter is absolutely necessary in Hebrew/Arabic documents, whereas BDO is quite an exotic thing.

  51. Oh, I just noticed that BDO has been discussed in the comments. Indeed, there are a few invisible “direction characters” in Unicode, but none of them work in Windows XP the way BDO does. (You could emulate BDO by nesting *each and every* visible/space character within invisible ones, but that’s just silly.)

    And what about the DIR attribute? That is simply impossible to do with “direction characters” (at least in Windows XP), and DIR is extremely important (unlike BDO). So unfortunately, this whole direction business has to be done within HTML.

    CSS has equivalent properties, but why should CSS-less users get strangely ordered text? Direction is a language thing, and thus it’s purely content, just like the LANG attribute.

    Sorry if I’m being boring, the knowledge-sharing urge hit me again. Kudos for this wonderful site! =)

  52. @Rotem: You’re saying that text direction is content but still you want to use HTML to add that info? Isn’t HTML there for structure rather than content? Although I don’t agree when looking at it from an ideology standpoint I do believe you when you talk out of browser compliance. It BDO is one of the few ways to present some text it should certainly stay. Thanks for contributing! :)

  53. Okay, my bad – browsers do support Unicode formatting codes, but many applications don’t. But the point is, it’s extremely difficult to manage these codes: they’re not universally supported, they’re invisible and they can easily create nesting problems. I just came across a W3C answer that recommends using markup for text direction (for the above reasons).

    Maybe these things can be thought of as meta data about the text? Just like you use the LANG attribute to describe the text’s language, you use the DIR attribute and BDO tag to describe its direction. (Okay, I do agree it’s silly to have an element just for this… They could’ve done something like dir=”rtl bdo” instead.)

  54. Hm, I just noticed that you use SMALL in the comment form, yet you encourage people to not use it. So I guessed it’s because of WordPress and thought you should know about it.

    And I looked at your example with a SPAN with the class of “powerof” in order to convey the meaning of SUP but I don’t quite follow, since that would be like having a SPAN with the class “paragraph” instead of P. I agree that SUP can mean a lot, depending on context, but some elements are like that. They are not precise, nor perfect, but they are there, for a reason. I understand how you think about presentation but I don’t think it apply here. Hm… think of it this way: STRONG renders most often with a high boldness because that is how it looks in your head, that is, it is perceived more clearly than the rest. But it has semantic meaning while having a clear sense of how it is rendered. As do SUP and SUB because that is how they look and give meaning. A screen reader (I don’t know if those support the elements but bear with me) wouldn’t look at SPAN as something with semantic meaning (since it shall have none) but SUP and SUB should, just like STRONG.

    By the way, your new photo looks really good (don’t remember the old one though).

    And sorry if I’m not too clear in the text, me too tired but I really thought I should post this comment now lest I would forget about it.

  55. @Peter Vigren: Thanks for your thought-out comment! About small, it’s because I’ve added it there myself, wordpress is not to blame. The explaination is that this site is getting old, if I would redo it today I wouldn’t use it.

    About Sup and Sub: I’m starting to agree. Since this article was written, I’ve slowly changed my mind on them. Sure you can never know what you mean by them (power of, variable index, pure presentation, and so on), but hopefully the context tells you that. In something that looks like a formula, you do know that Sup is always the power of.

    Thanks for the compliment about the photo ;) and even more thanks for the good content.

  56. A couple of things where I agree more with the comments than the original (apart from these, great resource Emil!)

    The superscriptness of the 2 in x2 is part of the content. You could alternatively render it as x^2, in the same way that instead of using [strong] you could wrap text in *asterisks*, but that is not making full use of what HTML has available.
    The subscriptness of the 2 in, for example, H2O is again important to the chemical formula. I don’t accept that it is purely presentational, and it is a big waste of bytes to define a class to be sub/superscript and then wrap all those digits in a span, when there are perfectly good [sub] and [sup] elements.
    We don’t need [big] because we have [strong], [em] and [h1/2/3/4/5/6] to cover the different reasons to emphasise text. Apart from [small], there is no way to de-emphasise text, so I’m happy to use it for that purpose. As it appears are the HTML5 working group (not that that is necessarily a recommentation!)

  57. A great reference for html tags, Emil.
    Especially the anchors to the single tag explanation are very useful.
    Only I miss a link to get back to the top of the page under an explanation.

  58. Hello Emil, great work…

    Many of the debates about your list stem from the history of the tags themselves.

    HTML is derived from IBM’s progression of typesetting languages, starting with GML (Generalized Markup Language), to BookManager, to SGML (Standard Generalized Markup Language), and then cut down to the relative few HTML tags.

    Full typesetting languages can control content meaning in whatever presentation space desired with the thousands of tags available.

    The SUB/SUP tags (and many others) were fought over for years, but they managed to live through committee when they should not have.

    CSS is finally “fixing” this heritage of typesetting origin, by separating content and presentation spaces, but content meaning should never be allowed to be altered by any use of tags to “pretty up” the content itself.

    Using crippled tags in the manner originally designed, without the support required from surrounding tags and attributes of a full typesetting environment can only lead to frustration…

    (I know about the frustration part quiet well, I was there…)

    Again, great work…

    William…

  59. I just noticed, shouldn’t

    Don’t fall into the trap of using fieldset for non-form elements. This is meant for grouping forms, nothing else.

    be

    Don’t fall into the trap of using fieldset for non-form elements. This is meant for grouping form elements, nothing else.

  60. Pingback: Enciclopedia de los elementos HTML | CalinSoft
  61. Pingback: Enciclopedia de los elementos HTML › CalinSoft
  62. Pingback: Enciclopedia de los elementos HTML › calinsoft.com
  63. Pingback: Enciclopedia de los elementos HTML — CalinSoft
Comments are closed.