HTML

1
(No Transcript)
2
HTML

• Seriously

3
Are you fricken kidding me?

• We think we know HTML but...
• Wither Web Standards
• HTML
• XHTML Strict
• HTML 5

4
Structural Markup

• Sandra Clark

5
Semantic / Structural Markup

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

6
After all...

• (X)HTML markup
• CSS presentation
• DOM behavior
• JavaScript

7
Benefits of Semantic Markup

• Reduces file size
• Reduces bandwidth
• Better Search Engine Results
• Easier Maintenance
• One site can serve many types of users
• Accessibility!

8
Need Proof?
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
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

14
lt!DOCTYPE...gt
15
lt!DOCTYPE ...gt

• 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

16
lt!DOCTYPE ...gt 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 its old proprietary methods,
  not the same on all browsers!

17
lt!DOCTYPE...gt 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

18
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

19
XHTML Performance?

• Cant serve as XML (IE)
• Browsers still treat as tag soup
• No (noticeable) performance gain vs. HTML 4.01

20
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

21
Both are valid

• HTML 4.01 Strict

• XHTML 1.0 Strict

• ltpgtBelow is a list.
• ltpgtltimg srcm.gif altgt
• ltulgt
• ltligtLorem ipsum...
• ltligtLorem ipsum...
• ltligtLorem ipsum...
• lt/ulgt

• ltpgtBelow is a list.lt/pgt
• ltpgtltimg srcm.gif alt /gtlt/pgt
• ltulgt
• ltligtLorem ipsum...lt/ligt
• ltligtLorem ipsum...lt/ligt
• ltligtLorem ipsum...lt/ligt
• lt/ulgt

22
Text

• Must always be enclosed in an XHTML element
  (other than lthtmlgt,ltbodygt)

23
Text
Wrong

• lt!DOCTYPE...gt
• lthtmlgt
• ltheadgt....lt/headgt
• ltbodygtThis is some textltbrgtltbrgtThis is more
  text
• lt/bodygt
• lthtmlgt

24
Text

• Wrong

• Right

• lt!DOCTYPE...gt
• lthtmlgt
• ltheadgt....lt/headgt
• ltbodygtThis is some textltbrgtltbrgtThis is more
  text
• lt/bodygt
• lthtmlgt

• lt!DOCTYPE...gt
• lthtmlgt
• ltheadgt....lt/headgt
• ltbodygtltpgtThis is some textlt/pgtltpgtThis is more
  textlt/pgt
• lt/bodygt
• lthtmlgt

25
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.

26
Deprecated Elements

• ltappletgtlt/appletgt
• ltbasefont /gt
• ltcentergtlt/centergt
• ltdirgtlt/dirgt
• ltfontgtlt/fontgt

• ltisindex /gt
• ltmenugtlt/menugt
• ltsgtlt/sgt
• ltstrikegtlt/strikegt
• ltugtlt/ugt

All are presentational elements
27
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)

28
Deprecated Attributes

• type (lists)
• value (li)
• vlink (body)
• width (except for ltcol /gt and ltcolgroup /gt)

All are presentational elements
29
Getting Semantic
30
Headings

• Create topic structure break document into more
  easily understood sections
• Order is important
• lth1gtPrimary headinglt/h1gt (only 1 per page)
• lth2gtSecondary headinglt/h2gt
• lth3gtTertiary headinglt/h3gt
• lth2gtSecondary heading IIlt/h2gt

31
Headings

• Never use them for font size, only for meaning
• We can always style them with CSS

32
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

33
Line Breaks ltbr /gt

• ltbodygtltfont size2gtMain Headinglt/fontgtltbrgtltb
  rgtltpgtLorem ipsum dolor sit amet, consectetur
  adipiscing elit.ltbrgtltbrgt
• Aliquam mollis eros a diam. Cras rutrum
  sollicitudin metus. Nam dictum sem vel
  turpis.lt/pgt
• lt/bodygt

34
Line Breaks ltbr /gt

• ltbodygtlth1gtMain Headinglt/h1gtltpgtLorem ipsum dolor
  sit amet, consectetur adipiscing
  elit.lt/pgtltpgtAliquam mollis eros a diam. Cras
  rutrum sollicitudin metus. Nam dictum sem vel
  turpis.lt/pgt
• lt/bodygt

35
Line Breaks ltbr /gt

• Line breaks are probably the most overused
  element (besides tables)
• Use paragraphs ltpgt instead of using ltbr /gt to
  separate paragraph elements
• Use list elements to mark up groupings of
  elements rather than separating those items with
  ltbr /gt
• Use CSS to set margins, paddings instead of a
  series of ltbr /gts.

36
Emphasis

• ltemgt...lt/emgt
• Content is emphasized
• Itaicization is just the browsers default style
• ltstronggt...lt/stronggt
• Content is strongly emphasized
• Bold is just the browsers defualt style
• Do not use these elements for their visual
  impact, use CSS for the visual

37
Cite

• Use when containing citation or reference to
  other sources.
