1. Basic HTML Document Structure

2. Goals (XHTML HTML5) XHTML HTML 5 I’ll focus on HTML 5
Separate document structure and content from document formatting
HTML 5
Create a formal (strict) version of HTML
Extend the language to include semantic elements and standard media elements to play video, audio, …
Adds what’s missing instead of fixing what’s wrong
I’ll focus on HTML 5

3. What’s the Status of HTML5
It’s pretty much supported by IE 9+, and current versions of Chrome
At this point, it’s a living language and other software is growing to support it
There is a cohesive API that goes along with the language
Much more about programming later
We will be working in HTML5 this semester

4. HTML and XML Roughly speaking, HTML is a specific XML vocabulary
Document Type Definitions (DTDs) are used to create XML vocabularies
There are many vocabularies in addition to HTML
SOAP, XSLT, XPATH, and many more
Although not mentioned in the book, schemas are used for document validation

5. DTDs (Introduction)
Document Type Definition (DTD) files are used to validate XML documents
That is, they describe the elements allowed in an XML document, and the order in which those elements must appear
Older versions of HTML and XHTML used physical DTDs. HTML5 does not

6. Hooking Up the DTD
The <!DOCTYPE> declaration is used to reference an “external” DTD
There are DTDs to validate XHTML
There is no physical DTD for HTML5 but we use the <!DOCTYPE> declaration to keep everything happy

7. HTML5 Document DTD The DTD has been reduced down to
And does not physically exist

8. HTML5 Validation
Visual Studio automatically validates HTML 5 (and other versions) documents as you edit them
Note that most browsers WILL render invalid HTML5 documents
I WILL NOT accept them without penalty though

9. Document Validation There is a validator at http://validator.w3.org
It validates the following document types
Check your documents before turning them in

10. Document Validation
Select the file, encoding and document type

11. Document Validation
And see the results

12. Principles of HTML5 Don’t break the Web Pave the Cowpaths Be practical
Everything “before” HTML5 is valid
Pave the Cowpaths
Adds standards for many things (multimedia) where there were no standards before
Be practical
Changes should have a payoff

13. HTML 5 Semantics We have all heard of the semantic Web
HTML 5 introduces semantic language elements
Formatting elements are now semantic elements
We introduce elements like <header>, <footer>, <nav>, <article>, and <section> that have meaning beyond just formatting
These semantics help with assistive technologies too

14. Elements (Syntax) Elements have starting tags and ending tags
Starting tags appear in <> characters as in <p>
Ending tags appears in </> characters as in </p>
So a paragraph becomes: <p>I am a paragraph.</p>
When there is no data, a shorthand notation can be used as in (line break) <br />

15. XHTML Elements and Attributes
Elements are roughly categorized into two types
Block-level elements define the structure of a page
Paragraphs, tables, etc…
Semantic elements such as <article>
Inline elements are used mostly for formatting
Inline elements appear inside of a block-level element
Semantic elements are favored over older formatting elements
We will talk about different elements as we use them

16. Document Attributes
Attributes are used to further configure an element
Some attribute names are common to almost all elements
ID is usually a unique identifier
Some attribute names are unique to a specific element
href applies only to anchor elements (hyperlinks)

17. Document Attribute (Syntax)
Attributes appear in an opening element tag
They appear as key/value pairs
An equal sign separates keys and values
A space separates multiple key/value pairs
Values are quoted
Both single and double quotation marks are allowed

18. HTML5 Attribute (Example)
Example: an attribute named id with a value of FirstHeader in the <h1> element
The element has no content
<h1 id="FirstHeader"></h1>
The following element has content
<h1 id="FirstHeader">Header Content</h1>

19. Structural Elements <html> must be the root element
<head> must appear next nested inside <html>
<body> must appear next nested inside <html> and follow <body>
These elements are optional in HTML5 but required in XHTML

20. The <head> Element (1)
It’s the document header and contains information about the Web page

21. The <head> Element (2)
Child elements (more detail about these later)
<base>- the base URL for relative references
<link> - contains a link to an external Cascading Style Sheet or other resource
<meta> - describes document metadata used by search engines among other things

22. The <head> Element (3)
<script> - contains scripting language commands
More later when we talk about JavaScript
<style> - defines style information
More about this when we talk about CSS
<title> - contains the text that appears in the title bar of the browser
Include a short title as it is used by search engines

23. The Document Body The <body> appears after the <head>
It contains the document content that is rendered by a browser

24. Basic Body Elements (1)
<h1> <h2> … <h6> are heading tags
Text appears between the tag
<h1>This is a heading</h1>
<p> inserts a paragraph
<br /> inserts a line break
<hr /> inserts a horizontal line (rule)

25. The Purpose of a URL We use Uniform Resource Locators to
Send requests to Web servers
Send information about the request

26. The Format of a URL
Protocol
Domain moneycentral.msn.com
Directory detail/stock_quote
Query string ?Symbol=msft

27. Absolute and Relative References
Links may be created in two ways
Absolute links contain the protocol, domain, and directory
Relative links are created “relative” to the current pages
Special character patterns allow you to navigate the directory herarchy

28. Relative References (Examples)
Foo.htm The file named foo.htm in the current folder
Child/foo.htm The file named foo.htm in the folder named Child
../foo.htm The file named foo.htm in the parent folder

29. File Names (Best Practices)
Beware that some Web servers are case-sensitive when it comes to file names
Use a constant scheme for creating files (Pascal case or Camel case)
Spaces are problematic for file names
%20 anyone

30. Comments Comments appear between the <!-- and --> characters
Comments can appear on multiple lines
Comments cannot be nested
The end of comment pattern cannot appear within a comment

31. Page Layout There are some design rules / suggestions for Web pages
Some look like this:

32. Page Layout <header>
It represents the header for the page or article It
Use the role attribute to improve accessibility
<header role=“banner”> <h1>Ski Area List</h1
</header>

33. Page Layout <nav>
The <nav> tag is used to depict a navigation section containing some kind of menu
Again, the role attribute depict the section’s purpose
<header role=“banner”> <h1>Ski Area List</h1> <nav role=“navigation”>
</nav>
</header>

34. Page Layout <main>
The <main> element marks the main content of the document
A page can have at most one <main> element
It should not contain content repeated across documents (menus, headers, footers, etc.)
IE does not support this element
It cannot be a descendant of <article>, <aside>, <footer>, <header> or <nav>

35. Page Layout <article>
Use the <article> element to represent a complete or self-contained thought
And <article> often appears as a descendant of the <main> element
Articles can be nested
An <article> has one or more sections
<section> element

36. Page Layout <aside>
An <aside> contains tangential content of an <article> or <article> section
A <footer> marks a footer for an article, aside, body, details, fieldset, figure, nav, or section.

37. Generic Containers <div>
The <div> tag is a block-level element
Use it to mark content without semantic meaning
It’s just a placeholder for content

38. Naming Elements Use the id attribute to uniquely identify an element
This of this attribute as a variable name
It will become important later when we
Work with Cascading Style Sheets (CSS)
Work with JavaScript and other programs