3. Upon this course completion you will have
basic knowledge on
• legacy of HTML and CSS
• various versions of HTML and XHTML and
mighty html5
• HTML structure & elements
• use of semantic markup
• base tools
• base sources
3
4. Course agenda
1. HTML history and evolution
2. HTML documents structure
3. HTML elements
4. HTML vs XHTML
5. semantic markup
6. HTML5
7. tools
8. Sources + !Sources
4
6. HTML history: version history
• 1993 IETF introduces HTML specification draft
• 1995 first specification - HTML2.0 - by HTMLWG
• 1997 HTML3.2 by W3C. In the same year
HTML4.0
๏ 1998 XML1.0 spec & W3C decided that there will be
no more no-xml versions of HTML in the future
• 1999 HTML4.01
6
7. HTML history: version history
• 2000 XHTML 1.0
• 2000 XHTML 1.1
• 2003 Apple and Opera blasts xform 1.0 specs
• 2004 after W3C workshop WHATWG was found
and work on HTML5 began
• 2008 first working draft on HTML5
• 2010 NOW - HTML5 5th version of working draft
7
8. HTML?
• It is
• markup - a way of structuring content
• place to add meta-information for browser to
process
• It is not
• programming language
• presentation (styling) layer
8
10. HTML document structure:tags
• just any tag_name?
- NO
• “ or ‘ - work both
ways but use “
• empty tags? -use
shorthand in xhtml
<span/>
• case sensitive? NO
• spaces inside tags?
omitted
10
11. HTML : tags - structural
• provide structure to content
• containers
• semantic elements
• structure organization
• elements of DOOM
• <br>
• <hr>
11
12. HTML : tags - list
• listing content
• lists
• definition lists
• punctuations
12
13. HTML : tags - text formatting
• text formatting
• inline elements
• links
• code
• citations
• ...
• elements of DOOM
• <i></i>
• <b></b>
• <u></u>
13
14. HTML : tags - forms
• building forms
• different inputs
• description elements
• structure
• kinda no place in here
14
15. HTML : tags - tables
• tables
• they are used for tabular data, nothing else!
• table definition
• rows, cells
• kinda no place in here
15
16. HTML : tags - media
• including media
• audio
• images
• objects
16
17. HTML : attributes
• some common attributes you will find
• ID
• class
• title
• type
• style
17
21. DOCTYPE
• !DOCTYPE is not HTML tag
• instruction for web browser about document markup language
• refers to Document Type Definition
• artifact from SGML
• will we utilize it? YES!
• sample doctype
21
22. HTML vs XHTML page 1
• HTML • XHTML
๏ case insensitive ๏ case sensitive
๏ you can omit end tags ๏ tags should be lowercase
and some start tags ๏ all elements should have
๏ you can omit element start and end tags
attributes quotes ๏ requires xml syntax for
<foo attr=value> empty elements <foo/>
๏ use browser HTML ๏ you have to quote
parser element attributes
๏ some attributes can be <foo attr=”value”>
expressed without name ๏ xmlns attr in html tag
<input type=”checkbox” checked>
22
23. HTML vs XHTML page 2
• HTML • XHTML
๏ MIME type text/html ๏ should have MIME type
application/xhtml+xml
๏ certain characters must
appear as named
entities & as &
๏ xml:lang should be used
instead of lang
๏ some DOM methods and
properties may not work
innerHTML, onClick
23
24. XHTML when to use?
• XHTML
๏ want to treat page as XML
๏ use MathML or CML
๏ manage several namespaces
๏ need to validate against strict markup
• HTML
๏ else ... always?
24
25. Semantic markup key questions
• do we need semantic markup? YES
• what are pros of semantic markup?
๏ better SEO
๏ easier to separate content from presentation
๏ clear document structure
๏ W3C standards
• when should we put special emphasis on it?
๏ designing for people with disabilities
๏ designing for wide variety of devices
25
26. Semantic markup principles
• “it validates” != “it is well written”
• design for human first, computers second
• html5lify your code
• do not use deprecated elements
• run from divitis and classitism
• follow usability guides to achieve compliancy with browsers
for people with disabilities [f.e. put navigation in lists]
• separate your presentation and structure (style attr is evil!)
26
27. Semantic markup practices
• don’t use html solely for presentation [<br>,<hr>]
• your document should be easily printable without CSS
• non-content images should be provided by CSS [f.e. bullets]
• provide empty alt elements for images without meaning
• in structure use DIVs for block and SPANs for inline
• use tables for tabular data
• build your navigation on lists
• don’t create redundant classes [f.e. ‘link’ for <a>]
27
28. HTML5 motivations
๏ provide not only standard for developers but also processing
hints for implementors
๏ back to open process [xhtml 2.0]
๏ give power back to end user
๏ focus on semantic markup
๏ improve accessibility
๏ bring new features to the deck
๏ bring unanimous standard for various devices
28
29. HTML5 design principles
๏ priorities : users > authors > implementors > spec writers
๏ degrade gracefully
๏ support settled practices [f.e.<br/>]
๏ separate content and presentation
๏ protect users
๏ evolution not revolution
๏ provide consistent DOM [for xHTML5 and HTML5]
29
30. HTML5 elements
Structure Media
๏ <header> ๏ <video>
๏ <footer> ๏ <audio>
๏ <nav>
๏ <aside>
๏ <figure> Form controls
๏ <legend>
datetime, datetimelocal, date,
๏ <article> month, week, time, number, range ,
email, url , search , color
๏ <section>
and client side validation for them
30
31. HTML5 interoperability and access
๏ well defined behaviors in spec, focus on MUSTS for
implementors
๏ provide backward compatibility, even for not valid markup
๏ same behavior, even for non conforming content in different
implementations
๏ avoid complexity
๏ handle errors, provide recovery
๏ media access independence [desktop/phone/tv]
๏ heavy support for different languages
๏ heavy support for accessibility
31
32. HTML5 features
๏ cross document communication
aka XMLHttpRequest2
๏ server push communication
๏ geolocation api
๏ web storage api
๏ messaging api [sms,mms]
๏ media capture
๏ 2D image input <canvas>
๏ ...
32
