Where it can be used: Where Flow Content is expected.
Content Model: Optionally one caption element followed by zero or more colgroup elements, followed by one optional thead element, followed by one optional tfoot element (if there is none at the bottom of the table), followed by either (zero or more tbody elements or one or more tr elements), followed by one optional tfoot element (if there is no other tfoot elements earlier in the table).
Attributes: summary, Global Attributes.
Element Part of Subset: Yes.
Element Name: tr.
Categories: None.
Default CSS Display: table-row.
Where it can be used: In thead, tbody, tfoot elements and if there are no tbody elements then can be directly within the table element but after any caption, colgroup and thead elements.
Content Model: If within a thead element then zero or more th elements;
Otherwise, zero or more th and / or td elements.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: th.
Categories: None.
Default CSS Display: table-cell.
Where it can be used: In tr elements.
Content Model: Phrasing Content.
Attributes: colspan, headers, scope, rowspan, Global Attributes.
Element Part of Subset: Yes.
Element Name: td.
Categories: Sectioning Root.
Default CSS Display: table-cell.
Where it can be used: In tr elements that are not in a thead element.
Content Model: Flow Content.
Attributes: colspan, headers, rowspan, Global Attributes.
Element Part of Subset: Yes.
Tables Specification was originally developed by the Internet Engineering Task Force (IETF) after their original HTML 2.0 to add the ability to display tabular data values and has since been integrated into the HTML and XHTML specifications. A simple table is produced by a table element with usually more than one tr for table rows and in each table row is more than one td element for table data cells. These elements are Flow elements except td elements can be next to each other (a kind of 'Inline-Block' if you will, see the CSS article). You can have Flow and Phrasing Content within the table data cells. Because tabular data have headings you can have th elements for table headings within the table rows:
Cascade StyleSheets can provide a flexible way of styling widths, heights, padding and borders, etc. for tables and other elements. The scope attribute tells the browser that the table heading is for the current column (scope="col") or current row (scope="row").
Unfortunately webpage authors have abused the use of tables by using them for general document visual layout purposes which is not what tables are for. Laying your page out with tables actually concretes the layout (preventing environments who don't support tables or don't have much screen like a SmartPhone will display things in a corrupted way) and slows down the downloading and processing of the webpage.
A lot of screen readers do not have the concept of multiple columns and so for instance a three column layout table with the width of 150 pixels and each table cell having their width of 50 pixels; plus this text in the first column:
This is a file full of letters that will detail the ontology of the topic.Figure 68: Column 1 text
In the second column:
Presenting the Mozilla Firefox browser featuring tabbed-browsing, web-standards support and a high multiple operating system, application platform.Figure 69: Column 2 text
And the third column with:
Weather patterns increase producing a landslide taking several farm barns down into the village valley.Figure 70: Column 3 text
Would be read out as:
This is a Presenting the Weather file full Mozilla Firefox patterns of letters browser featuring increase that will tabbed-browsing, producing detail web standards a the support and a landslide ontology high multiple taking of the operating system, several topic. application farm platform. barns down into the village valley.Figure 71: How a screen reader would read a multiple column table
Confused? What if you were using a text-to-speech facility giving you important traffic or destination information while driving? You would curse the author who concreted the layout of the information page with tables. Cascade StyleSheets provide a much quicker and flexible way of laying things out. Including the ability to switch to an alternate layout without changing the physical webpage say switching to a print or speech StyleSheet.
A summary attribute may be used in the table start tag to provide a summary of the table for accessibility purposes. But most, if not all, accessibility tools such as screen readers do not support and never will support the summary attribute as most information used in the summary attribute is never helpful. Mainly because it is an attribute, just like the title and alt attributes, as attribute values are quite limiting when it comes to alternative or advisory content. It is best to use the caption element or other markup before or after the table to provide a helpful table summary.
Element Name: caption.
Categories: None.
Default CSS Display: table-caption.
Where it can be used: As the first element in a table element.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Captions can be stated with a caption element just after the table start tag.
More complex tabular data can also be accomplished by in addition or instead of the scope attribute in the th element; you have an id attribute in the th element and have a headers attribute in the td element where the value of the headers attribute will be a space separated list of thid attribute values that the particular td element falls under.
Where it can be used: In a table element, after any caption and colgroup elements and before any tbody, tfoot and tr elements. Only one thead element per table.
Content Model: Zero or more tr elements.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: tbody.
Categories: None.
Default CSS Display: table-row-group.
Where it can be used: In a table element without any tr elements and after any caption, colgroup and thead elements.
Content Model: Zero or more tr elements.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: tfoot.
Categories: None.
Default CSS Display: table-footer-group.
Where it can be used: In a table element either at the bottom of the table or after any caption, colgroup and thead elements and before any tbody or tr elements. Only one tfoot element per table.
Content Model: Zero or more tr elements.
Attributes: Global Attributes.
Element Part of Subset: Yes.
In the old HTML specification you had to have no tr elements directly within the table element and had to have at least one tbody element. But not in the XHTML and HTML 5 specifications.
Where it can be used: In a table element after any caption element and before any thead, tbody, tfoot and tr elements.
Content Model: If there is no span attribute then zero or more col void elements;
Otherwise if there is a span="" attribute then Empty.
Attributes: span, Global Attributes.
Element Part of Subset: Yes.
Element Name: col.
Categories: None.
Default CSS Display: table-column.
Where it can be used: In a colgroup element that has no span attribute.
Content Model: Empty.
Attributes: span, Global Attributes.
Element Part of Subset: Yes.
Column handling is by default handled by the environment like a web browser based on the row and other cell information. But you can specify column related details using one or more colgroup elements with possibly a span attribute or a colgroup element with more than one col void elements possibly with a span attribute each. The span attribute specifies how many columns are affected. Style can be attached via style, class and id attributes.
A rowspan attribute on any table cell and/or table header can expand the cell over many rows and colspan over many columns - rowgroup and colgroup values are available to the scope attribute if you are using thead, tbody or tfoot in a complex table.
Forms
Element Name: form.
Categories: Flow.
Form Related: Root.
Default CSS Display: block.
Where it can be used: Where Flow Content is expected.
Content Model: Flow Content but without any form descendent elements.
Where it can be used: Where Flow Content is expected (usually in a form element).
Content Model: One optional legend element followed by Flow Content.
Attributes: disabled (boolean), form, name, Global Attributes.
Element Part of Subset: Yes.
Element Name: legend.
Categories: None.
Form Related: Label of fieldset element.
Default CSS Display: block.
Where it can be used: As first child of a fieldset element. Only one legend element per fieldset element.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Forms allow you to provide information or choose options to provide a customised response such as submitting a request form or filling out your profile in a membership scheme or building your online shopping basket and ordering.
To provide a form you may use a form Flow element. action attribute takes a URI to the destination of the form - either an email address or dynamic page like a PHP script or a static/dynamic webpage with JavaScript.
Data can be transferred in a few ways using the method attribute. Most notably are the get value that adds the information to the end of the URI as a querystring or post appends the data to the hidden body of the webpage request.
For good structure, within the form element you could surround each field with a p element. Form controls are Phrasing Content. If you want to provide a title-bordered grouping of the form controls use fieldset and legend elements as:
<form action="response.php" method="post">
<fieldset><legend>The group title text</legend>
<!-- form controls -->
</fieldset>
</form>Figure 74: Form framework with form group
Element Name: label.
Categories: Interactive, Flow, Phrasing.
Form Related: Associated.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content but with no label descendent elements or labelable elements apart from the single form control that is associated with the current label.
Attributes: for, form, Global Attributes.
Element Part of Subset: Yes.
Element Name: input.
Categories: Interactive (if type attribute value is not 'hidden'), Flow, Phrasing.
Form Related: Associated, Listed, Labelable, Resettable, Submittable.
Default CSS Display: inline-block.
Where it can be used: Where Phrasing Content is expected.
Most form controls are provided as an input void element with type, id, name and value attributes. The type attribute dictates what kind of form field it is (hidden, text, search, password, file, checkbox, radio, color, datetime, datetime-local, date, month, week, time, number, range, email, url, tel) or what button type it is (button, submit, image, reset). id attribute is the form field's fragment identifier and to bind its label element to itself and can be used for styling or scripting purposes. One effect of wrapping the form control labels in a label element and binding them with the for attribute against the form control's id attribute not only gives association to screen readers but also if you click on or navigate to the label it will automatically re-focus on the form field itself if the operating system controls usually do. Also the name attribute is used for generating the variable name in the dynamic script that handles the response. To pre-populate the form field you use the value attribute.
You can add a required boolean attribute to most form controls to get the web browser to check that they are not empty before it submits the details (Currently only Opera 9 or higher supports the required boolean attribute). Not all types use all the attributes and some use extra attributes.
Hidden values can be added as:
<input type="hidden" name="sequence" value="third">Figure 75: Hidden form field
Single line text fields; don't need the value attribute but needs the others:
<label for="yaname">Your Name:</label> <input type="text" id="yaname" name="name" value="Your name goes here">Figure 76: Single line text form field
Search text fields; don't need the value attribute but needs the others:
<label for="findit">Search:</label> <input type="search" id="findit" name="search" value="Search text">Figure 77: Search form field
Telephone fields; don't need the value attribute but needs the others:
<label for="mobile">Mobile Number:</label> <input type="tel" id="mobile" name="mobile" value="00000000000">Figure 78: Telephone form field
Password fields are similar to text fields but each character typed is only shown as a star or circle; usually doesn't use the value attribute but does need the others:
<label for="pass">Your Suggested Password:</label> <input type="password" id="pass" name="password">Figure 79: Password form field
File upload fields; don't use the value attribute but needs the others:
<label for="uploadImage">Upload an image:</label> <input type="file" id="uploadImage" name="image">Figure 80: File upload form field
In order for upload forms to work you need to also add an enctype="multipart/form-data" attribute to the form start tag. An accept attribute on the input element will give the browser a selection of comma separated list of MIME Types that will be allowed. Adding a multiple boolean attribute will allow two or more files to be submitted by one field if supported.
Email fields are similar to text fields but will usually have some sort of mini graphic to indicate its difference. When you submit a form, the browser will try to validate if the value in this field conforms to an email address format.
<label for="fromme">Your Email Address:</label> <input type="email" id="fromme" name="email">Figure 81: Email form field
Older browsers will generate a normal text field and so people can still use the field but the browser will not do any validation. Adding a multiple boolean attribute will allow two or more email addresses to be submitted by one field if supported.
URL fields are similar but will try to validate the value to conform to a URI (URL or URN or tag:) format:
<label for="yahome">Your Homepage:</label> <input type="url" id="yahome" name="myhomepage">Figure 82: URL form field
Colour (or Color) Well Controls:
<label for="pickacolour">Pick A Colour:</label> <input type="color" id="pickacolour" name="thecolour" value="#000000">Figure 83: Colour form field
Must always have a colour specified. In this example above, the colour is black (represented in hexadecimal). A reference of the main 147 colours are available from the CSS 3 Color Module.
Temporal data can be entered using the datetime control. Value is a UTC Date and Time:
<label for="dt">Change Date & Time:</label> <input type="datetime" id="dt" name="datetime" value="2008-03-08T14:38:28+00:00">Figure 84: Date & Time form field
A datetime-local control is the same but no timezone as it is a local date and time:
<label for="dtl">Change Date & Time (Local):</label> <input type="datetime-local" id="dtl" name="datetimel" value="2008-03-08T14:38:28">Figure 85: Local Date & Time form field
A date control. Value is a UTC Date:
<label for="eventDay">Choose Date for the event:</label> <input type="date" id="eventDay" name="eventDay" value="2008-03-08">Figure 86: Date form field
A time control. Value is a UTC time:
<label for="t">The Time:</label> <input type="time" id="t" name="time" value="14:38:28">Figure 87: Time form field
A month control. Value is a UTC year and month:
<label for="tom">Set Topic of the Month Date:</label> <input type="month" id="tom" name="tomdate" value="2008-03">Figure 88: Year & Month form field
A week control. Value is a year and a week string:
<label for="c">New Year's Eve is in the last week:</label> <input type="week" id="c" name="newYearEveWeek" value="2008-W52">Figure 89: Year & Week form field
Numbers can also be entered and validated by the number control. Numbers may be integers (digits or whole numbers) or can be float (real or decimal, double, etc) numbers. A plus sign (+) and no digit before a decimal point are invalid. Exponents may also be used with a lowercase 'e'. The minus sign may be used to denote negative numbers and negative exponents.
<label for="tprice">Total:</label> <input type="number" id="tprice" name="total" value="23.26">Figure 90: Number form field
The range control can provide a slider with min and max attributes for the range. step dictates how many numbers to increase or decrease by.
<label for="brightness">Change Brightness:</label> <input type="range" id="brightness" name="brightness" min="0" max="40" step="2">Figure 91: Range (Usually Slider) form field
The autocomplete attribute may be used on the previous form controls to specifically turn autocompletion on (default) or off. This has been supported in all major web browsers for some time at the request of many online banking systems.
<label for="hipass">Your Passcode:</label> <input type="password" id="hipass" name="hipass" autocomplete="off">Figure 92: Form field with auto complete turned off
Checkboxes handle 'if true or false' fields - when ticked gives a value of 'on' to the script and when unticked gives an empty value; don't use the value attribute as this will provide corrupted values:
<label for="wantthis">Do you want this?</label> <input type="checkbox" id="wantthis" name="wantthis">Figure 93: A Checkbox
Checkboxes can be initially ticked or checked:
<label for="wantthis">Do you want this?</label> <input type="checkbox" id="wantthis" name="wantthis" checked>Figure 94: A pre-checked checkbox
Radio buttons provide 'this or this or this' functionality and have the value of the name attribute as the same as each other:
<label for="that1">Pick this one:</label> <input type="radio" id="that1" name="that" value="picked this 1">
<label for="that2">Or pick this one:</label> <input type="radio" id="that2" name="that" value="picked this 2">Figure 95: Radio buttons
One of the radio buttons can also be preset or checked:
<label for="that1">Pick this one</label> <input type="radio" id="that1" name="that" value="picked this 1">
<label for="that2">Or pick this one</label> <input type="radio" id="that2" name="that" value="picked this 2" checked>Figure 96: A pre-selected radio button
Element Name: button.
Categories: Interactive, Flow, Phrasing.
Form Related: Associated, Listed, Labelable, Submittable.
Default CSS Display: inline-block.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content but no Interactive Content.
Buttons don't use the label element but the value attribute for their label.
General purpose buttons can either use the input void element or a button element that can allow a much richer (markup or styled) label:
<input type="button" id="doit" onclick="doit();" value="Do It">
or <button id="doit" onclick="doit();">
<img src="images/action.png" alt=""><br>
<span class="fancyLabel">Do It</span>
</button>Figure 97: Form buttons
The standard submit button:
<input type="submit" id="submitit" value="Send It">Figure 98: Form Submit button
Or an image submit button; uses a src attribute for accessing the source of an image and the alt attribute for providing an alternative text for those environments that can't display images and for screen readers to read out for people who can't see the image:
One option from the selection can be pre-selected:
<select id="box" name="collection">
<option value="orange">Orange Chocolate</option>
<option value="coconut" selected>Coconut Chocolate</option>
<option value="turkish">Turkish Delight</option>
</select>Figure 103: A dropdown selection box with a pre-selected option
It is possible to select more than one at a time by adding a multiple boolean attribute to the select start tag (If you are using PHP as the target of the form then put a pair of square brackets ([ ]) on the end of the value for the name attribute to indicate that you are sending multiple values for this variable):
WebbIE, an MS Windows web browser for blind and visually impaired users does not support multiple option selection – if you are developing an accessible website then you will need to use multiple checkboxes instead.
You can group several options together within the select by wrapping the options in optgroup elements with a label attribute:
Styling (style, class and id) can be used on most fields. For input elements such as text, search, email, url, tel and password you can set the width of the field using either the old size attribute or CSS's width property. Plus on those types you can provide a short hint or tip to aid with the input void element's value by a placeholder attribute. For the select element the old size attribute or the CSS's height property would state how many options are visible - turning the field into a list box.
To disable a form control you could use the disabled boolean attribute or to make input elements of most types including text and password and textarea elements uneditable then just add a readonly boolean attribute to them.
Input controls of type email, url, number and Temporal controls are only supported by Opera 9 and higher but will be standard text controls to other browsers and earlier Opera versions. The range control is supported by Opera 9 and higher and WebKit 525 and higher web browsers such as Safari 3.1, iCab 4.2, OmniWeb 5.8, Epiphany (WebKit Edition) and Chromium 2 and higher based web browsers like Google Chrome 2 and higher and SRWare Iron 2 and higher.
<input type="email" multiple>, <input type="color">, <input type="tel"> and the placeholder attribute are not supported in any browser yet. <input type="file" multiple> is supported in Mozilla 1.9.2 based such as Firefox 3.6. <input type="search"> is supported by WebKit 525 and higher and Chromium based web browsers.
Element Name: datalist.
Categories: Flow, Phrasing.
Form Related: Extra Options.
Default CSS Display: not applicable.
Where it can be used: Where Phrasing Content is expected.
Content Model: Either zero or more option elements or Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: No.
You can provide a list of predefined options for a text, url, tel, email, number, range and Temporal input fields by adding a list attribute with the value of an id attribute on a datalist element. The datalist element contains one or more option elements as the predefined list items.
<label for="htmlinfo">Check information about HTML</label>
<input type="url" id="htmlinfo" name="htmlinfourl" list="infoList">
<datalist id="infoList">
<option value="http://www.w3.org/html/"></option>
<option value="http://www.whatwg.org/"></option>
<option value="http://www.legendscrolls.co.uk/webstandards/html"></option>
</datalist>Figure 106: A form combobox
Using the datalist element will bring up a list box when you click or focus on the input element with the corresponding list attribute and you can choose one of the options or edit the input as usual. The list box uses the option element's value attribute for the item text. Only Opera 9 and higher supports this feature so far.
Element Name: output.
Categories: Flow, Phrasing.
Form Related: Associated, Listed, Labelable, Resettable.
Default CSS Display: inline-block.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: for, form, name, Global Attributes.
Element Part of Subset: No.
The result of a calculation based on for instance two number field elements may be displayed in an output element. The script may use the id attribute value as the target. output element's for attribute may be used with one or more id values to refer to the id attributes of the source form controls. Only Opera 9 and higher supports this so far.
In order to create a public key for a public / private encryption key pair you could use the keygen void element. A name attribute is required and a string of characters to be provided as the encryption salt is also required and provided in the challenge attribute. The default type of encryption key is RSA and can be explicitly stated using the keytype attribute.
The keygen void element is presented as a drop-down selection box with options for the encryption bit strength. Currently Mozilla based like Firefox, Apple WebKit based like Safari, Chromium based like Google Chrome and Presto based like Opera support this element.
More 'events attributes' are usually used on form controls such as scripts could happen when you simply select text within a text field (text, passwordinput void elements, textarea element, etc) by attaching an onselect attribute. When losing focus from a text field or a selection box that the text has changed or you have chosen a different option then an event can be used by a script by using the onchange attribute on those form controls.
The form attribute allows form controls to be associated with a form element without actually being within the form element itself but still within the same document. A form attribute's value must match the id attribute value of the form element. Only Opera 9.5 and higher supports 'free-ranged form controls'.
Gauging Progress
Element Name: progress.
Categories: Flow, Phrasing.
Form Related: Associated, Labelable.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content but no progress descendant elements.
Attributes: form, max, value, Global Attributes.
Element Part of Subset: No.
The progress of an action can be marked up using the progress element and the progress scripting API (Application Programming Interface). The max attribute states the total that represents the completed level of the task in a floating point number form such as 3.0. For the value attribute, states the current value within the range of zero (or 0.0) to the value of the max attribute. This value element is also in floating point number form such as 1.3. If the value attribute is not specified then the progress bar is indeterminate.
The progress element may be associated with a label element and a form element.
Currently no browser supports this yet.
Element Name: meter
Categories: Flow, Phrasing.
Form Related: Associated, Labelable.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content but no meter descendant elements.
Attributes: form, high, low, max, min, optimum, value, Global Attributes.
Element Part of Subset: No.
Gauges such as disk space, file sizes, a fraction statistic from a chart and other measurements should be provided in a meter element.
The value attribute is required and states the actual number of the gauge and the boundaries of the range are specified by the min and max attributes. Partitioning the range into lowband and highband is provided via the low and high attributes. For the optimum value the optimum attribute can be specified.
Units can be specified in a title attribute.
A textual version should also be provided within the start and end tags for environments that do not support meter.
<meter min="0" max="100" value="25" title="percent">25%</meter>Figure 108: A quarter of something
The meter element may be associated with a label element and a form element.
Currently no browser natively supports the meter element yet.
An inline frame allows you to bring in a webpage to be viewed in a kind of scrollable viewbox within the current webpage (only Internet Explorer 4 and higher, Opera 4 and higher and Core Level and higher web browsers support this – so basically all of today's browsers support it):
<iframe src="subpage.html" id="subs" name="subs" class="subFrameDimensions">
<span>Text for obsolete browsers.</span>
</iframe>Figure 109: An inline frame
The src attribute specifies the URI of the webpage to display within the internal frame. id and name provide a way to direct a link using a target attribute with the same value so that the destination webpage will replace the initial webpage in the internal frame. id of course also provides unique identification of the iframe element for scripting, styling and fragment targeting (thatdoc.html#subs) purposes. Frame dimensions can be set with the width and height attributes or with CSS.
Between the start and end tags you can have markup that will be used in environments that don't support internal frames. But those that do will render the frame regardless whether the iframe's webpage was obtained and / or loaded successfully.
A seamless boolean attribute can be added to simulate a 'client-side seamless inclusion'. The iframed webpage will be treated as if it was literally part of the host webpage. So far no browser supports this.
Also a sandboxed="" attribute will lock down functionality on the webpage in the internal frame. Such as forcing it to be a separate origin (which prevents scripts from accessing potential user data amongst other information); plus preventing scripts and plugins from executing, forms from submitting and will prevent links in the internal frame from targeting browsing contexts outside the internal frame.
This attribute may have no value to lock everything down. Otherwise one value or a space separated set of values to relax particular security features for that internal frame. One value is allow-same-origin which allows scripts to access information such as cookies because the iframed webpage is now considered part of the same document origin.
Using allow-top-navigation allows links to target browsing contexts outside the internal frame.
The other values are allow-forms which allows the submission of form data and the allow-scripts value allows scripts to execute.
For instance to just allow forms to submit and scripts to execute but not access outside targets, cookies or other sensitive info:
<iframe sandboxed="allow-forms allow-scripts" src="subpage.html" id="subs" name="subs" class="subFrameDimensions">
<span>Text for obsolete browsers.</span>
</iframe>Figure 110: A sandboxed inline frame
A srcdoc attribute takes html which will be the embedded content of the iframe. This attribute overrides the src attribute.
Currently no browser supports this yet.
Embed
Element Name: embed.
Categories: Embedded, Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Embedded Content is expected.
Content Model: Empty.
Attributes: height, src, type, width, Global Attributes, any other non-namespaced attributes.
Element Part of Subset: Yes.
Notes: Use severely discouraged, should use object element instead.
The embed void element is used by tools still using out-dated code to generate HTML to provide their content. This element is a waste of your time. You should use the object element instead.
Objects
Element Name: object.
Categories: Interactive (if a usemap attribute is present), Embedded, Flow, Phrasing.
Form Related: Associated, Listed, Submittable.
Default CSS Display: inline.
Where it can be used: Where Embedded Content is expected.
Content Model: Zero or more param void elements followed by Transparent.
Attributes: data, form, height, name, type, usemap, width Global Attributes.
Element Part of Subset: Yes.
Element Name: param.
Categories: None.
Default CSS Display: not applicable.
Where it can be used: Before any other content within object elements.
Content Model: Empty.
Attributes: name, value, Global Attributes.
Element Part of Subset: Yes.
The object Embedded element provides a generic inclusion feature that could bring in images or other webpages, Java Applets, audio, video, multimedia like Flash Movies. If used for images you can use the usemap attribute to provide image maps. Variable information can be passed to the object via param void elements within the object element. If the object isn't supported or can't be accessed then any text or other markup other than the param void elements will be used as a freefall fallback.
In the object element you use the data attribute to reference the object as a URI and a type attribute to state the MIME Media Type that is associated with the object. A classid concept can be used for certain scheme-dependant access to the object using the param void element: Microsoft Internet Explorer uses the classid parameter with the clsid: scheme to reference ActiveX Objects. Classic Netscape will think you are trying to load an OLE Object.
Most web browsers including Internet Explorer 5.5 and higher, Mozilla Firefox, Apple Safari and Opera support the java: scheme in the classid parameter (only if there is no data attribute in the object element) to handle Java Applets (people still use them?!?). But for non Java Applet media, web browsers that are not based on Internet Explorer 8 and under do support accessing media using the data and type attributes. Other attributes that can be used include width, height, class, id, etc.
For example:
Flash Movies
<object type="application/x-shockwave-flash" data="myflashmovie.swf" width="400" height="400" id="myflashmovie">
<param name="movie" value="myflashmovie.swf">
<div class="transcript">
<p><cite class="name">Prof Sir</cite>
<q lang="en">Welcome to Graphics Interchange. We will present<br>...</q></p>
</div>
</object>Figure 111: Compact code to bring in Flash into MS Internet Explorer, Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Google Chrome, SRWare Iron, Arora, Konqueror and other similar web browsers.
Current support for Flash: 97.7% of China, India, South Korea, Russia, Taiwan and 99.7% of US, Canada, UK, Germany, France, Japan, Australia, New Zealand support Flash 8 featuring Flash Video (using MP3 Audio, Sorenson Spark or En2 Video).
97.1% of China, India, South Korea, Russia, Taiwan and 99.6% of US, Canada, UK, Germany, France, Japan, Australia, New Zealand support Flash 9 featuring Flash Video (using MP3 Audio, Sorenson Spark, En2 Video or HE-AAC Audio and H.264 Video for High Definition) and Flex 2 and 3 Flash-based applications.
81.8% of China, India, South Korea, Russia, Taiwan and 93.5% of US, Canada, UK, Germany, France, Japan, Australia, New Zealand support Flash 10 featuring Flash Video (MP3, Sorenson Spark, En2 or HE-AAC and H.264 for High Definition), Flex 2 and 3 Flash-based applications, 3D effects, custom effects and advanced text support.
Java Applets
<object width="150" height="80" type="application/x-java-applet">
<param name="classid" value="java:LiveInfo.class">
<param name="JAVA_CODEBASE" value="javaobjects">
<param name="codebase" value="javaobjects">
<param name="code" value="LiveInfo">
<param name="bgcolor" value="000000">
<param name="textcolor" value="ff0000">
<param name="heading" value="Bedrock Info">
<param name="uri" value="http://bedrock.example.com/info/latest.xml">
<p>Live info panel providing the latest information.</p>
<p>Requires <a href="http://java.sun.com/javase/downloads/index.jsp">Java 6 SE Runtime</a>.</p>
<p>Or use the dynamic webpage alternative <a href="http://bedrock.example.com/info.php">Live Info (webpage)</a>.</p>
</object>Figure 112: Code to bring in Java Applets to MS Internet Explorer 5.5 and higher, Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Google Chrome, SRWare Iron and other web browsers with a modern Java SE Runtime installed
Quicktime media
<object type="video/quicktime" data="quicktime.mov" width="400" height="400">
<param name="classid" value="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="quicktime.mov">
<param name="controller" value="true">
<div class="transcript">
<p><cite class="name">Prof Sir</cite>
<q lang="en">Welcome to Graphics Interchange. We will present<br>...</q></p>
</div>
</object>Figure 113: Code to bring in Quicktime media to MS Internet Explorer 5 and higher, Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Google Chrome, SRWare Iron, Arora, Konqueror and other web browsers.
Images
<object type="image/png" data="flowchart.png" width="200" height="200">
<article class="articleText">
<!-- ... -->
<p>A flow chart dipicting...</p>
<!-- ... -->
</article>
</0bject>Figure 114: Code to bring in images to Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Google Chrome, SRWare Iron, Arora, Konqueror and other Core Level and higher web browsers plus MS Internet Explorer 8 and higher Standards Mode.
Webpages
<object type="text/html" data="listings.html" width="400" height="550">
<a href="listings.html">Listings Page</a>
</object>Figure 115: Code to bring in webpages to MS Internet Explorer, Opera, Mozilla Firefox, SeaMonkey, Apple Safari, Google Chrome, SRWare Iron, Arora, Konqueror and other Core Level and higher web browsers.
Don't forget that any text and/or speech and any other relevant information must have an alternative for accessibility purposes such as a transcript of the interview or presentation. Also the actual media such as Flash or Java Applet themselves must be accessible.
It is also best to provide a link to the appropriate plugin for users to download and install if they do not have it.
HTML Webpage Structure, Page 3
