HTML Seriously Are you fricken’ kidding me? We think we know HTML but... Wither Web Standards HTML XHTML Strict HTML 5

HTML

Seriously

Are you fricken’ kidding me?

• We think we know HTML but...

• Wither Web Standards

• HTML

• XHTML Strict

• HTML 5

Structural Markup

Sandra Clark

Semantic / Structural Markup

Using (X)HTML to describe what the content means, not what we want it to look like

After all...

• (X)HTML – markup

• CSS – presentation

• DOM – behavior

– JavaScript

Benefits of Semantic Markup

• Reduces file size

• Reduces bandwidth

• Better Search Engine Results

• Easier Maintenance

• One site can serve many types of users

– Accessibility!

Need Proof?

Problems with Tables

• Large page weight

• Presentation and content are mixed

– Must be downloaded with each page

• Redesigns are expensive

• Visual consistency is harder to maintain

• Harder on cell phones, PDAs

• Inaccessible

<!DOCTYPE...>

<!DOCTYPE ...>

• First line of a page

• Tells the browser what version of HTML is being used and dictates how the page should be rendered

• Required for CSS

<!DOCTYPE ...> and Rendering Modes

• Most browsers still have to support their past mistakes

• Standards Mode

– Render according to WC3 standards, more or

less the same accross browsers

• “Quirks mode”

– Render according to it’s old proprietary

methods, not the same on all browsers!

<!DOCTYPE...> sniffing

• Determines rendering mode

• Only two trigger standards-compliance in all browsers:

– HTML 4.01 Strict

– XHTML 1.0 Strict (minus XML prolog)

• XML prolog throws IE6 back into quirks mode

HTML or XHTML?

• XHTML requires XML standards

– Easier to validate against WC3 validator

– Reduced errors

– All elements must be closed

– Easier to fix problems with CSS, JavaScript

XHTML Performance?

• Can’t serve as XML (IE)

• Browsers still treat as “tag soup”

• No (noticeable) performance gain vs. HTML 4.01

Validation

• Tools

– http://validator.w3c.org/

– HTML Validator Firefox extension

• Why validate?

– Verifies clean document before styling it,

adding DOM behavior

– 1st step when fixing problems

http://validator.w3c.org/

Both are valid

HTML 4.01 Strict

<p>Below is a list.

<p><img src=“m.gif” alt=“”>

<ul>

<li>Lorem ipsum...

<li>Lorem ipsum...

<li>Lorem ipsum...

</ul>

XHTML 1.0 Strict

<p>Below is a list.</p>

<p><img src=“m.gif” alt=“” /></p>

<ul>

<li>Lorem ipsum...</li>



</ul>

TextMust always be enclosed in an

XHTML element (other than <html>,<body>)

Text

<!DOCTYPE...>

<html>

<head>....</head>

<body>

This is some text<br>

<br>This is more text

</body>

<html>

Wrong

Text

Wrong

<!DOCTYPE...>

<html>

<head>....</head>

<body>

This is some text<br>

<br>This is more text

</body>

<html>

Right

<!DOCTYPE...>

<html>

<head>....</head>

<body>

<p>This is some text</p>

<p>This is more text</p>

</body>

<html>

Text

• Text always needs to be within an xHTML element.

• Text outside of an element is referred to as “anonymous text”.

• Text that is only contained within table cells that is not tabular data is considered anonymous text.

Deprecated Elements

• <applet></applet>

• <basefont />

• <center></center>

• <dir></dir>

• <font></font>

• <isindex />

• <menu></menu>

• <s></s>

• <strike></strike>

• <u></u>

All are presentational elements

Deprecated Attributes

• align (table, td, etc.)

• background

• bgcolor

• color

• compact (lists)

• face (fonts)

• height (td, th)

• hspace

• link (body)

• noshade (hr)

• nowrap (td)

• size (font)

• start (ol)

• text (body)

Deprecated Attributes

• type (lists)

• value (li)

• vlink (body)

• width (except for <col /> and <colgroup />)

All are presentational elements

Getting Semantic

Headings

• Create topic structure; break document into more easily understood sections

• Order is important:

<h1>Primary heading</h1> (only 1 per page)

<h2>Secondary heading</h2>

<h3>Tertiary heading</h3>

<h2>Secondary heading II</h2>

Headings

• Never use them for font size, only for meaning

– We can always style them with CSS

Paragraphs

W3C says:

– “The P element represents a paragraph. It

cannot contain block-level elements (including

P itself).

– “We discourage authors from using empty P

elements. User agents should ignore empty P

elements.”

– 9.3.1 Paragraphs: the P element

Line Breaks <br /><body>

<font size=“+2”>Main Heading</font><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>

Aliquam mollis eros a diam. Cras rutrum sollicitudin metus. Nam dictum sem vel turpis.</p>

</body>

Line Breaks <br /><body>

<h1>Main Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Aliquam mollis eros a diam. Cras rutrum sollicitudin metus. Nam dictum sem vel turpis.</p>

</body>

Line Breaks <br />

• Line breaks are probably the most overused element (besides tables)– Use paragraphs <p> instead of using <br /> to

