1. HTML5 Structure

2. Slide 2 Introduction Introduce the purpose of the new HTML5 semantic tags Introduce the HTML5 outlining mode Using semantic metadata for search engines

3. Slide 3 HTML5 – The Paradigm Shift Pre HTML5 We had an informal way of applying metadata It was not semantic – There was no real meaning attached to the tag An author, a copyright, a time, … Now We have semantic tags that help search engines know what your Web site content “means” Google Recipes

4. Slide 4 HTML5 – The Paradigm Shift Pre HTML5 Used the and tags to mark / identify blocks of content tags to define the document hierarchy Now We have semantic tags like and to depict context

5. Slide 5 My Thoughts We expect the Web to perform a rich set of tasks All things to all people And there are many folks defining the standards This leads to many standards that take time to shake out So the semantic web is very much in the development phase HTML 5 is a living language right now

6. Slide 6 The and Tags (Introduction) These tags are used to mark parts of a document tags are used to format block elements They mark a box formatted by CSS It’s a hook to mark blocks as we will see later with JavaScript does nothing by itself It’s just a hook with which to mark text (inline tag) It’s an inline tag as opposed to a block tag

7. Slide 7 The and Tags (Introduction) Set the class attribute to apply a CSS style to a document section (more later) Set the id attribute to uniquely identify the element (more later) We use the id with JavaScript Use these tags for formatting and as template locations for content insertion In some cases the semantic tags deprecate and

8. Slide 8 The Tag (Example) Apply formatting to “text”. The formatting comes from the class “bright” text

9. Slide 9 Semantic Elements (Introduction) Semantic elements were introduced in HTML5 to improve the structure of documents Semantic elements help search engines figure out the meaning of content They help with syndication and aggregation Semantic elements give greater meaning to content by Identifying sections of content (headers, footers, navigation) Semantic elements “don’t do anything” by themselves

10. Slide 10 Phrase Elements (Introduction) Phrase (logical) elements are part of the document and help move us toward semantic tags There are HTML 4 elements that have remained largely unchanged While browsers usually apply formatting, they do not have to We will call the following elements (text-level semantics)

11. Slide 11 Phrase Elements (Emphasis) In HTML 4 and were presentational font style elements They now have semantic meaning TagMeaning span of text in an alternate voice or mood span of text to which attention is being drawn HTML 4: emphasis HTML 5: stress emphasis HTML 4: strong emphasis HTML 5: importance

12. Slide 12 Phrase Elements (Citations) Use for short quotations Use for long quotations Content that is quoted from another source The tag allows you to create a citation The tag can appear inside of a tag It should contain the title of a work (book or other)

13. Slide 13 Phrase Elements (Acronyms and Abbreviations) The tag identifies an abbreviation The content contains the abbreviation The title attribute contains the name that is displayed as a tooltip The element is deprecated though

14. Slide 14 Phrase Elements (Terms) A group of elements are used to describe terms and definitions is called a description list formerly called a definition list. It encloses a list of definition term element. Must be a child of Usually followed by a description element represents the defining instance of a term. See PhraseElements.html

15. Slide 15 Phrase Elements (Example)

16. Slide 16 Phrase Elements (List 2) - something that’s computer code - deleted text - inserted text - preformatted text whose formatting (whitespace) must be preserved - user keyboard input - replaces div for calculation output or other output value - Text referencing something and thought to be important

17. Slide 17 Text Formatting (Physical Elements) Simply put, we are applying a font or typeface - subscript - superscript - typewriter

18. Slide 18 The New Element Semantic element to identify a point in time Remember, these elements don’t really do anything We use them for formatting and to gather semantic information

19. Slide 19 The New Element - set the datetime attribute to “YYYY-MM-DD HH:MM+00:00” Time a blog posting was made The visible content can be anything The element content can also be a value expressed using a 24 hour clock

20. Slide 20 New Imaging Elements and - represents a figure Use to associate an image (having little meaning), with its caption m ust be the first child or last child of the element The tag should appear inside of the tag The element represents self-contained content

21. Slide 21 Syndication and Aggregation We often pull content from other Web sites but don’t know how that content is laid out That content is buried within our comment The semantic elements help to solve this problem

22. Slide 22 Semantic Elements (Sectioning) - Self contained content newspaper article, blog post - section of a document Content must begin with a heading - Tangential content Related articles, related posts, differing opinions

23. Slide 23 Semantic Elements (Sectioning) - appears in other sectioning content Use the tag to mark a section’s header content - footer at the bottom of the section Use the tag to mark a section’s footer content

24. Slide 24 Semantic Elements (Sectioning) - important (significant) navigational links tag typically appears in the header for primary navigational links We wrap a element around and elements (lists) It’s used largely for accessibility These tags replace older tags in some cases

25. Slide 25 Navigational Content (Introduction) All of this is new to HTML5 The element is used to group important links to content within the page or other pages or resource

26. Slide 26 Navigational Content The title attribute (not element) adds a tool tip to the related element Different than the element in a block

27. Slide 27 Semantic Elements (Illustration) From w3Schools.com

28. Slide 28 Semantic Elements and Document Structure As we begin to program (with JavaScript and other languages) you will see how a document has a well-defined structure and how it’s used to manipulate the document The semantic elements have an effect on the document’s outline

29. Slide 29 The Document Outline (Introduction) It’s just an outline as you would use in Word or anywhere else It’s not well-adopted so we will not spend too much time on the topic

30. Slide 30 The Document Outline (Implementation) The element is a sectioning root and marks the start of an outline and are also section roots A sectioning root creates a new nested outline inside the page Everything inside the section is a child of the sectioning root create new sections unless they appear at the top of a section

31. Slide 31 The Document Outline (Implementation) As your book mentions, browsers don’t render the document outline at this point It’s really the DOM structure which we will get to later

32. Slide 32 Semantics and Text MacDonald says: Text-level semantics are a tougher nut to crack Imagine a unique element for every piece of information you might represent (person, student, address, education) HTML5 solves the problem using a microdata standard There are only three textual semantic elements There is an extensibility mechanism

33. Slide 33 Other Semantic Standards The “standards” are evolving and there are many of them The semantic goals differ Accessibility Content description Data mining ARIA, RDFa, Microformats, Microdata

34. Slide 34 Microformats A collection of agreed upon conventions to store and exchange structured information There are a few dozen of them Take a look at http://microformats.org/wiki/Main_Page http://microformats.org/wiki/Main_Page http://microformats.org/wiki/hCard They use the class attribute of the element

35. Slide 35 Microdata More structured than Microformats Started out as part of the HTML5 specification Implemented as a set of attributes itemscope and itemtype inside of a container such as The data type ( itemtype ) is points to an XML namespace Supported by Google but not accepted into the draft standard