very brief intro to html5 [tc dojo open session]

04/10/2023TC Dojo Open Session 1

Introduction to HTML5

Liz

Frale

y, S

ing

le-S

ou

rcin

g S

olu

tion

s

04/10/2023TC Dojo Open Session 2

5 Things to Know—from “Dive into HML5” by Mark Pilgrim

1. It’s not one big thing

2. You don’t have to throw anything out

3. It’s easy to get started

4. It already works

5. It’s here to stay

04/10/2023 2

04/10/2023 3

HTML5 = HTML + CSS + JS

• HTML Syntax • Metadata Elements• Page Organization Elements• Content-grouping Elements• Text-level Elements• Media Elements• Form Controls• Embedding Elements• Tables

• Microdata Annotations

• CSS

• Javascript

• Local Storage

04/10/2023 3

HTML5 Syntax• HTML and XML Syntax

– Roughly equivalent, look nearly identical– XML allows namespaces, attributes must be quoted, elements must be closed, can have empty

(<div/>) or “self-closed” elements– RECOMMENDED: Use HTML Syntax when writing HTML

• Doctype– Use <!DOCTYPE html>– Don’t use any of the others unless you want the various browsers to enforce a particular mode

(standard, quirks, ‘almost standards’)– If you want to specify XML, use the XML declaration <?xml version='1.0' encoding='utf-8'>

• Escaping– Be careful about using magic characters:

• “<” instead of “<“ • “&” instead of “&”• “>” instead of “>”• “"” for double quotes• “&apos” for single quotes

– Must be doubly careful about user-submitted content

04/10/2023 4

Metadata Elements• <title> : Page Title. Required! Search engines use this value in search

results• <meta> and <link>

– Are void elements (no end tags) – Use <meta> for plain-text data– Use <link> to refer to external resources as the data

• <script> and <style>– Provide Javascript and CSS inline with the page rather than external

resource– @type and @language are not required as the browser will treat

<script> as JavaScript and <style> as CSS=– Note: If you use the @src attribute on <script>, the contents of the

<script> element are ignored and the external script is fetched instead

04/10/2023 5

Page-Organization Elements• <html>, <head>, <body>

– <html> is the root element with only two children – <head> and <body>– <head> contains metadata– <body> for the visible content on the page– All of these tags will be automatically inserted by the browser if you omit them

• <main>: Used to tell screen readers where the main content begins; used only once per page

• <header>, <footer>– <header>: header of page or section, groups h1-h6 to indicate subtitle/tagline, can include other data

as well (pubdate, version history..)– <footer>: information about or related to nearest sectioning element; used for attribution, links to

related documents

• <h1>…<h6>: headings and subheadings, importance equal to rank • <nav>: for navigation links to other documents or parts within the current

document. Use <nav> for primary navigation.• <address>: for contact information

– Note: if <address> is child of <body> it applies to the entire page

04/10/2023 6

Page-Organization Elements (cont)• <article>, <section>, <div>

– <article>: independent, self-contained, section of page that is intended to be reusable or distributable (like syndication)

– <section>: a thematic grouping of content; usually has a <header>, may have a <footer>; think chapters in a book or numbered sections in a thesis

– <div>: no semantic meaning whatsoever, strictly for structure; a container for flow content that you can attach class, lang, and title attributes to.

– When to use?• Use <article> if the content makes sense on it’s own in a feed reader• Use <section> if the content is related• Use <div> if there’s no semantic relationship

• <nav>: for navigation links to other documents or parts within the current document. Use <nav> for primary navigation.

• <aside>: section of page that is tangentially related and considered separate

04/10/2023 7

Content-Grouping Elements• <p> - paragraph• Three kinds of Lists

– <ol>: Ordered List (items are numbered), <li> children only– <ul>: Unordered List (items are bulleted), <li> children only– <li>: List Item, content between the <li> tags

– <dl>: Description List (list of name/value pairs), <dt> and <dl> children only

– <dt>: Description Title– <dd>: Description Definition

• <pre>: to preserve whitespace• <hr>: a thematic break; often replaced with CSS (via image or other

styling) or attached to <section> (for example)

04/10/2023 8

Content-Grouping Elements (cont)• <blockquote>: used for quotations from other sources

– Include child elements <footer><cite><a href=“URL”></a></cite></footer> to reference the resource being quoted

– Blockquote is also a sectioning root so headings in the quote won’t mess up the outline of the rest of your page

• <figure>, <figcaption>– Use <figure> to specify a unit of content that is referenced in main

