Standardista

CSS3, JavaScript and HTML5 explained

XHTML Elements, their parent, children, attributes and default browser presentation

XHTML Elements, their meaning, semantics and attributes
<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,
marginwidth,
marginheight,
noresize,
scrolling also allowed.

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:

  1. 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.
  2. Even though the type attribute is not required by the specifications, always define type because IE is stupid.
  3. 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
  4. 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 Response to “XHTML Elements, their parent, children, attributes and default browser presentation”

  1. [...] tr doesn’t allow form-tags as direct children. Most modern browsers will let you do a lot of crap and so you could use this – but i [...]

Leave a Reply