(6) Checking for Correctness

• HTML's structure is defined by a Document Type Definition (DTD)
  • Formally speaking, a DTD defines the grammar of the HTML language
  • (and if you really want to know, SGML defines the syntax)
  • Colloquially speaking, a DTD defines how to combine elements and attributes

<!-- Unordered Lists (UL) bullet styles -->
<!ELEMENT UL - - (LI)+                 -- unordered list -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LI - O (%flow;)*             -- list item -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ENTITY % flow "%block; | %inline;">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

(7) Tool-Based Validation

• Testing HTML makes sure that it is well-defined
  • Any errors have to be corrected by the browser
  • The results of browser-side corrections are hard to predict
• HTML editors allow validation within the tool
  • In theory, using the public DTD [http://www.w3.org/TR/html4/loose.dtd], in practice, using a local copy [src/html4-loose.dtd]
• In theory, HTML editors should always produce valid HTML
  • Things today are not as bad as they used to be
  • Creating valid HTML can be a challenge for complex Web pages

(8) Web-Based Validation

• Tool-Based Validation [Tool-Based Validation (1)] requires locally installed tools
  • May be hard to install and hard to maintain across computers
  • For power users, though, locally installed tools are hard to beat
• Web-based tools allow validation from anywhere
• W3C [http://www.w3.org]'s markup validation service [http://validator.w3.org/] supports three modes:
  1. validation by URI (pointing at a random Web page)
  2. validation by file upload (allows validation of non-Web files)
  3. validation by copy/paste (lightweight mode for small experiments)
• Markup validation is only one facet of checking Web content
  • checking CSS code for validity [http://jigsaw.w3.org/css-validator/]
  • checking Web pages for mobile content (i.e., simpler HTML) [http://validator.w3.org/mobile/]
  • checking Web pages for broken links [http://validator.w3.org/checklink]

(9) Firebug & Web Inspector

• Browser-based inspection (much better than view source)
• Learning Web design by looking at Web design
  • Firefox's View → Page Source provides access to a page's source
  • Firefox's Tools → Page Info provides access to all ancillary files
• Understanding how complex HTML works is hard
  • Looking at the source requires brain-based rendering
  • Looking at a rendered document makes it hard to see the source
  • Firebug provides a convenient inspection feature for Web pages
• Inspection allows both directions of understanding HTML
  • Inspecting the rendered page and looking at the source part
  • Inspecting the source and seeing how it is being rendered
• Firebug also displays the associated CSS [Cascading Style Sheets (CSS)] code
• Safari and Chrome offer a similar tool called Web Inspector [http://trac.webkit.org/wiki/WebInspector]

(11) Text

• h1-h6 are different levels of headings [http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5]
• p contains paragraph text [http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.1]
  • Whitespace and line wrapping are ignored
  • Paragraphs are set as boxes containing a number of lines
• Text inside paragraphs can use additional markup (phrase markup [http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1])
  • em for emphasized text
  • strong for text with a strong emphasis
  • sub for _{subscript text}
  • sup for ^{superscript text}
  • q for quoted text (try nesting quotes)
  • code for code examples
• Rendering of all these elements is built into the browser
  • More sophisticated issues probably are more browser-dependent [http://dret.typepad.com/dretblog/2008/04/internationaliz.html]

(12) More Advanced Text

• Quotations can be explicitly marked up as such
  • blockquote for block-level quotations
  • q for inline quotations (part of a block)
  • cite provides support for pointing to the source
• Preformatted text allows text formatting in the HTML source
  • pre leaves whitespace intact and usually uses monospaced fonts
  • word wrapping may be turned off by default

    <br/>
    <pre>This is some text that will not be wrapped because of pre's default behavior,
  at least in most browsers.</pre>
    <br/>
    <pre class="wrap">This is some text that will be wrapped because of pre's overriden behavior,
  at least in most browsers.</pre>
    <br/>

  • pre.html (line 11-17)

(13) Lists

• HTML supports three kinds of lists
  • ul for unordered lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2] containing li
  • ol for ordered lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2] containing li
  • dl for definition lists [http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.3] containing dt/dd

  <dl>
   <dt>Unordered Lists</dt>
   <dd>
    <ul>
     <li>Unordered lists contain just lists of items</li>
     <li>Itemization symbols are chosen by the browser</li>
    </ul>
   </dd>
   <dt>Ordered Lists</dt>
   <dd>
    <ol>
     <li>Ordered lists contain ordered lists of items</li>
     <li>The numbering scheme is chosen by the browser
      <ol>
       <li>Lists may be nested as deeply as required</li>
      </ol>
     </li>
    </ol>
   </dd>
  </dl>

(14) Tables

• Tables are the most complex visual structure in HTML
  • table [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1] represents a table as a sequence of rows
  • tr [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.5] represents a table row as a sequence of cells
  • td [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6] represents a table cell containing table data
  • th [http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6] is a special cell containing header data

  <table>
   <tr>
    <th>Date</th>
    <th>Topic</th>
   </tr>
   <tr>
    <td>2009-01-28</td>
    <td><a href="../html-basic">HTML Basics</a></td>
   </tr>
   <tr>
    <td>2009-02-02</td>
    <td><a href="../html-advanced">Advanced HTML</a></td>
   </tr>
  </table>

(15) Merging Table Cells

(16) Merging Rows

• Table cells can span more than table row
  • rowspan specifies how many rows a cell is spanning
  • Subsequent table rows must leave that space empty

  <table>
   <tr>
    <th>Date</th>
    <th>Topic</th>
   </tr>
   <tr>
    <td>2009-03-23</td>
    <td rowspan="2">Spring<br>Break</td>
   </tr>
   <tr>
    <td>2009-03-25</td>
   </tr>
  </table>

(17) Merging Columns

• Table cells can span more than table column
  • colspan specifies how many columns a cell is spanning
  • Following cells in the same row must be left empty

  <table>
   <tr>
    <th>Date</th>
    <th colspan="2">Resources</th>
   </tr>
   <tr>
    <td>2009-01-28</td>
    <td><a href="../html-basic">HTML Basics</a></td>
    <td><a href="../2009-01-28-html-basic.pdf">PDF</a></td>
   </tr>
   <tr>
    <td>2009-02-02</td>
    <td><a href="../html-advanced">Advanced HTML</a></td>
    <td><a href="../2009-02-02-html-advanced.pdf">PDF</a></td>
   </tr>

(18) Links

• Links are the most important feature of the Web
  • Conceptually, the Web is one large hypermedia document
  • A link's target is formally known as a Uniform Resource Identifier (URI)
• a is a link anchor and links to a URI

  <a href="http://www.berkeley.edu" title="UC Berkeley">UCB</a>

• URIs can have various forms
  • http: points to resources available on Web servers
  • https: is the same but uses encrypted connections
  • URIs can use a variety of other URI Schemes [Web Foundations (URIs & HTTP); URI Schemes (1)]
  • URIs can be relative (in the same was as file names)
  • Relative URIs are evaluated relative to the URI of their occurrence
  • Relative URIs can use path segments such as / and ..

(19) Images

• The Web is an open hypermedia system
  • Multiple media types which can be accessed nonlinearly
  • Contrast with multimedia, which refers to the linear counterpart
• For a long time, the Web only supported text and images
  • Images can be used in a variety of formats (GIF, JPEG, PNG)
  • Audio and video are possible today, but not yet part of the core Web experience
  • Further progress is being made in the upcoming HTML5 specification
• Images are not part of a Web page; they are included by markup
  • img [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2] is an empty element for including images
  • src is a URI pointing to the image (relative or absolute)

<img src="../img/portrait.png" alt="Portrait">

(20) Image Details

• Images must use a format supported by the browser
  • GIF, JPEG, and PNG are pretty safe choices
  • HTTP allows the browser to understand the image format
  • Limited browsers might have size/complexity restrictions
• Image information increases accessibility of a page
  • alt contains a short description of the image
  • For icons it is essential to provide this information
• Image dimensions and image rendering
  • width/height specify the dimensions of the image
  • Allows the browser to start rendering the page before the images are received
  • Will be used to resize the image if the real image size is different
  • Browser-based scaling of images often is not a good idea [http://offog.org/articles/image-scaling/]

(21) Discussion: Web page structure in practice

• Find a popular web page which uses all of the elements we've discussed
  • Attempt to visually pick out the elements without inspecting the source
  • Does the HTML structure reflect the flow of the document?
• Find a popular web page which completely passes HTML validation [http://validator.w3.org/]
  • Might be tougher than you think!
  • What are some common validation issues?
• Bonus: find an extremely broken web page
  • Syntactically invalid, poor usage of HTML tags, doesn't render
  • How would you fix it?

(22) A peek into the future: HTML5

• The limits of the Web have been reached
  • The current HTML standard was created in 1990, ratified in 1997
  • Over the past few years, a fundamental shift from web pages to web apps
  • JavaScript, Flash used to shoehorn the app experience into a browser
• HTML5 [http://en.wikipedia.org/wiki/HTML5] aims to provide a strong platform for the future
  • New semantic tags for common page elements nav, footer
  • New baked-in features to render complex graphics (canvas), natively support audio)/video, geolocate devices, and manipulate files

(24) HTML Matters

• HTML is not just getting text displayed
• Good HTML allows better browsing
• First represent as much as possible in HTML
• Then add what is missing as CSS [Cascading Style Sheets (CSS)] and/or microformats
• Graceful degradation is important
• Rich new features are in the works!