content but does not have a particular location that it needs to be in (picture, code, table, moved to sidebar, dedicated page, etc. ); content is related, and essential, but location of content is not essential. Graphics banners should be <img> not <figure>.

– Do not confuse <figure> with <aside>. Use <aside> when the content is related, but not essential

04/10/2023 9

Text-Level Elements• <a>: for hyperlinks• <dfn>: defining instance of a term• <code>: fragment of computer code• <var>: variable in mathematical or programming or term as a placeholder• <kbd>: user input• <samp>: sample output• <bdi>: span of text to be isolated for the purpose of bi-directional text

formatting• <bdo>: explicit text directionality formatting control for child elements• <sub>, <sup>: subscript and superscript• <cite>: about the cited element (title, person, link..) Think about

blockquote…• <q>: phrasing content

04/10/2023 10

Text-Level Elements (cont)• <em>, <strong>, <i>, <b>, <mark>: various semantics

– <em>: emphasis– <strong>: importance– <mark>: a run of text that is marked or highlighted because of

relevance in another context; in quotation it means the content is “editor added emphasis”

– <i>, <b>: italicize and bold, respectively to convey semantic meaning not otherwise covered by an HTML element

– Notes:• Don’t use <em> just to italicize• Don’t use <i> just to add italics for symbolic purposes (use CSS for that!)• Same advice applies to <strong> and <bold>• Use <mark> purely for highlighting relevance to user or page content

04/10/2023 11

Text-Level Elements (cont)• <br>, <wbr>:

– Use <br> for a line break that is part of the content (poems or addresses)– Use <wbr> when child elements must not be considered part of the surrounding text – Do not use for separating thematic groups in a paragraph!

• <abbr>: abbreviation or acronym; Use <title> attribute to provide expansion only. – No more <acronym> element!

• <ins>, <del>, <s>– <ins>, <del> : indicate insertions and deletions, so you can track changes– <s>: struck-through but is meant for things like “sarcastic strike through”

• <small>: for “small print”; text that not less important but that is purposely less emphasized. – Don’t use it just to make text smaller for stylistic purposes– Do not use for block-level content!

04/10/2023 12

Text-Level Elements (cont)

• <time>: used for marking up dates and times in a machine-readable way– Give exact date/time in the @datetime attribute– Don’t use it for every date and time in the page; use it only when

you actually have a need to make it machine-readable– Example: when you need a script to read a time/date but you want

to present it in a human-friendly readable version (e.g., “4pm”)• <ruby>,<rt>,<rp>: a container for base and ruby text

(annotations in languages like Chinese and Japanese)• <span>: no semantic meaning, can be useful when used

together with global attributes (class, lang, dir) (CSS!). It represents it’s child elements.

04/10/2023 13

Media Elements• <img>: displays an image. Use @src to point to the image; use the

@alt attribute to describe it (useful for robots like Google’s crawler)

• <canvas>: a javascript-created image. – Can be static (img) that you draw on the canvas, then you can

manipulate the pixels from a script– Can be totally script-generated image using drawing commands– Can be complex animated things like games (redraw canvas from scratch

every frame) • <map>: defines an imagemap• <area>: represents a hyperlink with text and a corresponding area

of an image map (or dead area). If no @href attribute, then you must omit the @alt attribute

04/10/2023 14

Media Elements (cont)• <video>, <source>: Basic video player. Use @src attribute to point to URL of

video– @controls : add play/pause/etc controls automatically– @loop: restart video from the beginning after it ends– @autoplay: start playing automatically– @type: indicate MIME-type of the video. The browser will automatically take the first

one it understands.– Can put arbitrary fallback content into the <video> element after all the sources to

support older browsers• <audio>, <source>: Basic audio player, attributes/contents similar (essentially

identical) to <video> only it plays audio not video; the interface is slightly different

• <track>: used to provide lyrics, transcriptions, subtitles, and similar text-based equivalents to <audio> and <video>. It’s a child of either.– Point @src attribute at WebSRT file that has the text– Note: Work on this element is ongoing

04/10/2023 15

Form Controls

• <form>: allows page to submit data – Can contain any content, but input elements are given special

treatment– @action attribute points to URL to which data is sent– @method specifies how data is packaged

• method=get: (default) sends data as query parameters to URL; use for “complicated links” when refreshing or sending the link to other people has no side-effects

• method=post: sends data in a non-visible way as part of the http request; use when you have side effects like adding/deleting info from a database

• <select>: lets user pick one choice out of several, usually presented as drop-down list– <option>: child of <select>– <optgroup>: child of <select>, lets you group options together; @label

attribute to give a label to the group

04/10/2023 16