• ltpgtThe book, ltcitegtDesigning with Web
  Standardslt/citegt, is a must read for web
  designers.lt/pgt

38
Quotations - ltblockquotegt

• Used for containing long quotations (block level
  content)
• Include the citation within the ltblockquotegt in
  the cite attribute.

39
ltblockquote cite...gt example

• ltblockquote cite"http//mycom.com/tolkien/twotowe
  rs.htm"gt
• ltpgtThey 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.lt/pgt
• lt/blockquotegt

40
Quotations - ltqgt

• Used for short, inline quotations
• Not supported by browsers at the moment.
• ltpgtJohn said, ltqgtI saw Lucy at lunch, she told
  me ltqgtMary wants you to get some ice cream on
  your way home.lt/qgt I think I will get some at Ben
  and Jerry's, on Gloucester Road.lt/qgtlt/pgt

41
Lists, Ordered ltolgt

• Information grouped in a specific order
• ltpgtThe OODA loop is the cycle of the
  decision-making processlt/pgt
• ltolgtltligtObservationlt/ligtltligtOrientationlt/ligtltli
  gtDecisionlt/ligtltligtActionlt/ligt
• lt/olgt
• Dont want to see numbers? Use CSS.

42
Lists, Unordered ltulgt

• Information grouped in no particular order
• ltpgtMain Menult/pgt
• ltulgtltligtlta hrefgtHomelt/agtlt/ligtltligtlta
  hrefgtNewslt/agtlt/ligtltligtlta hrefgtCalendarlt/a
  gtlt/ligtltligtlta hrefgtContactlt/agtlt/ligt
• lt/ulgt
• Dont want to see bullets? Use CSS.

43
Lists, Definition ltdtgt

• Terms and Definition
• Display Information (Caption Description)
• ltdlgtltdtgtNamelt/dtgtltddgtChristian
  Readylt/ddgtltdtgtE-maillt/dtgtltddgtchris_at_christianread
  y.comlt/ddgtltdtgtMessagelt/dtgtltddgtCan you tell me
  how to get to Sesame Street?lt/ddgt
• lt/dtgt

44
Tables

• Tables are still used for tabular data.
• We are all familiar with
• lttablegtlt/tablegt
• lttrgtlt/trgt
• lttdgtlt/tdgt

45
Table Summary

• lttable summarygt
• Describes the tables purpose
• Never displayed
• lttable 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."gt

tablesumcap.html
46
Table Caption

• ltcaptiongtlt/captiongt
• Displays a caption describing the table
• Must be placed directly after the lttablegt tag
• lttable summary"This table charts the number
  of..."gt ltcaptiongtCups of coffee consumed by
  each senatorlt/captiongt

tablesumcap.html
47
Tables - Columns

• ltcolgroupgt
• defines a group of columns in the table and
  allows you to set properties of those columns
• Used directly after lttablegt and before any other
  tags.
• ltcolgroup span30 width20gt
• lt/colgroupgt
• Creates a row of 30 cells each 20px in width.

tablecolgroup.html
48
Tables - Columns

• ltcol /gt
• Used within ltcolgroupgt to set properties for a
  specific column
• After the lttablegt tag and before any of the other
  table elements
• ltcolgroupgt
• ltcol /gt
• lt/colgroupgt
• ltcolgroup span"2"gt

tablecol.html
49
Tables - Groupings

• lttheadgtlt/theadgt
• lttfootgtlt/tfootgt
• lttbodygtlt/tbodygt
• Allow rows lttrgt to be grouped into header, footer
  and body groupings.

tablethead.html
50
Tables Associating Cells Headings (Simple)

• scope attribute
• Express relationship of header cells to other
  elements in the table
• Used in simple tables

51
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
52
Tables Associating Cells Headings (Complex)

• headers attribute
• Contains the IDs 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
53
Forms

• ltfieldsetgtlt/fieldsetgt
• Group releated form items together
• ltlegendgtlt/legendgt
• Captions the grouping
• ltlabelgtlt/label
• Associate captions and form inputs

tablescope.html
54
Forms - ltfieldsetgt

• Visual and programmatic way of grouping related
  inputs together.
• Used in conjunction with the ltlegendgt tag to
  caption the grouping.

formfieldset.html
55
Forms - ltlabelgting inputs

• Implicit label
• ltlabelgtEnter User Name ltinput typetext
  /gtlt/labelgt
• Explicit label
• ltlabel forusernamegtUser Namelt/labelgt
• ltinput typetext idusername /gt

formlabel.html
56
Forms - ltselectgt elements

• ltoptgroupgtlt/optgroupgt
• Group releated ltoptiongt elements together

formoptgroup.html
57
ltdivgt and ltspangt

• No semantic meaning
• Used to group related information together for
  the purposes of styling
• ltdivgt Block-level element
• ltspangt Inline element

58
Well, thats about it
59
More information

• http//www.w3.org/TR/xhtml1/
• http//www.w3.org/TR/html401/
• http//microformats.org/
• http//htmlmastery.com/

60
Thank You

• Christian Readychris_at_christianready.com
• http//christianready.com/