| <ELEMENT> | Element Name | Block, Inline, etc. | Element’s Parents | Element’s Children 3 | Browser Presentation |
Attributes1 |
Comments |
|---|---|---|---|---|---|---|---|
| Elements occuring outside the body element | |||||||
| <!DOCTYPE> | Document Type Declaration | Not Displayed | first line | none | – | Required. Should be first in the document | |
| <html> | html | root element | <head> and <body> | – | xmlns | Required | |
| <head> | document head | Not Displayed | <html> | <base>, <link>, <meta>, <style>, <script>, <title> | other than the title, all the other child elements are not visible to user | profile, id, dir, lang. NOT class, style, title | Required |
| <base /> | url base for links | Not Displayed | <head> | Empty3 | – | href, no standard attributes1 | |
| <link /> | link | Not Displayed | <head> | Empty3 | – | href, charset, hreflang, type, rel, rev, media | |
| <meta /> | meta | Not Displayed | <head> | Empty3 | – | content, name or http-equiv, scheme | |
| <style> | style | Not Displayed | <head> | text | – | type, media | |
| <script> | script | Not Displayed | <head> (allowed in <body> too. | text or src attribute, not both | – | type, charset, src, defer | do NOT self close with slash. Use end tag |
| <title> | document title | <head> | text only | seen in the chrome of browser | id, dir, lang. NOT class, style, title | Required | |
| Elements Occuring in the <body> | |||||||
| <body> | document body | block | <html> | Block3 | all non-core attributes are deprecated | Required | |
| <a> | Anchor | inline | inline or semantic block | Text and inline3 except <a> | underlined and colored | href, hreflang, rel, charset, type, name, rel, rev, shape (rect), coords | cannot contain other <a> children |
|
<abbr> |
Abbreviation | inline | inline or semantic block | only text / inline3 | dotted underline with cursor, tooltip | title | |
| <acronym> | acronym | inline | inline or semantic block | only text / inline3 | dotted underline with cursor, tooltip | title | |
| <address> | address | blocktext | <blockquote>, <div>, <body>, <form> | inline3 elements, <p> | italic, block | – | |
| <area /> | image map area | Not Displayed | <map> | Empty3 | makes hot areas on image | alt, shape, coords, href, nohref | ‘rect’ is default shape if omitted |
| <bdo> | bi-directional override | inline | inline or semantic block | only text / inline3 | reversed text | dir, lang | |
| <blockquote> | long quote | blocktext | block3 | margin: 1em 40px; | cite | ||
|
<br /> |
break return or forced line break | inline | none | line-break | does not take internationalizaion attributes | use as linebreak in poetry or addresses, not to separate paragraphs. | |
| <button> | push button | inline | any inline3, except form elements and <a> | push button | disabled, name, type 2, value, accesskey, tabindex | Cannot contain <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> as children. | |
| <caption> | caption | <table> | text and inline3 | centered above table | – | must be first child of the table | |
| <cite> | citation | inline | phrase element | text and inline 3 | italicized text | – | – |
| <code> | code | inline | phrase element | text and inline 3 | monospace font | – | – |
| <col /> | column | Not Displayed | <table> | Empty3 | – | char, charoff, span | align & valign allowed, but use CSS instead |
| <colgroup> | column group | Not Displayed | <table> | zero or more <col> | span, char, charoff. align & valign allowed, but use CSS instead | while empty, close with an ending </colgroup> tag. | |
| <dd> | definition description | block | <dl> | Flow3 | indented with a left margin | – | – |
| <del> | delete | inline or block | inline or block | Flow3 | strikethrough | cite, datetime | don’t put block content in a <del> that is inline |
|
<dfn> |
definition | inline | phrase element | only text | italic | – | – |
| <div> | generic block element | block | Flow3 | – | – | – | |
| <dl> | definition list | lists (block) | one or more <dd> and <dt> only | – | – | – | |
| <dt> | definition term | block | <dl> | text and inline3 only | – | – | cannot have block elements as children! |
| <em> | emphasized text | inline | phrase element | text and inline3 only | italics | – | – |
| <fieldset> | field set | block | <form> | <legend>, Flow 3 | box around child elements with legend, if any | – | – |
| <form> | form | Block | block element | block elements and block form elements | – | action, method, enctype, accept, accept-charset | cannot nest a <form> within a <form> |
| <h1-6> | headers | heading (block) | body or block | inline and text | varying font sizes and bold | – | – |
| <hr /> | horizontal rule | blocktext (block) | body or block | Empty | horizontal line | – | – |
| <iframe> | internal frame | longdesc, name, src, frameborder, marginwidth, marginheight, scrolling, align, height, width |
|||||
| <img /> | image | inline | inline or semantic block | Empty | The image identified in the src | src, alt, longdesc, usemap, ismap | height and width are optional attributes best omitted. |
| <input /> | input | inline | inside a semantic block located in <form> | Empty | depends on type | type, name, value, check, disabled, readonly, size, maxlength, src, alt, usemap, accept | type defaults to text if not declared, but you should declare it |
| <ins> | Insert | inline or surrounding blocks | Flow | underlined | cite, datetime | don’t put block content in a <del> that is inline | |
| <kbd> | keyboard | inline | phrase element | text (and inline) | monospace font | – | should really just be text |
| <label> | label | inline | semantic block within a <form> | text and inline | – | for, accesskey | cannot contain child <label> elements |
| <legend> | caption for fieldset | <fieldset> | inline and text | top left section of the fieldset box | – | ||
| <li> | list item | block | <ul> or <ol> | Flow | bulleted new line | – | |
| <map> | image map | Not Displayed | one or more <area> OR block | – | ID, name | ||
| <object> | object | <param>, if included, should come first. Flow | declare, classid, codebase, date, type, codetype, archive, standby, usemap, name, tabindex | allowed in <head> by spec. height and width are optional attributes best omitted. | |||
|
<ol> |
ordered list | lists (block) | block | one or more <li> elements | indented <li>s with numeric bullets | – | |
| <optgroup> | option group | <select> | one or more <option> | bold, non-selectable header for a group of indented options. | label, disabled | ||
| <option> | option | <select>, or within <optgroup> | textnode | appears within the select drop down as new row | selected, disabled, label, value | if value is omitted, submitted value is the text node value | |
| <p> | paragraph | block | block | inline and text | new line of text | – | – |
| <param /> | parameter | invisible | <object> | none | not visible, though may cause visual effects | id, name, value, valuetype, type | can place params as name/value pairs in the object element |
| <pre> | preformatted text | blocktext (block) | inline, except <img>, <object>, <sub> & <sup> | monospace font and nowrap whitespace | – | Cannot contain <img>, <object>, <sub>, or <sup> elements | |
| <q> | inline quotation | inline | inline or semantic block | inline and text | quotes at start and end of content | cite (URL) | quote style depends on language. Poor browser support of quotes |
| <samp> | sample computer code | inline | phrase element | inline | monospace font | – | – |
| <select> | option selector | inline | inline or semantic block within <form> | one or more <option> required, optional <optgroup> | drop down list | name, size, multiple, disabled, tabindex | |
| <span> | span (generic non-semantic container) | inline | inline or semantic block | text or inline | – | – | |
| <strong> | strong emphasized text | inline | phrase element | text or inline | bolder text | – | don’t use in <h1-6> as those are already emphasized |
| <sub> | subscript | inline | inline or semantic block | text or inline | smaller, subscripted text | – | do not include in <pre> |
| <sup> | superscript | inline | inline or semantic block | text or inline | smaller, superscript text | – | cannot be a child of <pre> |
| <table> | data table | block | block or body | <caption>?, (<col>*|<colgroup>*), <thead>?, <tfoot>?, (<tbody>+|<tr>+)) 4 | data table | summary (width, border, frame, rules, cellspacing, cellpadding) |
width, border, cellspacing, cellpadding are allowed, but better to use CSS.
|
| <tbody> | table body | block | <table> | one or more <tr> | appears between thead and tfoot | char, charoff | in code flow, comes AFTER <tfoot> |
| <td> | table data cell | block | <tr> | Flow | vertical align middle, text-align: left | abbr, axis, headers, scope, rowspan, colspan, width, align & valign allowed, but use CSS instead |
|
| <textarea> | text area | block | <form> or block within form | textnode or no text | multi-line text field displaying textnode if there is one | rows, cols, name, disabled, readonly | |
| <tfoot> | table footer | block | <table> only | one or more <tr> | appears at bottom of table | char, charoff, width, align & valign allowed, but use CSS instead | comes before <tbody> |
| <th> | table header cell | block | <tr> only | Flow | bold and center | abbr, axis, headers, scope, rowspan, colspan, char, charoff. width, align & valign allowed, but use CSS instead | |
| <thead> | table head | block | <table> only | one or more <tr> only | at top of table | char, charoff. width, align & valign allowed, but use CSS instead | follows opening <table> or <caption> if there is one. |
| <tr> | table row | block | <table>, <thead>, <tfoot> or <tbody> | one or more <th> or <td> | new line | char, charoff. width, align & valign allowed, but use CSS instead | if any of the parent elements are present, there must be at least one <tr> |
| <ul> | unordered list | lists (block) | block | one or more <li> elements | indented, bulleted on <li>s | – | – |
| <var> | variable | inline | phrase element | text (and inline) | italic | – | No reason to include inline elements. Should be just text as child |
| Elements you should not be using, that are still valid | <tt> | teletype | inline | inline or semantic block | text (and inline) | monospace | – | Purely presentational. Should be deprecated, but aren’t yet. |
| <i> | italic | italic | |||||
| <b> | bold | bold | |||||
| <big> | big font | bigger font | |||||
| <small> | small font | smaller font | |||||
| <frame /> | frame | block | <frameset> | Empty | page within a page |
name, src, longdesc, security. frameborder, |
only allowed in frameset DTD |
| <frameset> | frameset | block | <body> | <frame>, <frameset>, <noframes> | divides the browser window | cols, rows. | only allowed in frameset DTD |
| <noframes> | no frames | block | <frameset> | Flow | – | – | can be found outside of frameset (for no iframe support) |
| <noscript> | no script | block | Flow | Flow | – | – | Your site should work without scripts, so should not be necessary |
Note:
- Attributes: All elements accept the standard and internationalization attributes of id, class, title, style, dir, and lang unless otherwise noted. The attributes column lists elements specific attributes and exceptions to the core attributes. Required attributes have been emphasized.
- Even though the type attribute is not required by the specifications, always define type because IE is stupid.
- Inline: <a>, <br>, <span>, <bdo>, <map>, <object>, <img>, <tt>, <em>, <strong>, <dfn>, <code>, <q>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <sub>, <sup>, <input>, <select>, <textarea>, <label> and<button>
Block:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, <blockquote>, <address>, <fieldset>, <table>
Flow: text < form > and all the inline and block elements
Empty: self closing element, include a slash before the end of the opening tag to self close. Contains no children - Table elements: 0 or 1 optional <caption> element, 0 or more optional <col> elements OR 0 or more optional <colgroup> elements, 0 or 1 optional <thead> element, 0 or 1 optional <tfoot> element, and REQUIRED either one or more <tbody> elements OR one or more <tr> elements.
One thought on “XHTML Elements, their parent, children, attributes and default browser presentation”