Form Controls (cont)• <input>: allows user to interact with the page; used to construct the

form’s dataset when the form is submitted.– Each <input> element has a @name attribute and a value.– Classic inputs:

• type=“text” – basic, any typing• type=“password” – masks typing with “*”• type=“checkbox” – check/uncheck (@checked attribute)• type=“radio” – grouped selectors; only one allowed to be selected at any given

time; all have same @name • type=“file” – user can select a file and send it to a server• type=“submit” – the submit button that triggers form action• type=“button” – identical to submit, but lets you attach js that can run when button

pressed (also <button>)• type=“hidden” – special; allows you to smuggle extra data in the dataset

• <textarea> : beefy version of <input type=“text”>

04/10/2023 17

Form Controls - <input> (cont)• New HTML5 inputs – specialized UI so what the user sees is different

than the data that gets sent to the server– type=“date” – a date picker– type=“time” – a time picker

• type=“timedate”, “week” (week/year), “month” (month/year)

– type=“color” – color picker– type=“range” – a range slider with a @min and @max and @step attributes– type=“number” – like text but only allows numbers. Also can have @min,

@max, and @step– type=“tel”, “url”, “email” – accepts telephone, urls, and email values

respectively

• New HTML5 inputs are not fully supported by all browsers

04/10/2023 18

Form Controls (cont)• <fieldset>, <legend>