separate paragraph elements

– Use list elements to mark up groupings of elements rather than separating those items with <br />

– Use CSS to set margins, paddings instead of a series of <br />’s.

Emphasis

• <em>...</em>– Content is emphasized– Itaicization is just the browser’s default style

• <strong>...</strong>– Content is strongly emphasized– Bold is just the browser’s defualt style

• Do not use these elements for their visual impact, use CSS for the visual

Cite

• Use when containing citation or reference to other sources.

<p>The book, <cite>Designing with Web Standards</cite>, is a must read for web designers.</p>

Quotations - <blockquote>

• Used for containing long quotations (block level content)

• Include the citation within the <blockquote> in the cite attribute.

<blockquote cite=“...”> example

<blockquote

cite="http://mycom.com/tolkien/twotowers.htm">

<p>They went in single file, running like hounds on

a strong scent, and an eager light was in their

eyes. Nearly due west the broad swath of the

marching Orcs tramped its ugly slot; the sweet grass

of Rohan had been bruised and blackened as they

passed.</p>

</blockquote>

Quotations - <q>

• Used for short, inline quotations

• Not supported by browsers at the moment.

<p>John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home.</q> I think I will get some at Ben and Jerry's, on Gloucester Road.</q></p>

Lists, Ordered <ol>

• Information grouped in a specific order<p>The OODA loop is the cycle of the decision-making

process:</p>

<ol><li>Observation</li><li>Orientation</li><li>Decision</li><li>Action</li>

</ol>

• Don’t want to see numbers? Use CSS.

Lists, Unordered <ul>

• Information grouped in no particular order<p>Main Menu:</p>

<ul><li><a href=“#”>Home</a></li><li><a href=“#”>News</a></li><li><a href=“#”>Calendar</a></li><li><a href=“#”>Contact</a></li>

</ul>

• Don’t want to see bullets? Use CSS.

Lists, Definition <dt>

• Terms and Definition

• Display Information (Caption & Description)<dl>

<dt>Name</dt><dd>Christian Ready</dd><dt>E-mail</dt><dd>[email protected]</dd><dt>Message</dt><dd>Can you tell me how to get to Sesame Street?</dd>

</dt>

Tables

• Tables are still used for tabular data.

• We are all familiar with

– <table></table>

– <tr></tr>

– <td></td>

Table Summary

• <table summary=“”>– Describes the table’s purpose– Never displayed

<table summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">

tablesumcap.html

Table Caption

• <caption></caption>

– Displays a caption describing the table

– Must be placed directly after the <table> tag<table summary="This table charts the number of...">

<caption>Cups of coffee consumed by each senator</caption>

tablesumcap.html

Tables - Columns

• <colgroup>

– defines a group of columns in the table and allows you to set properties of those columns

– Used directly after <table> and before any other tags.

<colgroup span=“30” width=“20”></colgroup>

• Creates a row of 30 cells each 20px in width.

tablecolgroup.html

Tables - Columns

• <col />– Used within <colgroup> to set properties for a

specific column– After the <table> tag and before any of the

other table elements<colgroup>

<col />

</colgroup>

<colgroup span="2">

tablecol.html

Tables - Groupings

• <thead></thead>

• <tfoot></tfoot>

• <tbody></tbody>

• Allow rows <tr> to be grouped into header, footer and body groupings.

tablethead.html

Tables – Associating Cells & Headings (Simple)

• “scope” attribute

– Express relationship of header cells to other

elements in the table

– Used in simple tables

Scope values

• “row”– Header info for the entire row

• “col”– Header info for the entire column

• “rowgroup”– Header info for the entire row group

• “colgroup”– Header info for the entire column group

tablescope.html

Tables – Associating Cells & Headings (Complex)

• “headers” attribute

– Contains the ID’s that are to be associated

with a particular cell.

– Used in constructing complex tables that are

accessible to screen readers for the blind.

tableheader.html

Forms

• <fieldset></fieldset>

– Group releated form items together

• <legend></legend>

– Captions the grouping

• <label></label

– Associate captions and form inputs

tablescope.html

Forms - <fieldset>

• Visual and programmatic way of grouping related inputs together.

• Used in conjunction with the <legend> tag to caption the grouping.

formfieldset.html

Forms - <label>ing inputs

• Implicit label<label>Enter User Name

<input type=“text” />

</label>

• Explicit label<label for=“username”>User Name</label><input type=“text” id=“username” />

formlabel.html

Forms - <select> elements

• <optgroup></optgroup>• Group releated <option> elements together

formoptgroup.html

<div> and <span>

• No semantic meaning

• Used to group related information together for the purposes of styling

• <div> Block-level element

• <span> Inline element

Well, that’s about it

More information

• http://www.w3.org/TR/xhtml1/

• http://www.w3.org/TR/html401/

• http://microformats.org/

• http://htmlmastery.com/

Thank You

Christian [email protected]

http://christianready.com/

Documents

HTML Seriously Are you fricken’ kidding me? We think we know HTML but... Wither Web Standards HTML XHTML Strict HTML 5