Exam Objectives
Structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside); create a layout container in HTML
Quick Overview of Training Materials
Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 2 and 5
MSDN Articles on HTML5 - Specifically Learn HTML5 in 5 Minutes!
Element list from w3.org - HTML4
Attributes list from w3.org - HTML4
HTML5 specification from w3.org
Dive Into HTML5 - What does it all mean?
Microsoft.com - Exam 70-480 - suggested link: Get started using HTML5 - includes instructions on creating a webpage using WebMatrix
Convert a Warm, Cheerful Web Design to HTML and CSS - much broader than just this topic but an excellent tutorial to get your feet wet
Introduction to HTML
Before we can appreciate what semantic tags bring to the table, its important to understand basic HTML tags and document structure (chapter 2 of Programming in HTML5 with JavaScript and CSS3 - Training Guide is a good reference for this section) . An HTML document on its own is nothing special. To see an HTML document in all it's glory, it must be rendered by a browser. The browser knows how it needs to render an HTML document based on tags contained in the text. These tags mark up the document (putting the M in HTML). HTML tags define elements that are part of the document object. Elements are used to create a hierarchical tree structure within the document, with parent, child, and sibling relationships. The image below shows a graphic representation of a typical tree structure:
The <html> tag defines the root element of the tree (though I show Document as the root because in JavaScript <html> is a child of "document"). The page header <head> and content <body> are children of the <html> tag, and each of these tags have children, grandchildren, etc. The children of the same parent element are siblings, so <header>, <nav>, <main>, <aside>, and <footer> are all siblings.
Elements themselves are further described by a set of attributes. Attributes are name-value pairs that generally follow the pattern <tag attribName="attribValue"></tag>. Style attributes determine how an element is displayed by the browser, though these are best abstracted to an external CSS file. It is also possible to assign event handlers for things like clicking the element, but like styling, behavior is best abstracted to an external JavaScript file. Id and class attributes play an important role in determining how styles and event handlers are applied to a sheet. Other attribute types include:
- alt - alternate text displayed for an image if it doesn't load
- contenteditable - the user can edit the content of the element (though these changes are not made to the source document, only the copy in the users browser)
- data-xxxx - this is a user defined attribute that can be named about anything as long as it is preceded by "data-". So "data-author" may hold the value of the author's name. WinJS uses an extension of this attribute in the form of "data-win-xxxx".
- dir - change the direction the contents of the element are displayed
- draggable - make the element draggable. Boolean.
- dropzone - behavior of dragged element. Can be copied, moved, or linked
- hidden - the element does not display. Boolean
- href - a URL or page location for an anchor tag
- lang - the language of the element's content
- spellcheck - used with lang attrubute to specifiy if content should be spellchecked
- src - source location for external resources (images, CSS, and JavaScript files, etc.)
- tabindex - sets the order the element is selected when the user is pressing "Tab"
- type - used on input tags to specify if they are text, checkbox, etc.
- title - displays in a floating box when the user hovers over the element. For example, the following paragraph tag <p title="This is a title">Title Example</p>, when the cursor hovers of this text the title looks like this:
Semantic markup in HTML5
HTML5 is based on HTML4.1 and contains most of the same tags. The most commonly used tags are:
<!DOCTYPE html> - sets the document type.
<html> - document root
<head> - the document head. Descriptive information for the browser and external resource importation
<meta> - generic metadata
<link> - media-independent link. Use to refer to CSS files.
<script> - can either define JavaScript code or refer to an external JS file.
<title> - document title. Shows at top of browser and in search results.
<style> - embedded style. not a best practice, better to use external CSS files.
<body> - visible content of the document
<a> - The anchor tag, used to create external and internal links
<div> - generic container. These get used a LOT.
<span> - generic inline container.
<table> - Creates a table
<col> - table column
<colgroup> - table column group
<tbody> - table body
<th> - table header cell
<thead> - table header
<tr> - table row
<td> - table cell (short for "table data")
<ul>, <ol> - unordered or ordered lists, respectively
<li> - list item
<img> - embedded image. "src" attribute can point to image file or may even contain binary data necessary to render image
<b>, <i>,<big>,<strong>,<em> - used to affect text formating through style and emphasis. semi-semantic.
<q>, <blockquote> - a short, inline quote or a long block quote
<h1>...<h6> - various heading levels
<hr> - horizontal rule (a line across the page that divides content)
<form> - interactive form
<input> form input. type attribute determines what kind of input element
<button> - button control
<textarea> - large text input area (think "comments and special instructions")
<fieldset> - used to group form controls
<select> - dropdown box control
<option> - available values for a select element
<iframe> - inline subwindow. basically opens a mini-browser within the browser.
HTML5 extents this list with a number of "semantic" tags that are meant to either replace generic divs used to structure content, or to simplify embedded media. The new semantic tags for organization include:
<header> - section header
<footer> - section footer
<nav> - navigation links
<aside> - auxilary section like a sidebar
<main> - primary content area for the PAGE
The graphic below organizes a similar structure in a browser window. You'll see that the main difference with HTML5 semantic tags is that it is no longer necessary to build a document hierarchy using divs with Id or class attributes set. The purpose of the tag is implied by its name (thus semantic):
The Dive Into HTML5 - What does it all mean? article does an excellent job of outlining exactly how these new semantic elements can be used to improve the structure and readability of our HTML documents. Their example page is greatly simplified by the use of semantic markup, and the semantic tags also give us new tools for creating more flexible outlines. One problem they point out with HTML 4 is that the heading tags create only a single outline and there is no way of specifying a subheading without creating a new outline node (they call it a phantom node). The alternative has been unsemantic <p class="subheading"></p> type tags, but now you can use the <hgroup> tag to group heading tags together. Also, because <article> tags are self contained, they can contain their own <h1> heading that won't interfere with the heading nesting of the overall document (with some caveats, of course). The <nav> tag can make navigation easier for disabled surfers using screen-readers and such.
Part 1 of Module 1 of the Microsoft Virtual Academy course Developing in HTML5 with JavaScript and CSS3 Jump Start covers semantic tags briefly and does a very short, quick demo using Visual Studio 2012 for Windows 8. They are actually creating a Windows 8 app in the demo but it is basically just a website and would work equally well in an ASP.NET app using VS Express Web (or any other text editor for that matter). They show off some of the form functionality in HTML5 that automatically validates URLs and email addresses. You can even assign a regex pattern to an input for validation.
Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 5 covers the use of semantic tags in some detail and includes review questions and exercises. I've found that one of the best ways to learn HTML is to create a webpage, and the exercises in this book provide a decent walkthrough. Along with the exercises in chapters 2, 3, and 4, you eventually create this web calculator:
 |
| I didn't actually code this yet, this is from the PDF of the book. I meant to, but my Virtual Box Windows 8 took a nose dive and I spent all afternoon fixing it, so I'll include screenshots of my version in a later post about JavaScript or CSS. |
The official specification for HTML5 is large, printed to 8.5 x 11 in Chrome is weighs in at 639 pages, but it is an invaluable reference for all things HTML.
The HTML5 is developed to solve the compatibility problem that affects the current standard of html4. The goal of html5 is to support the audio, video and canvas tags.
ReplyDeleteHTML5 training in Chennai | Html5 training chennai