– These elements group form inputs inside the form– Use <fieldset> to group inputs thematically– Use <legend> to give a label to the fieldset (must be the first child of <fieldset>

• <label>: this is to describe an input– Use @for (with ID to input being described) to associate a label with an input;

otherwise it applies to the first input inside it– Special feature! Clicking a label automatically transfers the click to the associated input

(think tiny checkboxes). Always add a label!• <datalist> : in input, gives you a dropdown (options) with autocomplete as you

type• @placeholder: lets you supply a hint as to what type of value is expected

– Shows as long as input is empty– Use @title for longer hints (shown at hover)– Use @label to describe the input (not title or placeholder)

04/10/2023 19

Form Controls (cont)

• Form Validation– Note: Not yet supported everywhere, but can be

faked with JS shims. Some types of inputs have implicit validation (email, urls)

– @required attribute requires the input to have a value other than the empty string

– @patter takes regex – Invalid is displayed with CSS :invalid

pseudoclass– Validation is continuously checked

04/10/2023 20

Embedding Elements• <iframe>: embed one HTML page into another

– CSS and JS do not percolate down (or up) from one page to another by default; they are scoped to themselves

– If pages are in same domain, they can reach between each other (JavaScript)• “ContentDocument” property to go from embedder to embedded• “ownerDocument” property to go from embedded to embedder

• <object>: a multi-purpose embedding element usually used for Flash– Not a good idea as these tend to expose different APIs and it’s clumsy to try

and do this with a single element– Use @data to point to URL of the embedded– Use @type to tell browser what it is (e.g., type="application/x-shockwave-

flash“)– Use child <param> elements to pass additional data– Has fallback capability like <video> and <audio>

04/10/2023 21

Tables• Tables should be used for tabular data• Tables are “row-major” – organized into rows then cells. You can

define columns but only for stylistic purposes• Don’t use tables for layout because it confuses screen readers: CSS is

now more powerful for this purpose• <thead>, <tbody>, <tfoot>: organizes the table into sections• <tr>, <td>, <th>: rows and cells of the table

– Use @rowspan with caution: it can make it difficult to read the source code of the table

• <col>, <colgroup>: used solely as styling hooks for the columns– Set the four CSS properties 'width', 'border', 'background', and 'visibility'

on <col> elements, and they'll apply to the cells in that column.• <caption> - like figcaption, but for table

04/10/2023 22

Microdata Annotations

• Allows you to add custom vocabularies• Applies additional semantics to data that is

already visible on your page• Must define your own vocabulary with a

namespace• Can be useful to search engines – Google’s Rich Snippets program– People, locations, events, reviews, etc…

04/10/2023 23

CSS Properties• Classes and ID selectors

– ID selector is preceded by a hash character (#)– Class selector is preceded by a full stop (.)

• <div id=“top” class=“foo intro”> where this is in the CSS definitions:#top { background-color: #ccc }.intro { color: red}

– Selectors can be applied to specific element by stating the HTML selector first• p.jam { /*whatever*/ }

Style will only be applied to “p” elements with class “jam”

– Can be grouped to define all the same way, removes the need to redefine or require IDs on elements• h2, .thisclass, .thisother class { color: red }

• New Selectors– Specific attributes: input[type=“text”] {…} – More specific targeting: .row:nth-child(even) , .row:nth-child(odd) , h2:first-child,

h2 + header, div.text > div

• Pseudo-classes: triggered when something happens (active, hover, focus)– Usually find these on form elements and links

04/10/2023 24

Types of CSS Properties• Text and Fonts• Colors and backgrounds• Box model – dimensions, padding, margin, and borders• Positioning and display• Lists• Tables• Generated content• Paged Media• Misc• Webfonts

– @font-face { Font-family: ‘LeagueGothic’; src: url(LeagueGothic.otf);}

• Webkit – properties, animations, transforms, flexible box model, border images– Not supported by Mozilla

04/10/2023 25

JavaScript• Realtime Communication

– WebWorkers, WebSocket, • File Access

– File API and File System APIs for native drag and drop for both upload and download• Device Orientation (think tablets portrait or landscape)• Speech Input• Geolocation API: Share your location with trusted sites

– Latitude and longitude available to the JS on the page, can be sent back to the server to do location-aware things

– Use Modernizr – to detect support for geolocation• function get_location() {

if (Modernizr.geolocation) {navigator.geolocation.getCurrentPosition(show_map);

} else { // no native support; maybe try a fallback?

} }

• Put script calls at the end to get better response time and let the DOM build first• Webkit additions here too

04/10/2023 26

Local Storage• Persistent local storage: an abstraction layer for storing and retrieving

application-specific data like preferences or runtime state. • Can be stored in registry, INI files, XML files, or other place according to

platform convention• Can embed your own database, invent your own file format, etc.• Cookies are limited• A way to store key/value pairs locally, within the client browser • Data persists even if you navigate away from the website, close the

browser tab, exit the browser• Never transmitted to the remote web server (unlike cookies)• Implemented natively in browsers• Accessed via JavaScript • JavaScript can affect changes inside the browser view window04/10/2023 27

Resources• Dive Into HTML5- A very nice HTML5 book written by Mark Pilgrim. Free at

DiveIntoHTML5.org

• Every project you do should begin with the basic, fully-documented HTML5 Boilerplate system. http://html5boilerplate.com/

• For all the rest of the new features in HTML and JS, just refer to Paul Irish's wonderfully comprehensive list of cross-browser polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

• WhatWG http://whatwg.org for real world details about specific behaviors

• Free cheatsheets for CSS and Javascript from http://AddedBytes.com • CSS tutorials at http://htmldog.com

• Thanks to Tab Atkins, Google, for his HTML5 PDS at SFBay ACM!

04/10/2023 28

http://diveintohtml5.org/

http://html5boilerplate.com/

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

http://whatwg.org/

http://addedbytes.com/

http://htmldog.com/

Need a Mentorof your own?

[email protected]

mailto:[email protected]

Next TC Dojo Open Session

• Title: Creating Documentation Plans • Visiting Dojo Master: John Hedtke• Date: Monday 9 June 2014• Topic:

“Proper prior planning prevents poor performance.” Creating a good documentation plan will help you identify what you’re going to do and can be a valuable political document if the project shifts from under you. Docplans are even more important in a world where you have distributed teams and fragmented documents (many DITA topics!) Come learn how to make effective ones!

• Registration link: http://bit.ly/1lc8jQR

http://bit.ly/1lc8jQR

Next TC Dojo Arbortext Edition• Title: Localizing your stylesheets – XLIFF in Arbortext Styler• Date: Thursday 29 May 2014• Description:

One of the last things that gets localized is your stylesheet. Stylesheets have generated text and that generated text needs to be translated too. (After all it isn’t “Table of Contents” in Japanese.)

In this session, we’ll show you how to set your stylesheet up for localization. We’ll do a quick export of the generated text strings and then an import of the ‘translated’ strings. And we’ll publish our translated document!

Sound fun? It’s super easy to do and 30 minutes is all you need to understand how it works.

• Registration link: http://bit.ly/1mIAUD1

http://bit.ly/1mIAUD1

Next Master Series session – Tue May 27A single conversation among a small group of peers. Attendees will have the opportunity to present their challenges and solicit advice in a confidential supportive environment with other Master Series Members.

Sign up at http://tcdojo.org

http://tcdojo.org/

See You Next TimeDon’t forget to vote for your choice of upcoming session topics

http://svy.mk/120AaAb

[email protected] 408-660-3219

http://svy.mk/120AaAb

mailto:[email protected]

very brief intro to html5 [tc dojo open session]

Technology

void elements

use html syntax

selfclosed elements

html doctype use dont

xml syntax

text data use

html5 syntax html

end tags use