survivalkit 1.0.beta.8 → 1.0.beta.9
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.markdown +3 -0
- data/README.markdown +2 -2
- data/lib/survivalkit.rb +3 -2
- data/stylesheets/survivalkit/fonts/_font-awesome.scss +355 -0
- data/stylesheets/survivalkit/fonts/_league-gothic.scss +46 -0
- data/stylesheets/survivalkit/fonts/_ostrich-sans.scss +69 -0
- data/stylesheets/survivalkit/mixins/_ui.scss +22 -12
- data/stylesheets/survivalkit/survival-kit/_survival-kit.sass +157 -0
- data/templates/clean/manifest.rb +94 -0
- data/templates/drupal/script.js +2 -17
- data/templates/project/libs/jquery-1.8.2.min.js +2 -0
- data/templates/project/libs/modernizr-2.6.2.min.js +815 -0
- data/templates/project/manifest.rb +46 -27
- data/templates/project/script.js +2 -17
- data/templates/project/sources/FitText/README.md +52 -0
- data/templates/project/sources/FitText/example.html +60 -0
- data/templates/project/sources/FitText/jquery.fittext.js +43 -0
- data/templates/shared/fonts/font-awesome/fontawesome-webfont.eot +0 -0
- data/templates/shared/fonts/font-awesome/fontawesome-webfont.svg +255 -0
- data/templates/shared/fonts/font-awesome/fontawesome-webfont.ttf +0 -0
- data/templates/shared/fonts/font-awesome/fontawesome-webfont.woff +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.eot +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.svg +224 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.ttf +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.woff +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.eot +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.svg +224 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.ttf +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.woff +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-italic-webfont.eot +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-italic-webfont.svg +224 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-italic-webfont.ttf +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-italic-webfont.woff +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-regular-webfont.eot +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-regular-webfont.svg +223 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-regular-webfont.ttf +0 -0
- data/templates/shared/fonts/league-gothic/leaguegothic-regular-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-black-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-black-webfont.svg +141 -0
- data/templates/shared/fonts/ostrich/ostrich-black-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-black-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-bold-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-bold-webfont.svg +141 -0
- data/templates/shared/fonts/ostrich/ostrich-bold-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-bold-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-dashed-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-dashed-webfont.svg +141 -0
- data/templates/shared/fonts/ostrich/ostrich-dashed-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-dashed-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-light-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-light-webfont.svg +140 -0
- data/templates/shared/fonts/ostrich/ostrich-light-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-light-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-regular-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-regular-webfont.svg +141 -0
- data/templates/shared/fonts/ostrich/ostrich-regular-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-regular-webfont.woff +0 -0
- data/templates/shared/fonts/ostrich/ostrich-rounded-webfont.eot +0 -0
- data/templates/shared/fonts/ostrich/ostrich-rounded-webfont.svg +141 -0
- data/templates/shared/fonts/ostrich/ostrich-rounded-webfont.ttf +0 -0
- data/templates/shared/fonts/ostrich/ostrich-rounded-webfont.woff +0 -0
- data/templates/shared/partials/01-variables/_colors.scss +1 -1
- data/templates/shared/partials/01-variables/_fonts.scss +10 -0
- data/templates/shared/partials/06-ui-patterns/_drupal-patterns.scss +4 -5
- data/templates/shared/partials/07-styletile/_tile-design.scss +2 -2
- data/templates/shared/style.scss +2 -1
- metadata +73 -187
- data/stylesheets/survivalkit/survival_kit/_survival-kit.scss +0 -145
- data/templates/drupal/libs/320-up/helper.js +0 -146
- data/templates/drupal/libs/320-up/imgSizer.js +0 -61
- data/templates/drupal/libs/dd_belatedpng.js +0 -13
- data/templates/drupal/libs/formalize/README.txt +0 -11
- data/templates/drupal/libs/formalize/dojo.formalize.js +0 -174
- data/templates/drupal/libs/formalize/extjs.formalize.js +0 -168
- data/templates/drupal/libs/formalize/jquery.formalize.js +0 -158
- data/templates/drupal/libs/formalize/mootools.formalize.js +0 -163
- data/templates/drupal/libs/formalize/prototype.formalize.js +0 -171
- data/templates/drupal/libs/formalize/yui.formalize.js +0 -168
- data/templates/drupal/libs/jquery-1.6.js +0 -8865
- data/templates/drupal/libs/jquery-1.6.min.js +0 -16
- data/templates/drupal/libs/modernizr-2.0.min.js +0 -4
- data/templates/drupal/libs/mootools-core-1.3.1-full-compat-yc.js +0 -485
- data/templates/drupal/libs/plugins.js +0 -58
- data/templates/drupal/libs/respond.min.js +0 -7
- data/templates/drupal/libs/selectivizr-min.js +0 -5
- data/templates/drupal/libs/selectivizr.js +0 -5
- data/templates/project/files/apple-touch-icon-114x114-precomposed.png +0 -0
- data/templates/project/files/apple-touch-icon-72x72-precomposed.png +0 -0
- data/templates/project/files/apple-touch-icon.png +0 -0
- data/templates/project/files/crossdomain.xml +0 -25
- data/templates/project/files/favicon.ico +0 -0
- data/templates/project/files/favicon.png +0 -0
- data/templates/project/files/google.yml +0 -22
- data/templates/project/files/htaccess.htaccess +0 -478
- data/templates/project/files/html/404.html +0 -22
- data/templates/project/files/html/formalize_jquery_demo.html +0 -288
- data/templates/project/files/html/formalize_jquery_disabled.html +0 -288
- data/templates/project/files/html/formalize_jquery_errors.html +0 -288
- data/templates/project/files/html/index.html +0 -100
- data/templates/project/files/html/survivalkit/elements-common.html +0 -588
- data/templates/project/files/html/survivalkit/elements-html5.html +0 -2988
- data/templates/project/files/html/survivalkit/elements-typography.html +0 -240
- data/templates/project/files/html/survivalkit/elements-ui-patterns-drupal-css.html +0 -1883
- data/templates/project/files/html/survivalkit/elements-ui-patterns-drupal.html +0 -1882
- data/templates/project/files/html/survivalkit/elements-ui-patterns.html +0 -267
- data/templates/project/files/html/survivalkit/index.html +0 -132
- data/templates/project/files/html/survivalkit/styletile/index.html +0 -1
- data/templates/project/files/html/survivalkit/styletile/styletile.html +0 -215
- data/templates/project/files/humans.txt +0 -43
- data/templates/project/files/robots.txt +0 -5
- data/templates/project/libs/320-up/helper.js +0 -146
- data/templates/project/libs/320-up/imgSizer.js +0 -61
- data/templates/project/libs/jquery-1.6.js +0 -8865
- data/templates/project/libs/jquery-1.6.min.js +0 -16
- data/templates/project/libs/modernizr-2.0.min.js +0 -4
- data/templates/project/libs/plugins.js +0 -58
- data/templates/project/libs/selectivizr.js +0 -5
- data/templates/project/templates/_flashes.html.haml +0 -4
- data/templates/project/templates/_footer.html.haml +0 -2
- data/templates/project/templates/_head.html.haml +0 -26
- data/templates/project/templates/_header.html.haml +0 -1
- data/templates/project/templates/_javascripts.html.haml +0 -27
- data/templates/project/templates/_stylesheets.html.haml +0 -5
- data/templates/project/templates/application.html.haml +0 -28
- data/templates/project/templates/old/_layout.haml +0 -1
- data/templates/project/templates/old/home.html.haml +0 -14
- data/templates/project/templates/old/layouts/default.haml +0 -62
- data/templates/project/templates/old/layouts/survivalkit/default.haml +0 -64
- data/templates/project/templates/old/layouts/survivalkit/styletile.haml +0 -64
- data/templates/project/templates/old/survivalkit/_layout.haml +0 -1
- data/templates/project/templates/old/survivalkit/elements-common.haml +0 -33
- data/templates/project/templates/old/survivalkit/elements-html5.haml +0 -71
- data/templates/project/templates/old/survivalkit/elements-typography.haml +0 -100
- data/templates/project/templates/old/survivalkit/elements-ui-patterns-drupal.haml +0 -38
- data/templates/project/templates/old/survivalkit/elements-ui-patterns.haml +0 -23
- data/templates/project/templates/old/survivalkit/index.haml +0 -2
- data/templates/project/templates/old/survivalkit/partials/common/abbr.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/acronym.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/characters.haml +0 -11
- data/templates/project/templates/old/survivalkit/partials/common/cite.haml +0 -12
- data/templates/project/templates/old/survivalkit/partials/common/code.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/dfn.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/em.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/common/forms.haml +0 -27
- data/templates/project/templates/old/survivalkit/partials/common/headers.haml +0 -23
- data/templates/project/templates/old/survivalkit/partials/common/inline-images.haml +0 -9
- data/templates/project/templates/old/survivalkit/partials/common/kbd.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/common/links.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/common/lists.haml +0 -55
- data/templates/project/templates/old/survivalkit/partials/common/others.haml +0 -35
- data/templates/project/templates/old/survivalkit/partials/common/paragraphs.haml +0 -15
- data/templates/project/templates/old/survivalkit/partials/common/pre.haml +0 -27
- data/templates/project/templates/old/survivalkit/partials/common/q.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/samp.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/strong.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/common/tables.haml +0 -43
- data/templates/project/templates/old/survivalkit/partials/common/var.haml +0 -8
- data/templates/project/templates/old/survivalkit/partials/header-styletile.haml +0 -9
- data/templates/project/templates/old/survivalkit/partials/header.haml +0 -6
- data/templates/project/templates/old/survivalkit/partials/html5/a.haml +0 -36
- data/templates/project/templates/old/survivalkit/partials/html5/abbr.haml +0 -26
- data/templates/project/templates/old/survivalkit/partials/html5/address.haml +0 -27
- data/templates/project/templates/old/survivalkit/partials/html5/all-headings.haml +0 -31
- data/templates/project/templates/old/survivalkit/partials/html5/article.haml +0 -22
- data/templates/project/templates/old/survivalkit/partials/html5/aside.haml +0 -20
- data/templates/project/templates/old/survivalkit/partials/html5/b.haml +0 -21
- data/templates/project/templates/old/survivalkit/partials/html5/bdi.haml +0 -30
- data/templates/project/templates/old/survivalkit/partials/html5/blockquote.haml +0 -32
- data/templates/project/templates/old/survivalkit/partials/html5/cite.haml +0 -46
- data/templates/project/templates/old/survivalkit/partials/html5/code.haml +0 -70
- data/templates/project/templates/old/survivalkit/partials/html5/details.haml +0 -42
- data/templates/project/templates/old/survivalkit/partials/html5/dfn.haml +0 -52
- data/templates/project/templates/old/survivalkit/partials/html5/dl.haml +0 -69
- data/templates/project/templates/old/survivalkit/partials/html5/em.haml +0 -15
- data/templates/project/templates/old/survivalkit/partials/html5/fieldset.haml +0 -49
- data/templates/project/templates/old/survivalkit/partials/html5/figure.haml +0 -48
- data/templates/project/templates/old/survivalkit/partials/html5/footer.haml +0 -37
- data/templates/project/templates/old/survivalkit/partials/html5/header.haml +0 -44
- data/templates/project/templates/old/survivalkit/partials/html5/hgroup.haml +0 -20
- data/templates/project/templates/old/survivalkit/partials/html5/hr.haml +0 -52
- data/templates/project/templates/old/survivalkit/partials/html5/i.haml +0 -28
- data/templates/project/templates/old/survivalkit/partials/html5/kbd.haml +0 -19
- data/templates/project/templates/old/survivalkit/partials/html5/label.haml +0 -18
- data/templates/project/templates/old/survivalkit/partials/html5/li.haml +0 -91
- data/templates/project/templates/old/survivalkit/partials/html5/mark.haml +0 -30
- data/templates/project/templates/old/survivalkit/partials/html5/menu.haml +0 -39
- data/templates/project/templates/old/survivalkit/partials/html5/nav.haml +0 -68
- data/templates/project/templates/old/survivalkit/partials/html5/ol.haml +0 -23
- data/templates/project/templates/old/survivalkit/partials/html5/p.haml +0 -41
- data/templates/project/templates/old/survivalkit/partials/html5/pre.haml +0 -48
- data/templates/project/templates/old/survivalkit/partials/html5/q.haml +0 -34
- data/templates/project/templates/old/survivalkit/partials/html5/ruby.haml +0 -55
- data/templates/project/templates/old/survivalkit/partials/html5/s.haml +0 -17
- data/templates/project/templates/old/survivalkit/partials/html5/samp.haml +0 -27
- data/templates/project/templates/old/survivalkit/partials/html5/sample-forms.haml +0 -52
- data/templates/project/templates/old/survivalkit/partials/html5/sample-tables.haml +0 -152
- data/templates/project/templates/old/survivalkit/partials/html5/section.haml +0 -21
- data/templates/project/templates/old/survivalkit/partials/html5/small.haml +0 -33
- data/templates/project/templates/old/survivalkit/partials/html5/strong.haml +0 -25
- data/templates/project/templates/old/survivalkit/partials/html5/sub-sup.haml +0 -58
- data/templates/project/templates/old/survivalkit/partials/html5/table.haml +0 -196
- data/templates/project/templates/old/survivalkit/partials/html5/text-summary.haml +0 -305
- data/templates/project/templates/old/survivalkit/partials/html5/thead.haml +0 -67
- data/templates/project/templates/old/survivalkit/partials/html5/time.haml +0 -31
- data/templates/project/templates/old/survivalkit/partials/html5/ul.haml +0 -21
- data/templates/project/templates/old/survivalkit/partials/menu.haml +0 -14
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/block.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/breadcrumbs.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/comments.haml +0 -69
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/field-image.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/form-comment.haml +0 -54
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/form-login.haml +0 -23
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/form-new-account.haml +0 -24
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/form-new-password.haml +0 -16
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/links.haml +0 -6
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/menu.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/messages.haml +0 -21
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/node.haml +0 -28
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/pager.haml +0 -17
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/rss-link.haml +0 -5
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/search.haml +0 -14
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/site-name.haml +0 -6
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/tabs.haml +0 -14
- data/templates/project/templates/old/survivalkit/partials/patterns-drupal/taxonomy.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/patterns-general/block.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-general/breadcrumbs.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-general/comments.haml +0 -69
- data/templates/project/templates/old/survivalkit/partials/patterns-general/field-image.haml +0 -7
- data/templates/project/templates/old/survivalkit/partials/patterns-general/form-comment.haml +0 -54
- data/templates/project/templates/old/survivalkit/partials/patterns-general/form-login.haml +0 -23
- data/templates/project/templates/old/survivalkit/partials/patterns-general/form-new-account.haml +0 -24
- data/templates/project/templates/old/survivalkit/partials/patterns-general/form-new-password.haml +0 -16
- data/templates/project/templates/old/survivalkit/partials/patterns-general/links.haml +0 -6
- data/templates/project/templates/old/survivalkit/partials/patterns-general/menu.haml +0 -10
- data/templates/project/templates/old/survivalkit/partials/patterns-general/messages.haml +0 -21
- data/templates/project/templates/old/survivalkit/partials/patterns-general/node.haml +0 -28
- data/templates/project/templates/old/survivalkit/partials/patterns-general/pager.haml +0 -17
- data/templates/project/templates/old/survivalkit/partials/patterns-general/rss-link.haml +0 -5
- data/templates/project/templates/old/survivalkit/partials/patterns-general/search.haml +0 -14
- data/templates/project/templates/old/survivalkit/partials/patterns-general/site-name.haml +0 -6
- data/templates/project/templates/old/survivalkit/partials/patterns-general/tabs.haml +0 -14
- data/templates/project/templates/old/survivalkit/partials/patterns-general/taxonomy.haml +0 -10
- data/templates/project/templates/old/survivalkit/styletile/_layout.haml +0 -1
- data/templates/project/templates/old/survivalkit/styletile/index.redirect +0 -1
- data/templates/project/templates/old/survivalkit/styletile/styletile.haml +0 -60
- data/templates/project/templates/old/view_helpers.rb +0 -25
- data/templates/shared/survivalkit/drupal7.scss +0 -3224
- data/templates/shared/survivalkit/survivalkit.scss +0 -32
|
@@ -1,2988 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
|
|
3
|
-
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
|
|
4
|
-
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
|
|
5
|
-
<!--[if gt IE 8]><!-->
|
|
6
|
-
<html class='no-js' lang='en'>
|
|
7
|
-
<!--<![endif]-->
|
|
8
|
-
<head>
|
|
9
|
-
<meta charset='utf-8' />
|
|
10
|
-
<title>HTML5 Elements</title>
|
|
11
|
-
<meta content='' name='description' />
|
|
12
|
-
<meta content='' name='author' />
|
|
13
|
-
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
|
|
14
|
-
<meta content='True' name='HandheldFriendly' />
|
|
15
|
-
<meta content='320' name='MobileOptimized' />
|
|
16
|
-
<meta content='width=device-width, target-densitydpi=160, initial-scale=1.0' name='viewport' />
|
|
17
|
-
<!-- For iPhone 4 with high-resolution Retina display: -->
|
|
18
|
-
<link href='/apple-touch-icon-114x114-precomposed.png' rel='apple-touch-icon-precomposed' sizes='114x114' />
|
|
19
|
-
<!-- For first-generation iPad: -->
|
|
20
|
-
<link href='/apple-touch-icon-72x72-precomposed.png' rel='apple-touch-icon-precomposed' sizes='72x72' />
|
|
21
|
-
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
|
|
22
|
-
<link href='/apple-touch-icon-precomposed.png' rel='apple-touch-icon-precomposed' />
|
|
23
|
-
<!-- For Nokia -->
|
|
24
|
-
<link href='/apple-touch-icon.png' rel='shortcut icon' />
|
|
25
|
-
<!-- For everything else -->
|
|
26
|
-
<link href='/favicon.ico' rel='shortcut icon' />
|
|
27
|
-
<!-- iOS. Delete if not required -->
|
|
28
|
-
<meta content='yes' name='apple-mobile-web-app-capable' />
|
|
29
|
-
<meta content='black-translucent' name='apple-mobile-web-app-status-bar-style' />
|
|
30
|
-
<link href='splash.png' rel='apple-touch-startup-image' />
|
|
31
|
-
<!-- Microsoft. Delete if not required -->
|
|
32
|
-
<meta content='on' http-equiv='cleartype' />
|
|
33
|
-
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
|
|
34
|
-
<!--[if lt IE 7 ]> <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script> <![endif]-->
|
|
35
|
-
<!-- CSS -->
|
|
36
|
-
<link href='/css/style.css?v=1' rel='stylesheet' />
|
|
37
|
-
<link href='/css/survivalkit/survivalkit.css?v=1' rel='stylesheet' />
|
|
38
|
-
<!-- All JavaScript at the bottom, except for Modernizr and Respond. -->
|
|
39
|
-
<!--[if (lt IE 9) & (!IEMobile)]>
|
|
40
|
-
<script src="/js/libs/selectivizr-min.js"></script>
|
|
41
|
-
<![endif]-->
|
|
42
|
-
<script src='/js/libs/modernizr-2.0.min.js'></script>
|
|
43
|
-
<script src='/js/libs/respond.min.js'></script>
|
|
44
|
-
<!-- Typekit -->
|
|
45
|
-
<!--
|
|
46
|
-
<script src='http://use.typekit.com/xxxxxxx.js' type='text/javascript'></script>
|
|
47
|
-
<script type='text/javascript'>
|
|
48
|
-
//<![CDATA[
|
|
49
|
-
try{Typekit.load();}catch(e){}
|
|
50
|
-
//]]>
|
|
51
|
-
</script>
|
|
52
|
-
-->
|
|
53
|
-
</head>
|
|
54
|
-
<body class='survival-kit'>
|
|
55
|
-
<div id='page'>
|
|
56
|
-
<header>
|
|
57
|
-
<hgroup>
|
|
58
|
-
<h1>
|
|
59
|
-
<a href='/survivalkit/'>The Coding Designer's Survival Kit</a>
|
|
60
|
-
</h1>
|
|
61
|
-
<h2>HTML5 Elements</h2>
|
|
62
|
-
</hgroup>
|
|
63
|
-
<div class="intro">Based on examples from <a href='http://developers.whatwg.org/'>developers.whatwg.org</a></div>
|
|
64
|
-
</header>
|
|
65
|
-
<nav class='kit-nav'>
|
|
66
|
-
<ul>
|
|
67
|
-
<li>
|
|
68
|
-
<a href='/survivalkit/elements-common.html'>Common Markup</a>
|
|
69
|
-
</li>
|
|
70
|
-
<li>
|
|
71
|
-
<a href='/survivalkit/elements-html5.html'>Common HTML5</a>
|
|
72
|
-
</li>
|
|
73
|
-
<li>
|
|
74
|
-
<a href='/survivalkit/elements-typography.html'>Typography</a>
|
|
75
|
-
</li>
|
|
76
|
-
<li>
|
|
77
|
-
<a href='/survivalkit/elements-ui-patterns-drupal.html'>Drupal UI Patterns</a>
|
|
78
|
-
</li>
|
|
79
|
-
<li>
|
|
80
|
-
<a href='/survivalkit/elements-ui-patterns.html'>UI Patterns</a>
|
|
81
|
-
</li>
|
|
82
|
-
<li>
|
|
83
|
-
<a href='/survivalkit/styletile/styletile.html'>Style Tile</a>
|
|
84
|
-
</li>
|
|
85
|
-
</ul>
|
|
86
|
-
</nav>
|
|
87
|
-
<nav class='section-nav'></nav>
|
|
88
|
-
<div id='main' role='main'>
|
|
89
|
-
<section class='element-group' id='sections'>
|
|
90
|
-
<h1 class='section-title'>Sections</h1>
|
|
91
|
-
<div class='element' id='section'>
|
|
92
|
-
<h2 class='element-title'>
|
|
93
|
-
Section
|
|
94
|
-
</h2>
|
|
95
|
-
<p>
|
|
96
|
-
The
|
|
97
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-section-element'>section</a></code>
|
|
98
|
-
element
|
|
99
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
100
|
-
a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
|
|
101
|
-
</p>
|
|
102
|
-
<div class='markup'>
|
|
103
|
-
<section>
|
|
104
|
-
<h1>Red Delicious</h1>
|
|
105
|
-
<p>
|
|
106
|
-
These bright red apples are the most common found in many
|
|
107
|
-
supermarkets.
|
|
108
|
-
</p>
|
|
109
|
-
</section>
|
|
110
|
-
<section>
|
|
111
|
-
<h1>Granny Smith</h1>
|
|
112
|
-
<p>
|
|
113
|
-
These juicy, green apples make a great filling for
|
|
114
|
-
apple pies.
|
|
115
|
-
</p>
|
|
116
|
-
</section>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div class='element' id='nav'>
|
|
120
|
-
<h2 class='element-title'>
|
|
121
|
-
Nav
|
|
122
|
-
</h2>
|
|
123
|
-
<p>
|
|
124
|
-
The
|
|
125
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-nav-element'>nav</a></code>
|
|
126
|
-
element
|
|
127
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
128
|
-
a section of a page that links to other pages or to parts within the page: a section with navigation links.
|
|
129
|
-
</p>
|
|
130
|
-
<p>
|
|
131
|
-
Not all groups of links on a page need to be in a
|
|
132
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-nav-element'>nav</a></code>
|
|
133
|
-
element — only sections that consist of major navigation blocks are appropriate for the
|
|
134
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-nav-element'>nav</a></code>
|
|
135
|
-
element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The
|
|
136
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-footer-element'>footer</a></code>
|
|
137
|
-
element alone is sufficient for such cases, without a
|
|
138
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-nav-element'>nav</a></code>
|
|
139
|
-
element.
|
|
140
|
-
</p>
|
|
141
|
-
<div class='markup'>
|
|
142
|
-
<nav>
|
|
143
|
-
<h1>Navigation</h1>
|
|
144
|
-
<ul>
|
|
145
|
-
<li>
|
|
146
|
-
<a href=''>Index of all articles</a>
|
|
147
|
-
</li>
|
|
148
|
-
<li>
|
|
149
|
-
<a href=''>Things sheeple need to wake up for today</a>
|
|
150
|
-
</li>
|
|
151
|
-
<li>
|
|
152
|
-
<a href=''>Sheeple we have managed to wake</a>
|
|
153
|
-
</li>
|
|
154
|
-
</ul>
|
|
155
|
-
</nav>
|
|
156
|
-
</div>
|
|
157
|
-
<p>A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:</p>
|
|
158
|
-
<div class='markup'>
|
|
159
|
-
<nav>
|
|
160
|
-
<h1>Navigation</h1>
|
|
161
|
-
<p>
|
|
162
|
-
You are on my home page. To the north lies
|
|
163
|
-
<a href='/blog'>
|
|
164
|
-
my
|
|
165
|
-
blog
|
|
166
|
-
</a>,
|
|
167
|
-
from whence the sounds of battle can be heard. To the east
|
|
168
|
-
you can see a large mountain, upon which many
|
|
169
|
-
<a href='/school'>school papers</a>
|
|
170
|
-
are littered. Far up thus mountain
|
|
171
|
-
you can spy a little figure who appears to be me, desperately
|
|
172
|
-
scribbling a
|
|
173
|
-
<a href='/school/thesis'>thesis</a>.
|
|
174
|
-
</p>
|
|
175
|
-
<p>
|
|
176
|
-
To the west are several exits. One fun-looking exit is labeled
|
|
177
|
-
<a href='http://games.example.com/'>"games"</a>.
|
|
178
|
-
Another more
|
|
179
|
-
boring-looking exit is labeled
|
|
180
|
-
<a href='http://isp.example.net/'>ISP™</a>.
|
|
181
|
-
</p>
|
|
182
|
-
<p>
|
|
183
|
-
To the south lies a dark and dank
|
|
184
|
-
<a href='/about'>
|
|
185
|
-
contacts
|
|
186
|
-
page
|
|
187
|
-
</a>.
|
|
188
|
-
Cobwebs cover its disused entrance, and at one point you
|
|
189
|
-
see a rat run quickly out of the page.
|
|
190
|
-
</p>
|
|
191
|
-
</nav>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
<div class='element' id='article'>
|
|
195
|
-
<h2 class='element-title'>
|
|
196
|
-
Article
|
|
197
|
-
</h2>
|
|
198
|
-
<p>
|
|
199
|
-
The
|
|
200
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-article-element'>article</a></code>
|
|
201
|
-
element
|
|
202
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
203
|
-
a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
|
|
204
|
-
</p>
|
|
205
|
-
<div class='markup'>
|
|
206
|
-
<article>
|
|
207
|
-
<header>
|
|
208
|
-
<h1>The Very First Rule of Life</h1>
|
|
209
|
-
<p>
|
|
210
|
-
<time datetime='2009-10-09T14:28-08:00' pubdate=''></time>
|
|
211
|
-
</p>
|
|
212
|
-
</header>
|
|
213
|
-
<p>
|
|
214
|
-
If there's a microphone anywhere near you, assume it's hot and
|
|
215
|
-
sending whatever you're saying to the world. Seriously.
|
|
216
|
-
</p>
|
|
217
|
-
<p>…</p>
|
|
218
|
-
<footer>
|
|
219
|
-
<a href='?comments=1'>Show comments...</a>
|
|
220
|
-
</footer>
|
|
221
|
-
</article>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
<div class='element' id='aside'>
|
|
225
|
-
<h2 class='element-title'>
|
|
226
|
-
Aside
|
|
227
|
-
</h2>
|
|
228
|
-
<p>
|
|
229
|
-
The
|
|
230
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-aside-element'>aside</a></code>
|
|
231
|
-
element
|
|
232
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
233
|
-
a section of a page that consists of content that is tangentially related to the content around the
|
|
234
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-aside-element'>aside</a></code>
|
|
235
|
-
element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
|
|
236
|
-
</p>
|
|
237
|
-
<div class='markup'>
|
|
238
|
-
<aside>
|
|
239
|
-
<h1>Switzerland</h1>
|
|
240
|
-
<p>
|
|
241
|
-
Switzerland, a land-locked country in the middle of geographic
|
|
242
|
-
Europe, has not joined the geopolitical European Union, though it is
|
|
243
|
-
a signatory to a number of European treaties.
|
|
244
|
-
</p>
|
|
245
|
-
</aside>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
<div class='element' id='all-headings'>
|
|
249
|
-
<h2 class='element-title'>
|
|
250
|
-
The h1, h2, h3, h4, h5, and h6 elements
|
|
251
|
-
</h2>
|
|
252
|
-
<p>
|
|
253
|
-
These elements
|
|
254
|
-
<a href='http://developers.whatwg.org/sections.html#represents' title='represents'>represent</a>
|
|
255
|
-
headings for their sections.
|
|
256
|
-
</p>
|
|
257
|
-
<p>
|
|
258
|
-
The semantics and meaning of these elements are defined in the section on
|
|
259
|
-
<a href='http://developers.whatwg.org/sections.html#headings-and-sections'>headings and sections</a>.
|
|
260
|
-
</p>
|
|
261
|
-
<p>These two snippets are equivalent in the outline:</p>
|
|
262
|
-
<div class='markup'>
|
|
263
|
-
<h1>Let's call it a draw(ing surface)</h1>
|
|
264
|
-
<h2>Diving in</h2>
|
|
265
|
-
<h2>Simple shapes</h2>
|
|
266
|
-
<h2>Canvas coordinates</h2>
|
|
267
|
-
<h3>Canvas coordinates diagram</h3>
|
|
268
|
-
<h2>Paths</h2>
|
|
269
|
-
</div>
|
|
270
|
-
<div class='markup'>
|
|
271
|
-
<h1>Let's call it a draw(ing surface)</h1>
|
|
272
|
-
<section>
|
|
273
|
-
<h1>Diving in</h1>
|
|
274
|
-
</section>
|
|
275
|
-
<section>
|
|
276
|
-
<h1>Simple shapes</h1>
|
|
277
|
-
</section>
|
|
278
|
-
<section>
|
|
279
|
-
<h1>Canvas coordinates</h1>
|
|
280
|
-
<section>
|
|
281
|
-
<h1>Canvas coordinates diagram</h1>
|
|
282
|
-
</section>
|
|
283
|
-
</section>
|
|
284
|
-
<section>
|
|
285
|
-
<h1>Paths</h1>
|
|
286
|
-
</section>
|
|
287
|
-
</div>
|
|
288
|
-
</div>
|
|
289
|
-
<div class='element' id='hgroup'>
|
|
290
|
-
<h2 class='element-title'>
|
|
291
|
-
hgroup
|
|
292
|
-
</h2>
|
|
293
|
-
<p>
|
|
294
|
-
The
|
|
295
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-hgroup-element'>hgroup</a></code>
|
|
296
|
-
element
|
|
297
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
298
|
-
the heading of a section. The element is used to group a set of
|
|
299
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements'>h1</a></code>u{2013}
|
|
300
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements'>h6</a></code>
|
|
301
|
-
elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
|
|
302
|
-
</p>
|
|
303
|
-
<div class='markup'>
|
|
304
|
-
<hgroup>
|
|
305
|
-
<h1>Dr. Strangelove</h1>
|
|
306
|
-
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
|
|
307
|
-
</hgroup>
|
|
308
|
-
</div>
|
|
309
|
-
</div>
|
|
310
|
-
<div class='element' id='header'>
|
|
311
|
-
<h2 class='element-title'>
|
|
312
|
-
Header
|
|
313
|
-
</h2>
|
|
314
|
-
<p>
|
|
315
|
-
The
|
|
316
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-header-element'>header</a></code>
|
|
317
|
-
element
|
|
318
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
319
|
-
a group of introductory or navigational aids.
|
|
320
|
-
</p>
|
|
321
|
-
<p>
|
|
322
|
-
A
|
|
323
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-header-element'>header</a></code>
|
|
324
|
-
element is intended to usually contain the section's heading (an
|
|
325
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements'>h1</a></code>–
|
|
326
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements'>h6</a></code>
|
|
327
|
-
element or an
|
|
328
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-hgroup-element'>hgroup</a></code>
|
|
329
|
-
element), but this is not required. The
|
|
330
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-header-element'>header</a></code>
|
|
331
|
-
element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
|
|
332
|
-
</p>
|
|
333
|
-
<div class='markup'>
|
|
334
|
-
<header>
|
|
335
|
-
<h1>Little Green Guys With Guns</h1>
|
|
336
|
-
<nav>
|
|
337
|
-
<ul>
|
|
338
|
-
<li>
|
|
339
|
-
<a href='/games'>Games</a>
|
|
340
|
-
<li>
|
|
341
|
-
<a href='/forum'>Forum</a>
|
|
342
|
-
<li>
|
|
343
|
-
<a href='/download'>Download</a>
|
|
344
|
-
</li>
|
|
345
|
-
</li>
|
|
346
|
-
</li>
|
|
347
|
-
</ul>
|
|
348
|
-
</nav>
|
|
349
|
-
<h2>Important News</h2>
|
|
350
|
-
<!-- this starts a second subsection -->
|
|
351
|
-
<!-- this is part of the subsection entitled "Important News" -->
|
|
352
|
-
<p>To play today's games you will need to update your client.</p>
|
|
353
|
-
<h2>Games</h2>
|
|
354
|
-
<!-- this starts a third subsection -->
|
|
355
|
-
</header>
|
|
356
|
-
</div>
|
|
357
|
-
</div>
|
|
358
|
-
<div class='element' id='footer'>
|
|
359
|
-
<h2 class='element-title'>
|
|
360
|
-
Footer
|
|
361
|
-
</h2>
|
|
362
|
-
<p>
|
|
363
|
-
The
|
|
364
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-footer-element'>footer</a></code>
|
|
365
|
-
element
|
|
366
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
367
|
-
a footer for its nearest ancestor
|
|
368
|
-
<a href='content-models.html#sectioning-content'>sectioning content</a>
|
|
369
|
-
or
|
|
370
|
-
<a href='http://developers.whatwg.org/sections.html#sectioning-root'>sectioning root</a>
|
|
371
|
-
element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
|
|
372
|
-
</p>
|
|
373
|
-
<p>Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.</p>
|
|
374
|
-
<div class='markup'>
|
|
375
|
-
<article>
|
|
376
|
-
<h1>My Favorite Trains</h1>
|
|
377
|
-
<p>I love my trains. My favorite train of all time is a Köf.</p>
|
|
378
|
-
<p>
|
|
379
|
-
It is fun to see them pull some coal cars because they look so
|
|
380
|
-
dwarfed in comparison.
|
|
381
|
-
</p>
|
|
382
|
-
<footer>
|
|
383
|
-
<!-- footer for article -->
|
|
384
|
-
<P>
|
|
385
|
-
Published
|
|
386
|
-
<time datetime='2009-09-15T14:54-07:00' pubdate=''></time>
|
|
387
|
-
</P>
|
|
388
|
-
</footer>
|
|
389
|
-
</article>
|
|
390
|
-
<footer>
|
|
391
|
-
<!-- site wide footer -->
|
|
392
|
-
<nav>
|
|
393
|
-
<p>
|
|
394
|
-
<a href='/credits.html'>Credits</a>
|
|
395
|
-
—
|
|
396
|
-
<a href='/tos.html'>Terms of Service</a>
|
|
397
|
-
—
|
|
398
|
-
<a href='/index.html'>Blog Index</a>
|
|
399
|
-
</p>
|
|
400
|
-
</nav>
|
|
401
|
-
<p>Copyright © 2009 Gordon Freeman</p>
|
|
402
|
-
</footer>
|
|
403
|
-
</div>
|
|
404
|
-
</div>
|
|
405
|
-
<div class='element' id='address'>
|
|
406
|
-
<h2 class='element-title'>
|
|
407
|
-
Address
|
|
408
|
-
</h2>
|
|
409
|
-
<p>
|
|
410
|
-
The
|
|
411
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-address-element'>address</a></code>
|
|
412
|
-
element
|
|
413
|
-
<a href='http://developers.whatwg.org/sections.html#represents'>represents</a>
|
|
414
|
-
the contact information for its nearest
|
|
415
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-article-element'>article</a></code>
|
|
416
|
-
or
|
|
417
|
-
<code><a href='http://developers.whatwg.org/sections.html#the-body-element-0'>body</a></code>
|
|
418
|
-
element ancestor. If that is
|
|
419
|
-
<a href='dom.html#the-body-element'>the body element</a>,
|
|
420
|
-
then the contact information applies to the document as a whole.
|
|
421
|
-
</p>
|
|
422
|
-
<div class='markup'>
|
|
423
|
-
<address><a href=''>Dave Raggett</a>,
|
|
424
|
-
<a href=''>Arnaud Le Hors</a>,
|
|
425
|
-
contact persons for the
|
|
426
|
-
<a href=''>W3C HTML Activity</a>
|
|
427
|
-
</address>
|
|
428
|
-
</div>
|
|
429
|
-
</div>
|
|
430
|
-
</section>
|
|
431
|
-
<section class='element-group' id='grouping'>
|
|
432
|
-
<h1 class='section-title'>Grouping</h1>
|
|
433
|
-
<div class='element' id='p'>
|
|
434
|
-
<h2 class='element-title'>
|
|
435
|
-
p
|
|
436
|
-
</h2>
|
|
437
|
-
<p>
|
|
438
|
-
The
|
|
439
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-p-element'>p</a></code>
|
|
440
|
-
element
|
|
441
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
442
|
-
a
|
|
443
|
-
<a href='content-models.html#paragraph'>paragraph</a>.
|
|
444
|
-
</p>
|
|
445
|
-
<div class='markup'>
|
|
446
|
-
<p>
|
|
447
|
-
The little kitten gently seated himself on a piece of
|
|
448
|
-
carpet. Later in his life, this would be referred to as the time the
|
|
449
|
-
cat sat on the mat.
|
|
450
|
-
</p>
|
|
451
|
-
</div>
|
|
452
|
-
<div class='markup'>
|
|
453
|
-
<fieldset>
|
|
454
|
-
<legend>Personal information</legend>
|
|
455
|
-
<p>
|
|
456
|
-
<label>
|
|
457
|
-
Name:
|
|
458
|
-
<input name='n' />
|
|
459
|
-
</label>
|
|
460
|
-
<label>
|
|
461
|
-
<input name='anon' type='checkbox'>Hide from other users</input>
|
|
462
|
-
</label>
|
|
463
|
-
</p>
|
|
464
|
-
<p>
|
|
465
|
-
<label>
|
|
466
|
-
Address:
|
|
467
|
-
<textarea name='a'></textarea>
|
|
468
|
-
</label>
|
|
469
|
-
</p>
|
|
470
|
-
</fieldset>
|
|
471
|
-
</div>
|
|
472
|
-
<div class='markup'>
|
|
473
|
-
<p>
|
|
474
|
-
There was once an example from Femley,
|
|
475
|
-
<br>
|
|
476
|
-
Whose markup was of dubious quality.
|
|
477
|
-
<br>
|
|
478
|
-
The validator complained,
|
|
479
|
-
<br>
|
|
480
|
-
So the author was pained,
|
|
481
|
-
<br>
|
|
482
|
-
To move the error from the markup to the rhyming.
|
|
483
|
-
</br>
|
|
484
|
-
</br>
|
|
485
|
-
</br>
|
|
486
|
-
</br>
|
|
487
|
-
</p>
|
|
488
|
-
</div>
|
|
489
|
-
</div>
|
|
490
|
-
<div class='element' id='hr'>
|
|
491
|
-
<h2 class='element-title'>
|
|
492
|
-
hr
|
|
493
|
-
</h2>
|
|
494
|
-
<p>
|
|
495
|
-
The
|
|
496
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-hr-element'>hr</a></code>
|
|
497
|
-
element
|
|
498
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
499
|
-
a
|
|
500
|
-
<a href='content-models.html#paragraph'>paragraph</a>-level
|
|
501
|
-
thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
|
|
502
|
-
</p>
|
|
503
|
-
<div class='markup'>
|
|
504
|
-
<section>
|
|
505
|
-
<h1>Communication</h1>
|
|
506
|
-
<p>
|
|
507
|
-
There are various methods of communication. This section
|
|
508
|
-
covers a few of the important ones used by the project.
|
|
509
|
-
</p>
|
|
510
|
-
<hr>
|
|
511
|
-
<p>
|
|
512
|
-
Communication stones seem to come in pairs and have mysterious
|
|
513
|
-
properties:
|
|
514
|
-
</p>
|
|
515
|
-
<ul>
|
|
516
|
-
<li>
|
|
517
|
-
They can transfer thoughts in two directions once activated
|
|
518
|
-
if used alone.
|
|
519
|
-
</li>
|
|
520
|
-
<li>
|
|
521
|
-
If used with another device, they can transfer one's
|
|
522
|
-
consciousness to another body.
|
|
523
|
-
</li>
|
|
524
|
-
<li>
|
|
525
|
-
If both stones are used with another device, the
|
|
526
|
-
consciousnesses switch bodies.
|
|
527
|
-
</li>
|
|
528
|
-
</ul>
|
|
529
|
-
<hr>
|
|
530
|
-
<p>
|
|
531
|
-
Radios use the electromagnetic spectrum in the meter range and
|
|
532
|
-
longer.
|
|
533
|
-
</p>
|
|
534
|
-
<hr>
|
|
535
|
-
<p>
|
|
536
|
-
Signal flares use the electromagnetic spectrum in the
|
|
537
|
-
nanometer range.
|
|
538
|
-
</p>
|
|
539
|
-
</hr>
|
|
540
|
-
</hr>
|
|
541
|
-
</hr>
|
|
542
|
-
</section>
|
|
543
|
-
</div>
|
|
544
|
-
<div class='markup'>
|
|
545
|
-
<section>
|
|
546
|
-
<h1>Food</h1>
|
|
547
|
-
<p>All food at the project is rationed:</p>
|
|
548
|
-
<dl>
|
|
549
|
-
<dt>Potatoes</dt>
|
|
550
|
-
<dd>Two per day</dd>
|
|
551
|
-
<dt>Soup</dt>
|
|
552
|
-
<dd>One bowl per day</dd>
|
|
553
|
-
</dl>
|
|
554
|
-
<hr>
|
|
555
|
-
<p>Cooking is done by the chefs on a set rotation.</p>
|
|
556
|
-
</hr>
|
|
557
|
-
</section>
|
|
558
|
-
</div>
|
|
559
|
-
</div>
|
|
560
|
-
<div class='element' id='pre'>
|
|
561
|
-
<h2 class='element-title'>
|
|
562
|
-
pre
|
|
563
|
-
</h2>
|
|
564
|
-
<p>
|
|
565
|
-
The
|
|
566
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-pre-element'>pre</a></code>
|
|
567
|
-
element
|
|
568
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
569
|
-
a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
|
|
570
|
-
</p>
|
|
571
|
-
<div class='markup'>
|
|
572
|
-
<p>
|
|
573
|
-
This is the
|
|
574
|
-
<code>Panel</code>
|
|
575
|
-
constructor:
|
|
576
|
-
</p>
|
|
577
|
-
<pre><code>function Panel(element, canClose, closeHandler) {
 this.element = element;
 this.canClose = canClose;
 this.closeHandler = function () { if (closeHandler) closeHandler() };
 } .markup</code></pre>
|
|
578
|
-
<pre><samp>
|
|
579
|
-
You are in an open field west of a big white house with a boarded
|
|
580
|
-
front door.
|
|
581
|
-
There is a small mailbox here.
|
|
582
|
-
>
|
|
583
|
-
</samp>
|
|
584
|
-
<kbd>open mailbox</kbd>
|
|
585
|
-
<samp>
|
|
586
|
-
Opening the mailbox reveals:
|
|
587
|
-
A leaflet.
|
|
588
|
-
>
|
|
589
|
-
</samp></pre>
|
|
590
|
-
</div>
|
|
591
|
-
<div class='markup'>
|
|
592
|
-
<pre> () o | | /| / o
 /\ ,_ __, | | |__/ _|_
 / \| | / | | |_| | |_/ | |/ | \ | |
/(__/ \_/|_/ |_/ \/ |_/ \/ \_/|_/|__/ | \_/|_/|_/</pre>
|
|
593
|
-
</div>
|
|
594
|
-
</div>
|
|
595
|
-
<div class='element' id='blockquote'>
|
|
596
|
-
<h2 class='element-title'>
|
|
597
|
-
blockquote
|
|
598
|
-
</h2>
|
|
599
|
-
<p>
|
|
600
|
-
The
|
|
601
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-blockquote-element'>blockquote</a></code>
|
|
602
|
-
element
|
|
603
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
604
|
-
a section that is quoted from another source.
|
|
605
|
-
</p>
|
|
606
|
-
<div class='markup'>
|
|
607
|
-
<p>
|
|
608
|
-
His next piece was the aptly named
|
|
609
|
-
<cite>Sonnet 130</cite>:
|
|
610
|
-
</p>
|
|
611
|
-
<blockquote cite='http://quotes.example.org/s/sonnet130.html'>
|
|
612
|
-
<p>
|
|
613
|
-
My mistress' eyes are nothing like the sun,
|
|
614
|
-
<br>
|
|
615
|
-
Coral is far more red, than her lips red...
|
|
616
|
-
</br>
|
|
617
|
-
</p>
|
|
618
|
-
</blockquote>
|
|
619
|
-
</div>
|
|
620
|
-
<div class='markup'>
|
|
621
|
-
<p>He began his list of "lessons" with the following:</p>
|
|
622
|
-
<blockquote>
|
|
623
|
-
One should never assume that his side of
|
|
624
|
-
the issue will be recognized, let alone that it will
|
|
625
|
-
be conceded to have merits.
|
|
626
|
-
</blockquote>
|
|
627
|
-
<p>He continued with a number of similar points, ending with:</p>
|
|
628
|
-
<blockquote>
|
|
629
|
-
Finally, one should be prepared for the threat
|
|
630
|
-
of breakdown in negotiations at any given moment and not
|
|
631
|
-
be cowed by the possiblity.
|
|
632
|
-
</blockquote>
|
|
633
|
-
<p>We shall now discuss these points</p>
|
|
634
|
-
</div>
|
|
635
|
-
</div>
|
|
636
|
-
<div class='element' id='ol'>
|
|
637
|
-
<h2 class='element-title'>
|
|
638
|
-
ol
|
|
639
|
-
</h2>
|
|
640
|
-
<p>
|
|
641
|
-
The
|
|
642
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-ol-element'>ol</a></code>
|
|
643
|
-
element
|
|
644
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
645
|
-
a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
|
|
646
|
-
</p>
|
|
647
|
-
<div class='markup'>
|
|
648
|
-
<p>
|
|
649
|
-
I have lived in the following countries (given in the order of when
|
|
650
|
-
I first lived there):
|
|
651
|
-
</p>
|
|
652
|
-
<ol>
|
|
653
|
-
<li>
|
|
654
|
-
Switzerland
|
|
655
|
-
<li>
|
|
656
|
-
United Kingdom
|
|
657
|
-
<li>
|
|
658
|
-
United States
|
|
659
|
-
<li>
|
|
660
|
-
Norway
|
|
661
|
-
</li>
|
|
662
|
-
</li>
|
|
663
|
-
</li>
|
|
664
|
-
</li>
|
|
665
|
-
</ol>
|
|
666
|
-
</div>
|
|
667
|
-
</div>
|
|
668
|
-
<div class='element' id='ul'>
|
|
669
|
-
<h2 class='element-title'>
|
|
670
|
-
ul
|
|
671
|
-
</h2>
|
|
672
|
-
<p>
|
|
673
|
-
The
|
|
674
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-ul-element'>ul</a></code>
|
|
675
|
-
element
|
|
676
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
677
|
-
a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
|
|
678
|
-
</p>
|
|
679
|
-
<div class='markup'>
|
|
680
|
-
<p>I have lived in the following countries:</p>
|
|
681
|
-
<ul>
|
|
682
|
-
<li>
|
|
683
|
-
Norway
|
|
684
|
-
<li>
|
|
685
|
-
Switzerland
|
|
686
|
-
<li>
|
|
687
|
-
United Kingdom
|
|
688
|
-
<li>
|
|
689
|
-
United States
|
|
690
|
-
</li>
|
|
691
|
-
</li>
|
|
692
|
-
</li>
|
|
693
|
-
</li>
|
|
694
|
-
</ul>
|
|
695
|
-
</div>
|
|
696
|
-
</div>
|
|
697
|
-
<div class='element' id='li'>
|
|
698
|
-
<h2 class='element-title'>
|
|
699
|
-
li
|
|
700
|
-
</h2>
|
|
701
|
-
<p>
|
|
702
|
-
The
|
|
703
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-li-element'>li</a></code>
|
|
704
|
-
element
|
|
705
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
706
|
-
a list item. If its parent element is an
|
|
707
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-ol-element'>ol</a></code>,
|
|
708
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-ul-element'>ul</a></code>,
|
|
709
|
-
or
|
|
710
|
-
<code><a href='interactive-elements.html#menus'>menu</a></code>
|
|
711
|
-
element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other
|
|
712
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-li-element'>li</a></code>
|
|
713
|
-
element.
|
|
714
|
-
</p>
|
|
715
|
-
<div class='markup'>
|
|
716
|
-
<figure>
|
|
717
|
-
<figcaption>The top 10 movies of all time</figcaption>
|
|
718
|
-
<ol>
|
|
719
|
-
<li value='10'><cite>Josie and the Pussycats</cite>, 2001
|
|
720
|
-
</li>
|
|
721
|
-
<li value='9'><cite lang='sh'>Црна мачка, бели мачор</cite>, 1998
|
|
722
|
-
</li>
|
|
723
|
-
<li value='8'><cite>A Bug's Life</cite>, 1998
|
|
724
|
-
</li>
|
|
725
|
-
<li value='7'><cite>Toy Story</cite>, 1995
|
|
726
|
-
</li>
|
|
727
|
-
<li value='6'><cite>Monsters, Inc</cite>, 2001
|
|
728
|
-
</li>
|
|
729
|
-
<li value='5'><cite>Cars</cite>, 2006
|
|
730
|
-
</li>
|
|
731
|
-
<li value='4'><cite>Toy Story 2</cite>, 1999
|
|
732
|
-
</li>
|
|
733
|
-
<li value='3'><cite>Finding Nemo</cite>, 2003
|
|
734
|
-
</li>
|
|
735
|
-
<li value='2'><cite>The Incredibles</cite>, 2004
|
|
736
|
-
</li>
|
|
737
|
-
<li value='1'><cite>Ratatouille</cite>, 2007
|
|
738
|
-
</li>
|
|
739
|
-
</ol>
|
|
740
|
-
</figure>
|
|
741
|
-
</div>
|
|
742
|
-
<div class='markup'>
|
|
743
|
-
<figure>
|
|
744
|
-
<figcaption>The top 10 movies of all time</figcaption>
|
|
745
|
-
<ol reversed=''>
|
|
746
|
-
<li><cite>Josie and the Pussycats</cite>, 2001
|
|
747
|
-
</li>
|
|
748
|
-
<li><cite lang='sh'>Црна мачка, бели мачор</cite>, 1998
|
|
749
|
-
</li>
|
|
750
|
-
<li><cite>A Bug's Life</cite>, 1998
|
|
751
|
-
</li>
|
|
752
|
-
<li><cite>Toy Story</cite>, 1995
|
|
753
|
-
</li>
|
|
754
|
-
<li><cite>Monsters, Inc</cite>, 2001
|
|
755
|
-
</li>
|
|
756
|
-
<li><cite>Cars</cite>, 2006
|
|
757
|
-
</li>
|
|
758
|
-
<li><cite>Toy Story 2</cite>, 1999
|
|
759
|
-
</li>
|
|
760
|
-
<li><cite>Finding Nemo</cite>, 2003
|
|
761
|
-
</li>
|
|
762
|
-
<li><cite>The Incredibles</cite>, 2004
|
|
763
|
-
</li>
|
|
764
|
-
<li><cite>Ratatouille</cite>, 2007
|
|
765
|
-
</li>
|
|
766
|
-
</ol>
|
|
767
|
-
</figure>
|
|
768
|
-
</div>
|
|
769
|
-
</div>
|
|
770
|
-
<div class='element' id='dl'>
|
|
771
|
-
<hgroup>
|
|
772
|
-
<h2 class='element-title'>
|
|
773
|
-
dl
|
|
774
|
-
</h2>
|
|
775
|
-
<h3 class='element-title'>
|
|
776
|
-
dt
|
|
777
|
-
</h3>
|
|
778
|
-
<h3 class='element-title'>
|
|
779
|
-
dd
|
|
780
|
-
</h3>
|
|
781
|
-
</hgroup>
|
|
782
|
-
<p>
|
|
783
|
-
The
|
|
784
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a></code>
|
|
785
|
-
element
|
|
786
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
787
|
-
an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (
|
|
788
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dt-element'>dt</a></code>
|
|
789
|
-
elements) followed by one or more values (
|
|
790
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dd-element'>dd</a></code>
|
|
791
|
-
elements). Within a single
|
|
792
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a></code>
|
|
793
|
-
element, there should not be more than one
|
|
794
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dt-element'>dt</a></code>
|
|
795
|
-
element for each name.
|
|
796
|
-
</p>
|
|
797
|
-
<p>
|
|
798
|
-
The
|
|
799
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dt-element'>dt</a></code>
|
|
800
|
-
element
|
|
801
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
802
|
-
the term, or name, part of a term-description group in a description list (
|
|
803
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a></code>
|
|
804
|
-
element).
|
|
805
|
-
</p>
|
|
806
|
-
<p>
|
|
807
|
-
The
|
|
808
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dd-element'>dd</a></code>
|
|
809
|
-
element
|
|
810
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
811
|
-
the description, definition, or value, part of a term-description group in a description list (
|
|
812
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a></code>
|
|
813
|
-
element).
|
|
814
|
-
</p>
|
|
815
|
-
<div class='markup'>
|
|
816
|
-
<dl>
|
|
817
|
-
<dt>
|
|
818
|
-
Authors
|
|
819
|
-
<dd>
|
|
820
|
-
John
|
|
821
|
-
<dd>
|
|
822
|
-
Luke
|
|
823
|
-
<dt>
|
|
824
|
-
Editor
|
|
825
|
-
<dd>
|
|
826
|
-
Frank
|
|
827
|
-
</dd>
|
|
828
|
-
</dt>
|
|
829
|
-
</dd>
|
|
830
|
-
</dd>
|
|
831
|
-
</dt>
|
|
832
|
-
</dl>
|
|
833
|
-
</div>
|
|
834
|
-
<div class='markup'>
|
|
835
|
-
<dl>
|
|
836
|
-
<dt lang='en-US'>
|
|
837
|
-
<dfn>color</dfn>
|
|
838
|
-
</dt>
|
|
839
|
-
<dt lang='en-GB'>
|
|
840
|
-
<dfn>colour</dfn>
|
|
841
|
-
</dt>
|
|
842
|
-
<dd>
|
|
843
|
-
A sensation which (in humans) derives from the ability of
|
|
844
|
-
the fine structure of the eye to distinguish three differently
|
|
845
|
-
filtered analyses of a view.
|
|
846
|
-
</dd>
|
|
847
|
-
</dl>
|
|
848
|
-
</div>
|
|
849
|
-
</div>
|
|
850
|
-
<div class='element' id='figure'>
|
|
851
|
-
<hgroup>
|
|
852
|
-
<h2 class='element-title'>
|
|
853
|
-
figure
|
|
854
|
-
</h2>
|
|
855
|
-
<h3 class='element-title'>
|
|
856
|
-
figcaption
|
|
857
|
-
</h3>
|
|
858
|
-
</hgroup>
|
|
859
|
-
<p>
|
|
860
|
-
The
|
|
861
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-figure-element'>figure</a></code>
|
|
862
|
-
element
|
|
863
|
-
<a href='http://developers.whatwg.org/grouping-content.html#represents'>represents</a>
|
|
864
|
-
some
|
|
865
|
-
<a href='content-models.html#flow-content'>flow content</a>,
|
|
866
|
-
optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
|
|
867
|
-
</p>
|
|
868
|
-
<p>The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.</p>
|
|
869
|
-
<p>
|
|
870
|
-
The
|
|
871
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-figcaption-element'>figcaption</a></code>
|
|
872
|
-
element child of the element, if any, represents the caption of the
|
|
873
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-figure-element'>figure</a></code>
|
|
874
|
-
element's contents. If there is no child
|
|
875
|
-
<code><a href='http://developers.whatwg.org/grouping-content.html#the-figcaption-element'>figcaption</a></code>
|
|
876
|
-
element, then there is no caption.
|
|
877
|
-
</p>
|
|
878
|
-
<div class='markup'>
|
|
879
|
-
<p>
|
|
880
|
-
In
|
|
881
|
-
<a href='http://developers.whatwg.org/grouping-content.html#l4'>listing 4</a>
|
|
882
|
-
we see the primary core interface
|
|
883
|
-
API declaration.
|
|
884
|
-
</p>
|
|
885
|
-
<figure id='l4'>
|
|
886
|
-
<figcaption>Listing 4. The primary core interface API declaration.</figcaption>
|
|
887
|
-
<pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence<byte> data);
 void initSelfDestruct();
 } %p The API is designed to use UTF-8.</code></pre>
|
|
888
|
-
</figure>
|
|
889
|
-
</div>
|
|
890
|
-
<div class='markup'>
|
|
891
|
-
<figure>
|
|
892
|
-
<img alt='Bubbles, sitting in his office chair, works on his latest project intently.' src='http://dummyimage.com/100x100/ccc/fff' />
|
|
893
|
-
<figcaption>Bubbles at work</figcaption>
|
|
894
|
-
</figure>
|
|
895
|
-
</div>
|
|
896
|
-
</div>
|
|
897
|
-
</section>
|
|
898
|
-
<section class='element-group' id='text'>
|
|
899
|
-
<h1 class='section-title'>Text-level semantics</h1>
|
|
900
|
-
<div class='element' id='a'>
|
|
901
|
-
<h2 class='element-title'>
|
|
902
|
-
a
|
|
903
|
-
</h2>
|
|
904
|
-
<div class='markup'>
|
|
905
|
-
<nav>
|
|
906
|
-
<ul>
|
|
907
|
-
<li>
|
|
908
|
-
<a href='/'>Home</a>
|
|
909
|
-
</li>
|
|
910
|
-
<li>
|
|
911
|
-
<a href='/news'>News</a>
|
|
912
|
-
</li>
|
|
913
|
-
<li>
|
|
914
|
-
<a>Examples</a>
|
|
915
|
-
</li>
|
|
916
|
-
<li>
|
|
917
|
-
<a href='/legal'>Legal</a>
|
|
918
|
-
</li>
|
|
919
|
-
</ul>
|
|
920
|
-
</nav>
|
|
921
|
-
</div>
|
|
922
|
-
<p>
|
|
923
|
-
The
|
|
924
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-a-element'>a</a></code>
|
|
925
|
-
element may be wrapped around entire
|
|
926
|
-
paragraphs, lists, tables, and so forth, even entire sections, so
|
|
927
|
-
long as there is no interactive content within (e.g. buttons or
|
|
928
|
-
other links). This example shows how this can be used to make an
|
|
929
|
-
entire advertising block into a link:
|
|
930
|
-
</p>
|
|
931
|
-
<div class='markup'>
|
|
932
|
-
<aside class='advertising'>
|
|
933
|
-
<h1>Advertising</h1>
|
|
934
|
-
<a href='http://ad.example.com/?adid=1929&pubid=1422'>
|
|
935
|
-
<section>
|
|
936
|
-
<h1>Mellblomatic 9000!</h1>
|
|
937
|
-
<p>Turn all your widgets into mellbloms!</p>
|
|
938
|
-
<p>Only $9.99 plus shipping and handling.</p>
|
|
939
|
-
</section>
|
|
940
|
-
</a>
|
|
941
|
-
<a href='http://ad.example.com/?adid=375&pubid=1422'>
|
|
942
|
-
<section>
|
|
943
|
-
<h1>The Mellblom Browser</h1>
|
|
944
|
-
<p>Web browsing at the speed of light.</p>
|
|
945
|
-
<p>No other browser goes faster!</p>
|
|
946
|
-
</section>
|
|
947
|
-
</a>
|
|
948
|
-
</aside>
|
|
949
|
-
</div>
|
|
950
|
-
</div>
|
|
951
|
-
<div class='element' id='em'>
|
|
952
|
-
<h2 class='element-title'>
|
|
953
|
-
em
|
|
954
|
-
</h2>
|
|
955
|
-
<p>
|
|
956
|
-
The
|
|
957
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-em-element'>em</a></code>
|
|
958
|
-
element
|
|
959
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
960
|
-
stress
|
|
961
|
-
emphasis of its contents.
|
|
962
|
-
</p>
|
|
963
|
-
<div class='markup'>
|
|
964
|
-
<p>
|
|
965
|
-
<em>Cats</em>
|
|
966
|
-
are cute animals.
|
|
967
|
-
</p>
|
|
968
|
-
</div>
|
|
969
|
-
</div>
|
|
970
|
-
<div class='element' id='strong'>
|
|
971
|
-
<h2 class='element-title'>
|
|
972
|
-
strong
|
|
973
|
-
</h2>
|
|
974
|
-
<p>
|
|
975
|
-
The
|
|
976
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-strong-element'>strong</a></code>
|
|
977
|
-
element
|
|
978
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
979
|
-
strong
|
|
980
|
-
importance for its contents.
|
|
981
|
-
</p>
|
|
982
|
-
<div class='markup'>
|
|
983
|
-
<p>
|
|
984
|
-
<strong>Warning.</strong>
|
|
985
|
-
This dungeon is dangerous.
|
|
986
|
-
<strong>Avoid the ducks.</strong>
|
|
987
|
-
Take any gold you find.
|
|
988
|
-
<strong><strong>Do not take any of the diamonds</strong>,
|
|
989
|
-
they are explosive and
|
|
990
|
-
<strong>
|
|
991
|
-
will destroy anything within
|
|
992
|
-
ten meters.
|
|
993
|
-
</strong>
|
|
994
|
-
</strong>
|
|
995
|
-
You have been warned.
|
|
996
|
-
</p>
|
|
997
|
-
</div>
|
|
998
|
-
</div>
|
|
999
|
-
<div class='element' id='small'>
|
|
1000
|
-
<h2 class='element-title'>
|
|
1001
|
-
small
|
|
1002
|
-
</h2>
|
|
1003
|
-
<p>
|
|
1004
|
-
The
|
|
1005
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-small-element'>small</a></code>
|
|
1006
|
-
element
|
|
1007
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1008
|
-
side
|
|
1009
|
-
comments such as small print.
|
|
1010
|
-
</p>
|
|
1011
|
-
<div class='markup'>
|
|
1012
|
-
<dl>
|
|
1013
|
-
<dt>
|
|
1014
|
-
Single room
|
|
1015
|
-
<dd>
|
|
1016
|
-
199 €
|
|
1017
|
-
<small>breakfast included, VAT not included</small>
|
|
1018
|
-
<dt>
|
|
1019
|
-
Double room
|
|
1020
|
-
<dd>
|
|
1021
|
-
239 €
|
|
1022
|
-
<small>breakfast included, VAT not included</small>
|
|
1023
|
-
</dd>
|
|
1024
|
-
</dt>
|
|
1025
|
-
</dd>
|
|
1026
|
-
</dt>
|
|
1027
|
-
</dl>
|
|
1028
|
-
</div>
|
|
1029
|
-
<div class='markup'>
|
|
1030
|
-
<p>
|
|
1031
|
-
Example Corp today announced record profits for the
|
|
1032
|
-
second quarter
|
|
1033
|
-
<small>
|
|
1034
|
-
(Full Disclosure: Foo News is a subsidiary of
|
|
1035
|
-
Example Corp)
|
|
1036
|
-
</small>,
|
|
1037
|
-
leading to speculation about a third quarter
|
|
1038
|
-
merger with Demo Group.
|
|
1039
|
-
</p>
|
|
1040
|
-
</div>
|
|
1041
|
-
</div>
|
|
1042
|
-
<div class='element' id='s'>
|
|
1043
|
-
<h2 class='element-title'>
|
|
1044
|
-
s
|
|
1045
|
-
</h2>
|
|
1046
|
-
<p>
|
|
1047
|
-
The
|
|
1048
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-s-element'>s</a></code>
|
|
1049
|
-
element
|
|
1050
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1051
|
-
contents that
|
|
1052
|
-
are no longer accurate or no longer relevant.
|
|
1053
|
-
</p>
|
|
1054
|
-
<div class='markup'>
|
|
1055
|
-
<p>Buy our Iced Tea and Lemonade!</p>
|
|
1056
|
-
<p>
|
|
1057
|
-
<s>Recommended retail price: $3.99 per bottle</s>
|
|
1058
|
-
</p>
|
|
1059
|
-
<p>
|
|
1060
|
-
<strong>Now selling for just $2.99 a bottle!</strong>
|
|
1061
|
-
</p>
|
|
1062
|
-
</div>
|
|
1063
|
-
</div>
|
|
1064
|
-
<div class='element' id='cite'>
|
|
1065
|
-
<h2 class='element-title'>
|
|
1066
|
-
cite
|
|
1067
|
-
</h2>
|
|
1068
|
-
<p>
|
|
1069
|
-
The
|
|
1070
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-cite-element'>cite</a></code>
|
|
1071
|
-
element
|
|
1072
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1073
|
-
the title
|
|
1074
|
-
of a work (e.g.
|
|
1075
|
-
a book,
|
|
1076
|
-
a paper,
|
|
1077
|
-
an essay,
|
|
1078
|
-
a poem,
|
|
1079
|
-
a score,
|
|
1080
|
-
a song,
|
|
1081
|
-
a script,
|
|
1082
|
-
a film,
|
|
1083
|
-
a TV show,
|
|
1084
|
-
a game,
|
|
1085
|
-
a sculpture,
|
|
1086
|
-
a painting,
|
|
1087
|
-
a theatre production,
|
|
1088
|
-
a play,
|
|
1089
|
-
an opera,
|
|
1090
|
-
a musical,
|
|
1091
|
-
an exhibition,
|
|
1092
|
-
a legal case report,
|
|
1093
|
-
etc). This can be a work that is being quoted or
|
|
1094
|
-
referenced in detail (i.e. a citation), or it can just be a work
|
|
1095
|
-
that is mentioned in passing.
|
|
1096
|
-
</p>
|
|
1097
|
-
<div class='markup'>
|
|
1098
|
-
<p>
|
|
1099
|
-
My favorite book is
|
|
1100
|
-
<cite>The Reality Dysfunction</cite>
|
|
1101
|
-
by
|
|
1102
|
-
Peter F. Hamilton. My favorite comic is
|
|
1103
|
-
<cite>
|
|
1104
|
-
Pearls Before
|
|
1105
|
-
Swine
|
|
1106
|
-
</cite>
|
|
1107
|
-
by Stephan Pastis. My favorite track is
|
|
1108
|
-
<cite>
|
|
1109
|
-
Jive
|
|
1110
|
-
Samba
|
|
1111
|
-
</cite>
|
|
1112
|
-
by the Cannonball Adderley Sextet.
|
|
1113
|
-
</p>
|
|
1114
|
-
</div>
|
|
1115
|
-
</div>
|
|
1116
|
-
<div class='element' id='q'>
|
|
1117
|
-
<h2 class='element-title'>
|
|
1118
|
-
q
|
|
1119
|
-
</h2>
|
|
1120
|
-
<p>
|
|
1121
|
-
The
|
|
1122
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-q-element'>q</a></code>
|
|
1123
|
-
element
|
|
1124
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1125
|
-
some
|
|
1126
|
-
<a href='content-models.html#phrasing-content' title='phrasing content'>phrasing content</a>
|
|
1127
|
-
quoted from another
|
|
1128
|
-
source.
|
|
1129
|
-
</p>
|
|
1130
|
-
<div class='markup'>
|
|
1131
|
-
<p>
|
|
1132
|
-
The man said
|
|
1133
|
-
<q>
|
|
1134
|
-
Things that are impossible just take
|
|
1135
|
-
longer
|
|
1136
|
-
</q>.
|
|
1137
|
-
I disagreed with him.
|
|
1138
|
-
</p>
|
|
1139
|
-
</div>
|
|
1140
|
-
<div class='markup'>
|
|
1141
|
-
<p>
|
|
1142
|
-
The W3C page
|
|
1143
|
-
<cite>About W3C</cite>
|
|
1144
|
-
says the W3C's
|
|
1145
|
-
mission is
|
|
1146
|
-
<q cite='http://www.w3.org/Consortium/'>
|
|
1147
|
-
To lead the
|
|
1148
|
-
World Wide Web to its full potential by developing protocols and
|
|
1149
|
-
guidelines that ensure long-term growth for the Web
|
|
1150
|
-
</q>.
|
|
1151
|
-
I
|
|
1152
|
-
disagree with this mission.
|
|
1153
|
-
</p>
|
|
1154
|
-
</div>
|
|
1155
|
-
</div>
|
|
1156
|
-
<div class='element' id='dfn'>
|
|
1157
|
-
<h2 class='element-title'>
|
|
1158
|
-
dfn
|
|
1159
|
-
</h2>
|
|
1160
|
-
<p>
|
|
1161
|
-
The
|
|
1162
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a></code>
|
|
1163
|
-
element
|
|
1164
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1165
|
-
the defining
|
|
1166
|
-
instance of a term. The
|
|
1167
|
-
<a href='content-models.html#paragraph' title='paragraph'>paragraph</a>,
|
|
1168
|
-
<a href='grouping-content.html#the-dl-element' title='dl'>description list group</a>,
|
|
1169
|
-
or
|
|
1170
|
-
<a href='content-models.html#sectioning-content' title='sectioning content'>section</a>
|
|
1171
|
-
that is the nearest
|
|
1172
|
-
ancestor of the
|
|
1173
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a></code>
|
|
1174
|
-
element must also contain the
|
|
1175
|
-
definition(s) for the
|
|
1176
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#defining-term' title='defining term'>term</a>
|
|
1177
|
-
given
|
|
1178
|
-
by the
|
|
1179
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a></code>
|
|
1180
|
-
element.
|
|
1181
|
-
</p>
|
|
1182
|
-
<div class='markup'>
|
|
1183
|
-
<p>
|
|
1184
|
-
The
|
|
1185
|
-
<dfn>
|
|
1186
|
-
<abbr title='Garage Door Opener'>GDO</abbr>
|
|
1187
|
-
</dfn>
|
|
1188
|
-
is a device that allows off-world teams to open the iris.
|
|
1189
|
-
</p>
|
|
1190
|
-
<!-- ... later in the document: -->
|
|
1191
|
-
<p>
|
|
1192
|
-
Teal'c activated his
|
|
1193
|
-
<abbr title='Garage Door Opener'>GDO</abbr>
|
|
1194
|
-
and so Hammond ordered the iris to be opened.
|
|
1195
|
-
</p>
|
|
1196
|
-
</div>
|
|
1197
|
-
<div class='markup'>
|
|
1198
|
-
<p>
|
|
1199
|
-
The
|
|
1200
|
-
<dfn id='gdo'>
|
|
1201
|
-
<abbr title='Garage Door Opener'>GDO</abbr>
|
|
1202
|
-
</dfn>
|
|
1203
|
-
is a device that allows off-world teams to open the iris.
|
|
1204
|
-
</p>
|
|
1205
|
-
<!-- ... later in the document: -->
|
|
1206
|
-
<p>
|
|
1207
|
-
Teal'c activated his
|
|
1208
|
-
<a href='#gdo'>
|
|
1209
|
-
<abbr title='Garage Door Opener'>GDO</abbr>
|
|
1210
|
-
</a>
|
|
1211
|
-
and so Hammond ordered the iris to be opened.
|
|
1212
|
-
</p>
|
|
1213
|
-
</div>
|
|
1214
|
-
</div>
|
|
1215
|
-
<div class='element' id='abbr'>
|
|
1216
|
-
<h2 class='element-title'>
|
|
1217
|
-
abbr
|
|
1218
|
-
</h2>
|
|
1219
|
-
<p>
|
|
1220
|
-
The
|
|
1221
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-abbr-element'>abbr</a></code>
|
|
1222
|
-
element
|
|
1223
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1224
|
-
an
|
|
1225
|
-
abbreviation or acronym, optionally with its expansion. The
|
|
1226
|
-
<dfn id='attr-abbr-title' title='attr-abbr-title'>
|
|
1227
|
-
<code>title</code>
|
|
1228
|
-
</dfn>
|
|
1229
|
-
attribute may be
|
|
1230
|
-
used to provide an expansion of the abbreviation. The attribute, if
|
|
1231
|
-
specified, must contain an expansion of the abbreviation, and
|
|
1232
|
-
nothing else.
|
|
1233
|
-
</p>
|
|
1234
|
-
<div class='markup'>
|
|
1235
|
-
<p>
|
|
1236
|
-
The
|
|
1237
|
-
<dfn id='whatwg'>
|
|
1238
|
-
<abbr title='Web Hypertext Application Technology Working Group'>WHATWG</abbr>
|
|
1239
|
-
</dfn>
|
|
1240
|
-
is a loose unofficial collaboration of Web browser manufacturers and
|
|
1241
|
-
interested parties who wish to develop new technologies designed to
|
|
1242
|
-
allow authors to write and deploy Applications over the World Wide
|
|
1243
|
-
Web.
|
|
1244
|
-
</p>
|
|
1245
|
-
</div>
|
|
1246
|
-
</div>
|
|
1247
|
-
<div class='element' id='time'>
|
|
1248
|
-
<h2 class='element-title'>
|
|
1249
|
-
time
|
|
1250
|
-
</h2>
|
|
1251
|
-
<p>
|
|
1252
|
-
The
|
|
1253
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-time-element'>time</a></code>
|
|
1254
|
-
element
|
|
1255
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1256
|
-
either a
|
|
1257
|
-
time on a 24 hour clock, or a precise date in the proleptic
|
|
1258
|
-
Gregorian calendar, optionally with a time and a time-zone
|
|
1259
|
-
offset.
|
|
1260
|
-
<a href='references.html#refsGREGORIAN'>[GREGORIAN]</a>
|
|
1261
|
-
</p>
|
|
1262
|
-
<div class='markup'>
|
|
1263
|
-
<div class='vevent'>
|
|
1264
|
-
<a class='url' href='http://www.web2con.com/'>http://www.web2con.com/</a>
|
|
1265
|
-
<span class='summary'>Web 2.0 Conference</span>:
|
|
1266
|
-
<time class='dtstart' datetime='2007-10-05'>October 5</time>
|
|
1267
|
-
-
|
|
1268
|
-
<time class='dtend' datetime='2007-10-20'>19</time>,
|
|
1269
|
-
at the
|
|
1270
|
-
<span class='location'>Argent Hotel, San Francisco, CA</span>
|
|
1271
|
-
</div>
|
|
1272
|
-
</div>
|
|
1273
|
-
<div class='markup'>
|
|
1274
|
-
<p>
|
|
1275
|
-
I usually have a snack at
|
|
1276
|
-
<time>16:00</time>.
|
|
1277
|
-
</p>
|
|
1278
|
-
<p>I've liked model trains since at least 1983.</p>
|
|
1279
|
-
</div>
|
|
1280
|
-
</div>
|
|
1281
|
-
<div class='element' id='code'>
|
|
1282
|
-
<h2 class='element-title'>
|
|
1283
|
-
code
|
|
1284
|
-
</h2>
|
|
1285
|
-
<p>
|
|
1286
|
-
The
|
|
1287
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-code-element'>code</a></code>
|
|
1288
|
-
element
|
|
1289
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1290
|
-
a fragment
|
|
1291
|
-
of computer code. This could be an XML element name, a filename, a
|
|
1292
|
-
computer program, or any other string that a computer would
|
|
1293
|
-
recognize.
|
|
1294
|
-
</p>
|
|
1295
|
-
<div class='markup'>
|
|
1296
|
-
<p>
|
|
1297
|
-
When you call the
|
|
1298
|
-
<code>activate()</code>
|
|
1299
|
-
method on the
|
|
1300
|
-
<code>robotSnowman</code>
|
|
1301
|
-
object, the eyes glow.
|
|
1302
|
-
</p>
|
|
1303
|
-
</div>
|
|
1304
|
-
<div class='markup'>
|
|
1305
|
-
<pre><code class='language-pascal'>var i: Integer;
begin
 i := 1;
end. %div#var.element</code></pre>
|
|
1306
|
-
</div>
|
|
1307
|
-
<h2 class='element-title'>
|
|
1308
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#the-var-element'>var</a>
|
|
1309
|
-
</h2>
|
|
1310
|
-
<p>
|
|
1311
|
-
The
|
|
1312
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-var-element'>var</a></code>
|
|
1313
|
-
element
|
|
1314
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1315
|
-
a
|
|
1316
|
-
variable. This could be an actual variable in a mathematical
|
|
1317
|
-
expression or programming context, or it could just be a term used
|
|
1318
|
-
as a placeholder in prose.
|
|
1319
|
-
</p>
|
|
1320
|
-
<div class='markup'>
|
|
1321
|
-
<p>
|
|
1322
|
-
If there are
|
|
1323
|
-
<var>n</var>
|
|
1324
|
-
pipes leading to the ice
|
|
1325
|
-
cream factory then I expect at
|
|
1326
|
-
<em>least</em>
|
|
1327
|
-
<var>n</var>
|
|
1328
|
-
flavors of ice cream to be available for purchase!
|
|
1329
|
-
</p>
|
|
1330
|
-
</div>
|
|
1331
|
-
<div class='markup'>
|
|
1332
|
-
<figure>
|
|
1333
|
-
<math>
|
|
1334
|
-
<mi>a</mi>
|
|
1335
|
-
<mo>=</mo>
|
|
1336
|
-
<msqrt>
|
|
1337
|
-
<msup>
|
|
1338
|
-
<mi>b</mi>
|
|
1339
|
-
<mn>2</mn>
|
|
1340
|
-
</msup>
|
|
1341
|
-
<mi>+</mi>
|
|
1342
|
-
<msup>
|
|
1343
|
-
<mi>c</mi>
|
|
1344
|
-
<mn>2</mn>
|
|
1345
|
-
</msup>
|
|
1346
|
-
</msqrt>
|
|
1347
|
-
</math>
|
|
1348
|
-
<figcaption>
|
|
1349
|
-
Using Pythagoras' theorem to solve for the hypotenuse
|
|
1350
|
-
<var>a</var>
|
|
1351
|
-
of
|
|
1352
|
-
a triangle with sides
|
|
1353
|
-
<var>b</var>
|
|
1354
|
-
and
|
|
1355
|
-
<var>c</var>
|
|
1356
|
-
</figcaption>
|
|
1357
|
-
</figure>
|
|
1358
|
-
</div>
|
|
1359
|
-
</div>
|
|
1360
|
-
<div class='element' id='samp'>
|
|
1361
|
-
<h2 class='element-title'>
|
|
1362
|
-
samp
|
|
1363
|
-
</h2>
|
|
1364
|
-
<p>
|
|
1365
|
-
The
|
|
1366
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-samp-element'>samp</a></code>
|
|
1367
|
-
element
|
|
1368
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1369
|
-
(sample)
|
|
1370
|
-
output from a program or computing system.
|
|
1371
|
-
</p>
|
|
1372
|
-
<div class='markup'>
|
|
1373
|
-
<p>
|
|
1374
|
-
The computer said
|
|
1375
|
-
<samp>
|
|
1376
|
-
Too much cheese in tray
|
|
1377
|
-
two
|
|
1378
|
-
</samp>
|
|
1379
|
-
but I didn't know what that meant.
|
|
1380
|
-
</p>
|
|
1381
|
-
</div>
|
|
1382
|
-
<div class='markup'>
|
|
1383
|
-
<pre><samp>
|
|
1384
|
-
<span class='prompt'>jdoe@mowmow:~$</span>
|
|
1385
|
-
<kbd>ssh demo.example.com</kbd>
|
|
1386
|
-
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
|
|
1387
|
-
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
|
|
1388
|
-
<span class='prompt'>jdoe@demo:~$</span>
|
|
1389
|
-
<span class='cursor'>_</span>
|
|
1390
|
-
</samp></pre>
|
|
1391
|
-
</div>
|
|
1392
|
-
</div>
|
|
1393
|
-
<div class='element' id='kbd'>
|
|
1394
|
-
<h2 class='element-title'>
|
|
1395
|
-
kbd
|
|
1396
|
-
</h2>
|
|
1397
|
-
<p>
|
|
1398
|
-
The
|
|
1399
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-kbd-element'>kbd</a></code>
|
|
1400
|
-
element
|
|
1401
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1402
|
-
user input
|
|
1403
|
-
(typically keyboard input, although it may also be used to represent
|
|
1404
|
-
other input, such as voice commands).
|
|
1405
|
-
</p>
|
|
1406
|
-
<div class='markup'>
|
|
1407
|
-
<p>
|
|
1408
|
-
To make George eat an apple, press
|
|
1409
|
-
<kbd><kbd>Shift</kbd>+
|
|
1410
|
-
<kbd>F3</kbd>
|
|
1411
|
-
</kbd>
|
|
1412
|
-
</p>
|
|
1413
|
-
</div>
|
|
1414
|
-
</div>
|
|
1415
|
-
<div class='element' id='sub-sup'>
|
|
1416
|
-
<h2 class='element-title'>
|
|
1417
|
-
sub and sup
|
|
1418
|
-
</h2>
|
|
1419
|
-
<p>
|
|
1420
|
-
The
|
|
1421
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sup</a></code>
|
|
1422
|
-
element
|
|
1423
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1424
|
-
a
|
|
1425
|
-
superscript and the
|
|
1426
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sub</a></code>
|
|
1427
|
-
element
|
|
1428
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1429
|
-
a subscript.
|
|
1430
|
-
</p>
|
|
1431
|
-
<div class='markup'>
|
|
1432
|
-
<p>
|
|
1433
|
-
The most beautiful women are
|
|
1434
|
-
<span lang='fr'>
|
|
1435
|
-
<abbr>
|
|
1436
|
-
M
|
|
1437
|
-
<sup>lle</sup>
|
|
1438
|
-
</abbr>
|
|
1439
|
-
Gwendoline
|
|
1440
|
-
</span>
|
|
1441
|
-
and
|
|
1442
|
-
<span lang='fr'>
|
|
1443
|
-
<abbr>
|
|
1444
|
-
M
|
|
1445
|
-
<sup>me</sup>
|
|
1446
|
-
</abbr>
|
|
1447
|
-
Denise
|
|
1448
|
-
</span>.
|
|
1449
|
-
</p>
|
|
1450
|
-
</div>
|
|
1451
|
-
<div class='markup'>
|
|
1452
|
-
<p>
|
|
1453
|
-
The coordinate of the
|
|
1454
|
-
<var>i</var>th
|
|
1455
|
-
point is
|
|
1456
|
-
(<var>
|
|
1457
|
-
x
|
|
1458
|
-
<sub>
|
|
1459
|
-
<var>i</var>
|
|
1460
|
-
</sub>
|
|
1461
|
-
</var>,
|
|
1462
|
-
<var>
|
|
1463
|
-
y
|
|
1464
|
-
<sub>
|
|
1465
|
-
<var>i</var>
|
|
1466
|
-
</sub>
|
|
1467
|
-
</var>).
|
|
1468
|
-
For example, the 10th point has coordinate
|
|
1469
|
-
(<var>
|
|
1470
|
-
x
|
|
1471
|
-
<sub>10</sub>
|
|
1472
|
-
</var>,
|
|
1473
|
-
<var>
|
|
1474
|
-
y
|
|
1475
|
-
<sub>10</sub>
|
|
1476
|
-
</var>).
|
|
1477
|
-
</p>
|
|
1478
|
-
</div>
|
|
1479
|
-
</div>
|
|
1480
|
-
<div class='element' id='i'>
|
|
1481
|
-
<h2 class='element-title'>
|
|
1482
|
-
i
|
|
1483
|
-
</h2>
|
|
1484
|
-
<p>
|
|
1485
|
-
The
|
|
1486
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-i-element'>i</a></code>
|
|
1487
|
-
element
|
|
1488
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1489
|
-
a span of text
|
|
1490
|
-
in an alternate voice or mood, or otherwise offset from the normal
|
|
1491
|
-
prose, such as a taxonomic designation, a technical term, an
|
|
1492
|
-
idiomatic phrase from another language, a thought, a ship name, or
|
|
1493
|
-
some other prose whose typical typographic presentation is
|
|
1494
|
-
italicized.
|
|
1495
|
-
</p>
|
|
1496
|
-
<div class='markup'>
|
|
1497
|
-
<p>
|
|
1498
|
-
The
|
|
1499
|
-
<i class='taxonomy'>Felis silvestris catus</i>
|
|
1500
|
-
is cute.
|
|
1501
|
-
</p>
|
|
1502
|
-
<p>
|
|
1503
|
-
The term
|
|
1504
|
-
<i>prose content</i>
|
|
1505
|
-
is defined above.
|
|
1506
|
-
</p>
|
|
1507
|
-
<p>
|
|
1508
|
-
There is a certain
|
|
1509
|
-
<i lang='fr'>je ne sais quoi</i>
|
|
1510
|
-
in the air.
|
|
1511
|
-
</p>
|
|
1512
|
-
</div>
|
|
1513
|
-
</div>
|
|
1514
|
-
<div class='element' id='b'>
|
|
1515
|
-
<h2 class='element-title'>
|
|
1516
|
-
b
|
|
1517
|
-
</h2>
|
|
1518
|
-
<p>
|
|
1519
|
-
The
|
|
1520
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-b-element'>b</a></code>
|
|
1521
|
-
element
|
|
1522
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1523
|
-
a span of text
|
|
1524
|
-
to be stylistically offset from the normal prose without conveying
|
|
1525
|
-
any extra importance, such as key words in a document abstract,
|
|
1526
|
-
product names in a review, or other spans of text whose typical
|
|
1527
|
-
typographic presentation is boldened.
|
|
1528
|
-
</p>
|
|
1529
|
-
<div class='markup'>
|
|
1530
|
-
<p>
|
|
1531
|
-
The
|
|
1532
|
-
<b>frobonitor</b>
|
|
1533
|
-
and
|
|
1534
|
-
<b>barbinator</b>
|
|
1535
|
-
components are fried.
|
|
1536
|
-
</p>
|
|
1537
|
-
</div>
|
|
1538
|
-
</div>
|
|
1539
|
-
<div class='element' id='mark'>
|
|
1540
|
-
<h2 class='element-title'>
|
|
1541
|
-
mark
|
|
1542
|
-
</h2>
|
|
1543
|
-
<p>
|
|
1544
|
-
The
|
|
1545
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-mark-element'>mark</a></code>
|
|
1546
|
-
element
|
|
1547
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1548
|
-
a run of
|
|
1549
|
-
text in one document marked or highlighted for reference purposes,
|
|
1550
|
-
due to its relevance in another context. When used in a quotation or
|
|
1551
|
-
other block of text referred to from the prose, it indicates a
|
|
1552
|
-
highlight that was not originally present but which has been added
|
|
1553
|
-
to bring the reader's attention to a part of the text that might not
|
|
1554
|
-
have been considered important by the original author when the block
|
|
1555
|
-
was originally written, but which is now under previously unexpected
|
|
1556
|
-
scrutiny. When used in the main prose of a document, it indicates a
|
|
1557
|
-
part of the document that has been highlighted due to its likely
|
|
1558
|
-
relevance to the user's current activity.
|
|
1559
|
-
</p>
|
|
1560
|
-
<div class='markup'>
|
|
1561
|
-
<p>
|
|
1562
|
-
I also have some
|
|
1563
|
-
<mark>kitten</mark>s
|
|
1564
|
-
who are visiting me
|
|
1565
|
-
these days. They're really cute. I think they like my garden! Maybe I
|
|
1566
|
-
should adopt a
|
|
1567
|
-
<mark>kitten</mark>.
|
|
1568
|
-
</p>
|
|
1569
|
-
</div>
|
|
1570
|
-
</div>
|
|
1571
|
-
<div class='element' id='ruby'>
|
|
1572
|
-
<hgroup>
|
|
1573
|
-
<h2 class='element-title'>
|
|
1574
|
-
ruby
|
|
1575
|
-
</h2>
|
|
1576
|
-
<h3 class='element-title'>
|
|
1577
|
-
rt
|
|
1578
|
-
</h3>
|
|
1579
|
-
<h3 class='element-title'>
|
|
1580
|
-
rp
|
|
1581
|
-
</h3>
|
|
1582
|
-
</hgroup>
|
|
1583
|
-
<p>
|
|
1584
|
-
The
|
|
1585
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-ruby-element'>ruby</a></code>
|
|
1586
|
-
element allows one or more spans of
|
|
1587
|
-
phrasing content to be marked with ruby annotations. Ruby
|
|
1588
|
-
annotations are short runs of text presented alongside base text,
|
|
1589
|
-
primarily used in East Asian typography as a guide for
|
|
1590
|
-
pronunciation or to include other annotations. In Japanese, this
|
|
1591
|
-
form of typography is also known as
|
|
1592
|
-
<i>furigana</i>.
|
|
1593
|
-
</p>
|
|
1594
|
-
<p>
|
|
1595
|
-
The
|
|
1596
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-rt-element'>rt</a></code>
|
|
1597
|
-
element marks the ruby text component of a
|
|
1598
|
-
ruby annotation.
|
|
1599
|
-
</p>
|
|
1600
|
-
<p>
|
|
1601
|
-
The
|
|
1602
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-rp-element'>rp</a></code>
|
|
1603
|
-
element can be used to provide parentheses
|
|
1604
|
-
around a ruby text component of a ruby annotation, to be shown by
|
|
1605
|
-
user agents that don't support ruby annotations.
|
|
1606
|
-
</p>
|
|
1607
|
-
<div class='markup'>
|
|
1608
|
-
<ruby>
|
|
1609
|
-
漢<rt>かん</rt>字
|
|
1610
|
-
<rt>じ </rt>
|
|
1611
|
-
</ruby>
|
|
1612
|
-
</div>
|
|
1613
|
-
<div class='markup'>
|
|
1614
|
-
<ruby>
|
|
1615
|
-
汉<rt>hàn</rt>字
|
|
1616
|
-
<rt>zì</rt>
|
|
1617
|
-
</ruby>
|
|
1618
|
-
</div>
|
|
1619
|
-
<div class='markup'>
|
|
1620
|
-
<ruby>
|
|
1621
|
-
漢
|
|
1622
|
-
<rp>(</rp>
|
|
1623
|
-
<rt>かん</rt>
|
|
1624
|
-
<rp>)</rp>
|
|
1625
|
-
字
|
|
1626
|
-
<rp>(</rp>
|
|
1627
|
-
<rt>じ</rt>
|
|
1628
|
-
<rp>)</rp>
|
|
1629
|
-
</ruby>
|
|
1630
|
-
</div>
|
|
1631
|
-
</div>
|
|
1632
|
-
<div class='element' id='bdi'>
|
|
1633
|
-
<h2 class='element-title'>
|
|
1634
|
-
bdi
|
|
1635
|
-
</h2>
|
|
1636
|
-
<p>
|
|
1637
|
-
The
|
|
1638
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-bdi-element'>bdi</a></code>
|
|
1639
|
-
element
|
|
1640
|
-
<a href='http://developers.whatwg.org/text-level-semantics.html#represents'>represents</a>
|
|
1641
|
-
a span of
|
|
1642
|
-
text that is to be isolated from its surroundings for the purposes
|
|
1643
|
-
of bidirectional text formatting.
|
|
1644
|
-
<a href='references.html#refsBIDI'>[BIDI]</a>
|
|
1645
|
-
</p>
|
|
1646
|
-
<div class='markup'>
|
|
1647
|
-
<ul>
|
|
1648
|
-
<li>
|
|
1649
|
-
User
|
|
1650
|
-
<bdi>jcranmer</bdi>:
|
|
1651
|
-
12 posts.
|
|
1652
|
-
<li>
|
|
1653
|
-
User
|
|
1654
|
-
<bdi>hober</bdi>:
|
|
1655
|
-
5 posts.
|
|
1656
|
-
<li>
|
|
1657
|
-
User
|
|
1658
|
-
<bdi>إيان</bdi>:
|
|
1659
|
-
3 posts.
|
|
1660
|
-
</li>
|
|
1661
|
-
</li>
|
|
1662
|
-
</li>
|
|
1663
|
-
</ul>
|
|
1664
|
-
</div>
|
|
1665
|
-
</div>
|
|
1666
|
-
<div class='element' id='text-summary'>
|
|
1667
|
-
<h2 class='element-title'>Usage summary</h2>
|
|
1668
|
-
<div class='markup'>
|
|
1669
|
-
<table>
|
|
1670
|
-
<thead>
|
|
1671
|
-
<tr>
|
|
1672
|
-
<th>
|
|
1673
|
-
Element
|
|
1674
|
-
</th>
|
|
1675
|
-
<th>
|
|
1676
|
-
Purpose
|
|
1677
|
-
</th>
|
|
1678
|
-
<th>
|
|
1679
|
-
Example
|
|
1680
|
-
</th>
|
|
1681
|
-
</tr>
|
|
1682
|
-
</thead>
|
|
1683
|
-
<tbody>
|
|
1684
|
-
<tr>
|
|
1685
|
-
<td>
|
|
1686
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-a-element'>a</a></code>
|
|
1687
|
-
</td>
|
|
1688
|
-
<td>
|
|
1689
|
-
Hyperlinks
|
|
1690
|
-
</td>
|
|
1691
|
-
<td>
|
|
1692
|
-
<pre class='example'>Visit my
|
|
1693
|
-
<strong><a href="drinks.html">drinks</a></strong>
|
|
1694
|
-
page.</pre>
|
|
1695
|
-
</td>
|
|
1696
|
-
</tr>
|
|
1697
|
-
<tr>
|
|
1698
|
-
<td>
|
|
1699
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-em-element'>em</a></code>
|
|
1700
|
-
</td>
|
|
1701
|
-
<td>
|
|
1702
|
-
Stress emphasis
|
|
1703
|
-
</td>
|
|
1704
|
-
<td>
|
|
1705
|
-
<pre class='example'>I must say I
|
|
1706
|
-
<strong><em>adore</em></strong>
|
|
1707
|
-
lemonade.</pre>
|
|
1708
|
-
</td>
|
|
1709
|
-
</tr>
|
|
1710
|
-
<tr>
|
|
1711
|
-
<td>
|
|
1712
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-strong-element'>strong</a></code>
|
|
1713
|
-
</td>
|
|
1714
|
-
<td>
|
|
1715
|
-
Importance
|
|
1716
|
-
</td>
|
|
1717
|
-
<td>
|
|
1718
|
-
<pre class='example'>This tea is
|
|
1719
|
-
<strong><strong>very hot</strong></strong>.</pre>
|
|
1720
|
-
</td>
|
|
1721
|
-
</tr>
|
|
1722
|
-
<tr>
|
|
1723
|
-
<td>
|
|
1724
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-small-element'>small</a></code>
|
|
1725
|
-
</td>
|
|
1726
|
-
<td>
|
|
1727
|
-
Side comments
|
|
1728
|
-
</td>
|
|
1729
|
-
<td>
|
|
1730
|
-
<pre class='example'>These grapes are made into wine.
|
|
1731
|
-
<strong><small>Alcohol is addictive.</small></strong></pre>
|
|
1732
|
-
</td>
|
|
1733
|
-
</tr>
|
|
1734
|
-
<tr>
|
|
1735
|
-
<td>
|
|
1736
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-s-element'>s</a></code>
|
|
1737
|
-
</td>
|
|
1738
|
-
<td>
|
|
1739
|
-
Inaccurate text
|
|
1740
|
-
</td>
|
|
1741
|
-
<td>
|
|
1742
|
-
<pre class='example'>Price:
|
|
1743
|
-
<strong><s>£4.50</s></strong>
|
|
1744
|
-
£2.00!</pre>
|
|
1745
|
-
</td>
|
|
1746
|
-
</tr>
|
|
1747
|
-
<tr>
|
|
1748
|
-
<td>
|
|
1749
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-cite-element'>cite</a></code>
|
|
1750
|
-
</td>
|
|
1751
|
-
<td>
|
|
1752
|
-
Titles of works
|
|
1753
|
-
</td>
|
|
1754
|
-
<td>
|
|
1755
|
-
<pre class='example'>The case
|
|
1756
|
-
<strong><cite>Hugo v. Danielle</cite></strong>
|
|
1757
|
-
is relevant here.</pre>
|
|
1758
|
-
</td>
|
|
1759
|
-
</tr>
|
|
1760
|
-
<tr>
|
|
1761
|
-
<td>
|
|
1762
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-q-element'>q</a></code>
|
|
1763
|
-
</td>
|
|
1764
|
-
<td>
|
|
1765
|
-
Quotations
|
|
1766
|
-
</td>
|
|
1767
|
-
<td>
|
|
1768
|
-
<pre class='example'>The judge said
|
|
1769
|
-
<strong><q>You can drink water from the fish tank</q></strong>
|
|
1770
|
-
but advised against it.</pre>
|
|
1771
|
-
</td>
|
|
1772
|
-
</tr>
|
|
1773
|
-
<tr>
|
|
1774
|
-
<td>
|
|
1775
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a></code>
|
|
1776
|
-
</td>
|
|
1777
|
-
<td>
|
|
1778
|
-
Defining instance
|
|
1779
|
-
</td>
|
|
1780
|
-
<td>
|
|
1781
|
-
<pre class='example'>The term
|
|
1782
|
-
<strong><dfn>organic food</dfn></strong>
|
|
1783
|
-
refers to food produced without synthetic chemicals.</pre>
|
|
1784
|
-
</td>
|
|
1785
|
-
</tr>
|
|
1786
|
-
<tr>
|
|
1787
|
-
<td>
|
|
1788
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-abbr-element'>abbr</a></code>
|
|
1789
|
-
</td>
|
|
1790
|
-
<td>
|
|
1791
|
-
Abbreviations
|
|
1792
|
-
</td>
|
|
1793
|
-
<td>
|
|
1794
|
-
<pre class='example'>Organic food in Ireland is certified by the
|
|
1795
|
-
<strong><abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr></strong>.</pre>
|
|
1796
|
-
</td>
|
|
1797
|
-
</tr>
|
|
1798
|
-
<tr>
|
|
1799
|
-
<td>
|
|
1800
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-time-element'>time</a></code>
|
|
1801
|
-
</td>
|
|
1802
|
-
<td>
|
|
1803
|
-
Date and/or time
|
|
1804
|
-
</td>
|
|
1805
|
-
<td>
|
|
1806
|
-
<pre class='example'>Published
|
|
1807
|
-
<strong><time>2009-10-21</time></strong>.</pre>
|
|
1808
|
-
</td>
|
|
1809
|
-
</tr>
|
|
1810
|
-
<tr>
|
|
1811
|
-
<td>
|
|
1812
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-code-element'>code</a></code>
|
|
1813
|
-
</td>
|
|
1814
|
-
<td>
|
|
1815
|
-
Computer code
|
|
1816
|
-
</td>
|
|
1817
|
-
<td>
|
|
1818
|
-
<pre class='example'>The
|
|
1819
|
-
<strong><code>fruitdb</code></strong>
|
|
1820
|
-
program can be used for tracking fruit production.</pre>
|
|
1821
|
-
</td>
|
|
1822
|
-
</tr>
|
|
1823
|
-
<tr>
|
|
1824
|
-
<td>
|
|
1825
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-var-element'>var</a></code>
|
|
1826
|
-
</td>
|
|
1827
|
-
<td>
|
|
1828
|
-
Variables
|
|
1829
|
-
</td>
|
|
1830
|
-
<td>
|
|
1831
|
-
<pre class='example'>If there are
|
|
1832
|
-
<strong><var>n</var></strong>
|
|
1833
|
-
fruit in the bowl, at least
|
|
1834
|
-
<strong><var>n</var></strong>u{f7}2
|
|
1835
|
-
will be ripe.</pre>
|
|
1836
|
-
</td>
|
|
1837
|
-
</tr>
|
|
1838
|
-
<tr>
|
|
1839
|
-
<td>
|
|
1840
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-samp-element'>samp</a></code>
|
|
1841
|
-
</td>
|
|
1842
|
-
<td>
|
|
1843
|
-
Computer output
|
|
1844
|
-
</td>
|
|
1845
|
-
<td>
|
|
1846
|
-
<pre class='example'>The computer said
|
|
1847
|
-
<strong><samp>Unknown error -3</samp></strong>.</pre>
|
|
1848
|
-
</td>
|
|
1849
|
-
</tr>
|
|
1850
|
-
<tr>
|
|
1851
|
-
<td>
|
|
1852
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-kbd-element'>kbd</a></code>
|
|
1853
|
-
</td>
|
|
1854
|
-
<td>
|
|
1855
|
-
User input
|
|
1856
|
-
</td>
|
|
1857
|
-
<td>
|
|
1858
|
-
<pre class='example'>Hit
|
|
1859
|
-
<strong><kbd>F1</kbd></strong>
|
|
1860
|
-
to continue.</pre>
|
|
1861
|
-
</td>
|
|
1862
|
-
</tr>
|
|
1863
|
-
<tr>
|
|
1864
|
-
<td>
|
|
1865
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sub</a></code>
|
|
1866
|
-
</td>
|
|
1867
|
-
<td>
|
|
1868
|
-
Subscripts
|
|
1869
|
-
</td>
|
|
1870
|
-
<td>
|
|
1871
|
-
<pre class='example'>Water is H<strong><sub>2</sub></strong>O.</pre>
|
|
1872
|
-
</td>
|
|
1873
|
-
</tr>
|
|
1874
|
-
<tr>
|
|
1875
|
-
<td>
|
|
1876
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sup</a></code>
|
|
1877
|
-
</td>
|
|
1878
|
-
<td>
|
|
1879
|
-
Superscripts
|
|
1880
|
-
</td>
|
|
1881
|
-
<td>
|
|
1882
|
-
<pre class='example'>The Hydrogen in heavy water is usually
|
|
1883
|
-
<strong><sup>2</sup></strong>H.</pre>
|
|
1884
|
-
</td>
|
|
1885
|
-
</tr>
|
|
1886
|
-
<tr>
|
|
1887
|
-
<td>
|
|
1888
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-i-element'>i</a></code>
|
|
1889
|
-
</td>
|
|
1890
|
-
<td>
|
|
1891
|
-
Alternative voice
|
|
1892
|
-
</td>
|
|
1893
|
-
<td>
|
|
1894
|
-
<pre class='example'>Lemonade consists primarily of
|
|
1895
|
-
<strong><i>Citrus limon</i></strong>.</pre>
|
|
1896
|
-
</td>
|
|
1897
|
-
</tr>
|
|
1898
|
-
<tr>
|
|
1899
|
-
<td>
|
|
1900
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-b-element'>b</a></code>
|
|
1901
|
-
</td>
|
|
1902
|
-
<td>
|
|
1903
|
-
Keywords
|
|
1904
|
-
</td>
|
|
1905
|
-
<td>
|
|
1906
|
-
<pre class='example'>Take a
|
|
1907
|
-
<strong><b>lemon</b></strong>
|
|
1908
|
-
and squeeze it with a
|
|
1909
|
-
<strong><b>juicer</b></strong>.</pre>
|
|
1910
|
-
</td>
|
|
1911
|
-
</tr>
|
|
1912
|
-
<tr>
|
|
1913
|
-
<td>
|
|
1914
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-mark-element'>mark</a></code>
|
|
1915
|
-
</td>
|
|
1916
|
-
<td>
|
|
1917
|
-
Highlight
|
|
1918
|
-
</td>
|
|
1919
|
-
<td>
|
|
1920
|
-
<pre class='example'>Elderflower cordial, with one
|
|
1921
|
-
<strong><mark>part</mark></strong>
|
|
1922
|
-
cordial to ten
|
|
1923
|
-
<strong><mark>part</mark></strong>s
|
|
1924
|
-
water, stands a
|
|
1925
|
-
<strong><mark>part</mark></strong>
|
|
1926
|
-
from the rest.</pre>
|
|
1927
|
-
</td>
|
|
1928
|
-
</tr>
|
|
1929
|
-
<tr>
|
|
1930
|
-
<td><code><a href='http://developers.whatwg.org/text-level-semantics.html#the-ruby-element'>ruby</a></code>,
|
|
1931
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-rt-element'>rt</a></code>,
|
|
1932
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-rp-element'>rp</a></code>
|
|
1933
|
-
</td>
|
|
1934
|
-
<td>
|
|
1935
|
-
Ruby annotations
|
|
1936
|
-
</td>
|
|
1937
|
-
<td>
|
|
1938
|
-
<pre class='example'><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
|
|
1939
|
-
</td>
|
|
1940
|
-
</tr>
|
|
1941
|
-
<tr>
|
|
1942
|
-
<td>
|
|
1943
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-bdi-element'>bdi</a></code>
|
|
1944
|
-
</td>
|
|
1945
|
-
<td>
|
|
1946
|
-
Text directionality isolation
|
|
1947
|
-
</td>
|
|
1948
|
-
<td>
|
|
1949
|
-
<pre class='example'>The recommended restaurant is
|
|
1950
|
-
<strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
|
|
1951
|
-
</td>
|
|
1952
|
-
</tr>
|
|
1953
|
-
<tr>
|
|
1954
|
-
<td>
|
|
1955
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-bdo-element'>bdo</a></code>
|
|
1956
|
-
</td>
|
|
1957
|
-
<td>
|
|
1958
|
-
Text directionality formatting
|
|
1959
|
-
</td>
|
|
1960
|
-
<td>
|
|
1961
|
-
<pre class='example'>The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
|
|
1962
|
-
</td>
|
|
1963
|
-
</tr>
|
|
1964
|
-
<tr>
|
|
1965
|
-
<td>
|
|
1966
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-span-element'>span</a></code>
|
|
1967
|
-
</td>
|
|
1968
|
-
<td>
|
|
1969
|
-
Other
|
|
1970
|
-
</td>
|
|
1971
|
-
<td>
|
|
1972
|
-
<pre class='example'>In French we call it
|
|
1973
|
-
<strong><span lang="fr">sirop de sureau</span></strong>.</pre>
|
|
1974
|
-
</td>
|
|
1975
|
-
</tr>
|
|
1976
|
-
<tr>
|
|
1977
|
-
<td>
|
|
1978
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-br-element'>br</a></code>
|
|
1979
|
-
</td>
|
|
1980
|
-
<td>
|
|
1981
|
-
Line break
|
|
1982
|
-
</td>
|
|
1983
|
-
<td>
|
|
1984
|
-
<pre class='example'>Simply Orange Juice Company<strong><br></strong>Apopka, FL 32703<strong><br></strong>U.S.A.</pre>
|
|
1985
|
-
</td>
|
|
1986
|
-
</tr>
|
|
1987
|
-
<tr>
|
|
1988
|
-
<td>
|
|
1989
|
-
<code><a href='http://developers.whatwg.org/text-level-semantics.html#the-wbr-element'>wbr</a></code>
|
|
1990
|
-
</td>
|
|
1991
|
-
<td>
|
|
1992
|
-
Line breaking opportunity
|
|
1993
|
-
</td>
|
|
1994
|
-
<td>
|
|
1995
|
-
<pre class='example'>www.simply<strong><wbr></strong>orange<strong><wbr></strong>juice.com</pre>
|
|
1996
|
-
</td>
|
|
1997
|
-
</tr>
|
|
1998
|
-
</tbody>
|
|
1999
|
-
</table>
|
|
2000
|
-
</div>
|
|
2001
|
-
</div>
|
|
2002
|
-
</section>
|
|
2003
|
-
<section class='element-group' id='tabular'>
|
|
2004
|
-
<h1 class='section-title'>Tabular Data</h1>
|
|
2005
|
-
<div class='element' id='table'>
|
|
2006
|
-
<h2 class='element-title'>
|
|
2007
|
-
Table
|
|
2008
|
-
</h2>
|
|
2009
|
-
<p>
|
|
2010
|
-
The
|
|
2011
|
-
<code><a href='http://developers.whatwg.org/tabular-data.html#the-table-element'>table</a></code>
|
|
2012
|
-
element
|
|
2013
|
-
<a href='http://developers.whatwg.org/tabular-data.html#represents'>represents</a>
|
|
2014
|
-
data with
|
|
2015
|
-
more than one dimension, in the form of a
|
|
2016
|
-
<a href='http://developers.whatwg.org/tabular-data.html#concept-table' title='concept-table'>table</a>.
|
|
2017
|
-
</p>
|
|
2018
|
-
<div class='markup'>
|
|
2019
|
-
<p>
|
|
2020
|
-
In the following table, characteristics are given in the second
|
|
2021
|
-
column, with the negative side in the left column and the positive
|
|
2022
|
-
side in the right column.
|
|
2023
|
-
</p>
|
|
2024
|
-
<table>
|
|
2025
|
-
<caption>Characteristics with positive and negative sides</caption>
|
|
2026
|
-
<thead>
|
|
2027
|
-
<tr>
|
|
2028
|
-
<th id='n'>
|
|
2029
|
-
Negative
|
|
2030
|
-
<th>
|
|
2031
|
-
Characteristic
|
|
2032
|
-
<th>
|
|
2033
|
-
Positive
|
|
2034
|
-
<tbody>
|
|
2035
|
-
<tr>
|
|
2036
|
-
<td headers='n r1'>
|
|
2037
|
-
Sad
|
|
2038
|
-
<th id='r1'>
|
|
2039
|
-
Mood
|
|
2040
|
-
<td>
|
|
2041
|
-
Happy
|
|
2042
|
-
<tr>
|
|
2043
|
-
<td headers='n r2'>
|
|
2044
|
-
Failing
|
|
2045
|
-
<th id='r2'>
|
|
2046
|
-
Grade
|
|
2047
|
-
<td>
|
|
2048
|
-
Passing
|
|
2049
|
-
</td>
|
|
2050
|
-
</th>
|
|
2051
|
-
</td>
|
|
2052
|
-
</tr>
|
|
2053
|
-
</td>
|
|
2054
|
-
</th>
|
|
2055
|
-
</td>
|
|
2056
|
-
</tr>
|
|
2057
|
-
</tbody>
|
|
2058
|
-
</th>
|
|
2059
|
-
</th>
|
|
2060
|
-
</th>
|
|
2061
|
-
</tr>
|
|
2062
|
-
</thead>
|
|
2063
|
-
</table>
|
|
2064
|
-
</div>
|
|
2065
|
-
<div class='markup'>
|
|
2066
|
-
<table>
|
|
2067
|
-
<caption>
|
|
2068
|
-
<strong>Characteristics with positive and negative sides.</strong>
|
|
2069
|
-
<p>
|
|
2070
|
-
Characteristics are given in the second column, with the
|
|
2071
|
-
negative side in the left column and the positive side in the right
|
|
2072
|
-
column.
|
|
2073
|
-
</p>
|
|
2074
|
-
</caption>
|
|
2075
|
-
<thead>
|
|
2076
|
-
<tr>
|
|
2077
|
-
<th id='n'>
|
|
2078
|
-
Negative
|
|
2079
|
-
<th>
|
|
2080
|
-
Characteristic
|
|
2081
|
-
<th>
|
|
2082
|
-
Positive
|
|
2083
|
-
<tbody>
|
|
2084
|
-
<tr>
|
|
2085
|
-
<td headers='n r1'>
|
|
2086
|
-
Sad
|
|
2087
|
-
<th id='r1'>
|
|
2088
|
-
Mood
|
|
2089
|
-
<td>
|
|
2090
|
-
Happy
|
|
2091
|
-
<tr>
|
|
2092
|
-
<td headers='n r2'>
|
|
2093
|
-
Failing
|
|
2094
|
-
<th id='r2'>
|
|
2095
|
-
Grade
|
|
2096
|
-
<td>
|
|
2097
|
-
Passing
|
|
2098
|
-
</td>
|
|
2099
|
-
</th>
|
|
2100
|
-
</td>
|
|
2101
|
-
</tr>
|
|
2102
|
-
</td>
|
|
2103
|
-
</th>
|
|
2104
|
-
</td>
|
|
2105
|
-
</tr>
|
|
2106
|
-
</tbody>
|
|
2107
|
-
</th>
|
|
2108
|
-
</th>
|
|
2109
|
-
</th>
|
|
2110
|
-
</tr>
|
|
2111
|
-
</thead>
|
|
2112
|
-
</table>
|
|
2113
|
-
</div>
|
|
2114
|
-
<div class='markup'>
|
|
2115
|
-
<table>
|
|
2116
|
-
<caption>
|
|
2117
|
-
<strong>Characteristics with positive and negative sides.</strong>
|
|
2118
|
-
<details>
|
|
2119
|
-
<summary>Help</summary>
|
|
2120
|
-
<p>
|
|
2121
|
-
Characteristics are given in the second column, with the
|
|
2122
|
-
negative side in the left column and the positive side in the right
|
|
2123
|
-
column.
|
|
2124
|
-
</p>
|
|
2125
|
-
</details>
|
|
2126
|
-
</caption>
|
|
2127
|
-
<thead>
|
|
2128
|
-
<tr>
|
|
2129
|
-
<th id='n'>
|
|
2130
|
-
Negative
|
|
2131
|
-
<th>
|
|
2132
|
-
Characteristic
|
|
2133
|
-
<th>
|
|
2134
|
-
Positive
|
|
2135
|
-
<tbody>
|
|
2136
|
-
<tr>
|
|
2137
|
-
<td headers='n r1'>
|
|
2138
|
-
Sad
|
|
2139
|
-
<th id='r1'>
|
|
2140
|
-
Mood
|
|
2141
|
-
<td>
|
|
2142
|
-
Happy
|
|
2143
|
-
<tr>
|
|
2144
|
-
<td headers='n r2'>
|
|
2145
|
-
Failing
|
|
2146
|
-
<th id='r2'>
|
|
2147
|
-
Grade
|
|
2148
|
-
<td>
|
|
2149
|
-
Passing
|
|
2150
|
-
</td>
|
|
2151
|
-
</th>
|
|
2152
|
-
</td>
|
|
2153
|
-
</tr>
|
|
2154
|
-
</td>
|
|
2155
|
-
</th>
|
|
2156
|
-
</td>
|
|
2157
|
-
</tr>
|
|
2158
|
-
</tbody>
|
|
2159
|
-
</th>
|
|
2160
|
-
</th>
|
|
2161
|
-
</th>
|
|
2162
|
-
</tr>
|
|
2163
|
-
</thead>
|
|
2164
|
-
</table>
|
|
2165
|
-
</div>
|
|
2166
|
-
<div class='markup'>
|
|
2167
|
-
<figure>
|
|
2168
|
-
<figcaption>Characteristics with positive and negative sides</figcaption>
|
|
2169
|
-
<p>
|
|
2170
|
-
Characteristics are given in the second column, with the
|
|
2171
|
-
negative side in the left column and the positive side in the right
|
|
2172
|
-
column.
|
|
2173
|
-
</p>
|
|
2174
|
-
<table>
|
|
2175
|
-
<thead>
|
|
2176
|
-
<tr>
|
|
2177
|
-
<th id='n'>
|
|
2178
|
-
Negative
|
|
2179
|
-
<th>
|
|
2180
|
-
Characteristic
|
|
2181
|
-
<th>
|
|
2182
|
-
Positive
|
|
2183
|
-
<tbody>
|
|
2184
|
-
<tr>
|
|
2185
|
-
<td headers='n r1'>
|
|
2186
|
-
Sad
|
|
2187
|
-
<th id='r1'>
|
|
2188
|
-
Mood
|
|
2189
|
-
<td>
|
|
2190
|
-
Happy
|
|
2191
|
-
<tr>
|
|
2192
|
-
<td headers='n r2'>
|
|
2193
|
-
Failing
|
|
2194
|
-
<th id='r2'>
|
|
2195
|
-
Grade
|
|
2196
|
-
<td>
|
|
2197
|
-
Passing
|
|
2198
|
-
</td>
|
|
2199
|
-
</th>
|
|
2200
|
-
</td>
|
|
2201
|
-
</tr>
|
|
2202
|
-
</td>
|
|
2203
|
-
</th>
|
|
2204
|
-
</td>
|
|
2205
|
-
</tr>
|
|
2206
|
-
</tbody>
|
|
2207
|
-
</th>
|
|
2208
|
-
</th>
|
|
2209
|
-
</th>
|
|
2210
|
-
</tr>
|
|
2211
|
-
</thead>
|
|
2212
|
-
</table>
|
|
2213
|
-
</figure>
|
|
2214
|
-
</div>
|
|
2215
|
-
<div class='markup'>
|
|
2216
|
-
<figure>
|
|
2217
|
-
<figcaption>
|
|
2218
|
-
<strong>Characteristics with positive and negative sides</strong>
|
|
2219
|
-
<p>
|
|
2220
|
-
Characteristics are given in the second column, with the
|
|
2221
|
-
negative side in the left column and the positive side in the right
|
|
2222
|
-
column.
|
|
2223
|
-
</p>
|
|
2224
|
-
</figcaption>
|
|
2225
|
-
<table>
|
|
2226
|
-
<thead>
|
|
2227
|
-
<tr>
|
|
2228
|
-
<th id='n'>
|
|
2229
|
-
Negative
|
|
2230
|
-
<th>
|
|
2231
|
-
Characteristic
|
|
2232
|
-
<th>
|
|
2233
|
-
Positive
|
|
2234
|
-
<tbody>
|
|
2235
|
-
<tr>
|
|
2236
|
-
<td headers='n r1'>
|
|
2237
|
-
Sad
|
|
2238
|
-
<th id='r1'>
|
|
2239
|
-
Mood
|
|
2240
|
-
<td>
|
|
2241
|
-
Happy
|
|
2242
|
-
<tr>
|
|
2243
|
-
<td headers='n r2'>
|
|
2244
|
-
Failing
|
|
2245
|
-
<th id='r2'>
|
|
2246
|
-
Grade
|
|
2247
|
-
<td>
|
|
2248
|
-
Passing
|
|
2249
|
-
</td>
|
|
2250
|
-
</th>
|
|
2251
|
-
</td>
|
|
2252
|
-
</tr>
|
|
2253
|
-
</td>
|
|
2254
|
-
</th>
|
|
2255
|
-
</td>
|
|
2256
|
-
</tr>
|
|
2257
|
-
</tbody>
|
|
2258
|
-
</th>
|
|
2259
|
-
</th>
|
|
2260
|
-
</th>
|
|
2261
|
-
</tr>
|
|
2262
|
-
</thead>
|
|
2263
|
-
</table>
|
|
2264
|
-
</figure>
|
|
2265
|
-
</div>
|
|
2266
|
-
<div class='markup'>
|
|
2267
|
-
<table>
|
|
2268
|
-
<caption>Characteristics with positive and negative sides</caption>
|
|
2269
|
-
<thead>
|
|
2270
|
-
<tr>
|
|
2271
|
-
<th>
|
|
2272
|
-
Characteristic
|
|
2273
|
-
<th>
|
|
2274
|
-
Negative
|
|
2275
|
-
<th>
|
|
2276
|
-
Positive
|
|
2277
|
-
<tbody>
|
|
2278
|
-
<tr>
|
|
2279
|
-
<th>
|
|
2280
|
-
Mood
|
|
2281
|
-
<td>
|
|
2282
|
-
Sad
|
|
2283
|
-
<td>
|
|
2284
|
-
Happy
|
|
2285
|
-
<tr>
|
|
2286
|
-
<th>
|
|
2287
|
-
Grade
|
|
2288
|
-
<td>
|
|
2289
|
-
Failing
|
|
2290
|
-
<td>
|
|
2291
|
-
Passing
|
|
2292
|
-
</td>
|
|
2293
|
-
</td>
|
|
2294
|
-
</th>
|
|
2295
|
-
</tr>
|
|
2296
|
-
</td>
|
|
2297
|
-
</td>
|
|
2298
|
-
</th>
|
|
2299
|
-
</tr>
|
|
2300
|
-
</tbody>
|
|
2301
|
-
</th>
|
|
2302
|
-
</th>
|
|
2303
|
-
</th>
|
|
2304
|
-
</tr>
|
|
2305
|
-
</thead>
|
|
2306
|
-
</table>
|
|
2307
|
-
</div>
|
|
2308
|
-
</div>
|
|
2309
|
-
<div class='element' id='thead'>
|
|
2310
|
-
<h2 class='element-title'>
|
|
2311
|
-
thead
|
|
2312
|
-
</h2>
|
|
2313
|
-
<p>
|
|
2314
|
-
The
|
|
2315
|
-
<code><a href='http://developers.whatwg.org/tabular-data.html#the-thead-element'>thead</a></code>
|
|
2316
|
-
element
|
|
2317
|
-
<a href='http://developers.whatwg.org/tabular-data.html#represents'>represents</a>
|
|
2318
|
-
the
|
|
2319
|
-
<a href='http://developers.whatwg.org/tabular-data.html#concept-row-group' title='concept-row-group'>block</a>
|
|
2320
|
-
of
|
|
2321
|
-
<a href='http://developers.whatwg.org/tabular-data.html#concept-row' title='concept-row'>rows</a>
|
|
2322
|
-
that consist of the column labels
|
|
2323
|
-
(headers) for the parent
|
|
2324
|
-
<code><a href='http://developers.whatwg.org/tabular-data.html#the-table-element'>table</a></code>
|
|
2325
|
-
element, if the
|
|
2326
|
-
<code><a href='http://developers.whatwg.org/tabular-data.html#the-thead-element'>thead</a></code>
|
|
2327
|
-
element has a parent and it is a
|
|
2328
|
-
<code><a href='http://developers.whatwg.org/tabular-data.html#the-table-element'>table</a></code>.
|
|
2329
|
-
</p>
|
|
2330
|
-
<div class='markup'>
|
|
2331
|
-
<table>
|
|
2332
|
-
<caption>School auction sign-up sheet</caption>
|
|
2333
|
-
<thead>
|
|
2334
|
-
<tr>
|
|
2335
|
-
<th>
|
|
2336
|
-
<label for='e1'>Name</label>
|
|
2337
|
-
<th>
|
|
2338
|
-
<label for='e2'>Product</label>
|
|
2339
|
-
<th>
|
|
2340
|
-
<label for='e3'>Picture</label>
|
|
2341
|
-
<th>
|
|
2342
|
-
<label for='e4'>Price</label>
|
|
2343
|
-
<tr>
|
|
2344
|
-
<td>
|
|
2345
|
-
Your name here
|
|
2346
|
-
<td>
|
|
2347
|
-
What are you selling?
|
|
2348
|
-
<td>
|
|
2349
|
-
Link to a picture
|
|
2350
|
-
<td>
|
|
2351
|
-
Your reserve price
|
|
2352
|
-
<tbody>
|
|
2353
|
-
<tr>
|
|
2354
|
-
<td>
|
|
2355
|
-
Ms Danus
|
|
2356
|
-
<td>
|
|
2357
|
-
Doughnuts
|
|
2358
|
-
<td>
|
|
2359
|
-
<img src='http://example.com/mydoughnuts.png' title='Doughnuts from Ms Danus'>
|
|
2360
|
-
<td>
|
|
2361
|
-
$45
|
|
2362
|
-
<tr>
|
|
2363
|
-
<td>
|
|
2364
|
-
<input form='f' id='e1' name='who' required='' type='text'>
|
|
2365
|
-
<td>
|
|
2366
|
-
<input form='f' id='e2' name='what' required='' type='text'>
|
|
2367
|
-
<td>
|
|
2368
|
-
<input form='f' id='e3' name='pic' type='url'>
|
|
2369
|
-
<td>
|
|
2370
|
-
<input form='f' id='e4' min='0' required='' step='0.01' type='number' value='0' />
|
|
2371
|
-
</td>
|
|
2372
|
-
</input>
|
|
2373
|
-
</td>
|
|
2374
|
-
</input>
|
|
2375
|
-
</td>
|
|
2376
|
-
</input>
|
|
2377
|
-
</td>
|
|
2378
|
-
</tr>
|
|
2379
|
-
</td>
|
|
2380
|
-
</img>
|
|
2381
|
-
</td>
|
|
2382
|
-
</td>
|
|
2383
|
-
</td>
|
|
2384
|
-
</tr>
|
|
2385
|
-
</tbody>
|
|
2386
|
-
</td>
|
|
2387
|
-
</td>
|
|
2388
|
-
</td>
|
|
2389
|
-
</td>
|
|
2390
|
-
</tr>
|
|
2391
|
-
</th>
|
|
2392
|
-
</th>
|
|
2393
|
-
</th>
|
|
2394
|
-
</th>
|
|
2395
|
-
</tr>
|
|
2396
|
-
</thead>
|
|
2397
|
-
</table>
|
|
2398
|
-
<form action='/auction.cgi' id='f'>
|
|
2399
|
-
<input name='add' type='button' value='Submit' />
|
|
2400
|
-
</form>
|
|
2401
|
-
</div>
|
|
2402
|
-
</div>
|
|
2403
|
-
<div class='element' id='sample-tables'>
|
|
2404
|
-
<h2 class='element-title'>Sample Tables</h2>
|
|
2405
|
-
<div class='markup'>
|
|
2406
|
-
<table>
|
|
2407
|
-
<caption>
|
|
2408
|
-
Specification values:
|
|
2409
|
-
<b>Steel</b>,
|
|
2410
|
-
<b>Castings</b>,
|
|
2411
|
-
Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.
|
|
2412
|
-
</caption>
|
|
2413
|
-
<thead>
|
|
2414
|
-
<tr>
|
|
2415
|
-
<th rowspan='2'>Grade.</th>
|
|
2416
|
-
<th rowspan='2'>Yield Point.</th>
|
|
2417
|
-
<th colspan='2'>Ultimate tensile strength</th>
|
|
2418
|
-
<th rowspan='2'>Per cent elong. 50.8mm or 2 in.</th>
|
|
2419
|
-
<th rowspan='2'>Per cent reduct. area.</th>
|
|
2420
|
-
</tr>
|
|
2421
|
-
<tr>
|
|
2422
|
-
<th>
|
|
2423
|
-
kg/mm
|
|
2424
|
-
<sup>2</sup>
|
|
2425
|
-
</th>
|
|
2426
|
-
<th>
|
|
2427
|
-
lb/in
|
|
2428
|
-
<sup>2</sup>
|
|
2429
|
-
</th>
|
|
2430
|
-
</tr>
|
|
2431
|
-
</thead>
|
|
2432
|
-
<tbody>
|
|
2433
|
-
<tr>
|
|
2434
|
-
<td>Hard</td>
|
|
2435
|
-
<td>0.45 ultimate</td>
|
|
2436
|
-
<td>56.2</td>
|
|
2437
|
-
<td>80,000</td>
|
|
2438
|
-
<td>15</td>
|
|
2439
|
-
<td>20</td>
|
|
2440
|
-
</tr>
|
|
2441
|
-
<tr>
|
|
2442
|
-
<td>Medium</td>
|
|
2443
|
-
<td>0.45 ultimate</td>
|
|
2444
|
-
<td>49.2</td>
|
|
2445
|
-
<td>70,000</td>
|
|
2446
|
-
<td>18</td>
|
|
2447
|
-
<td>25</td>
|
|
2448
|
-
</tr>
|
|
2449
|
-
<tr>
|
|
2450
|
-
<td>Soft</td>
|
|
2451
|
-
<td>0.45 ultimate</td>
|
|
2452
|
-
<td>42.2</td>
|
|
2453
|
-
<td>60,000</td>
|
|
2454
|
-
<td>22</td>
|
|
2455
|
-
<td>30</td>
|
|
2456
|
-
</tr>
|
|
2457
|
-
</tbody>
|
|
2458
|
-
</table>
|
|
2459
|
-
</div>
|
|
2460
|
-
<div class='markup'>
|
|
2461
|
-
<table>
|
|
2462
|
-
<thead>
|
|
2463
|
-
<tr>
|
|
2464
|
-
<th>
|
|
2465
|
-
<th>
|
|
2466
|
-
2008
|
|
2467
|
-
<th>
|
|
2468
|
-
2007
|
|
2469
|
-
<th>
|
|
2470
|
-
2006
|
|
2471
|
-
<tbody>
|
|
2472
|
-
<tr>
|
|
2473
|
-
<th>
|
|
2474
|
-
Net sales
|
|
2475
|
-
<td>
|
|
2476
|
-
$ 32,479
|
|
2477
|
-
<td>
|
|
2478
|
-
$ 24,006
|
|
2479
|
-
<td>
|
|
2480
|
-
$ 19,315
|
|
2481
|
-
<tr>
|
|
2482
|
-
<th>
|
|
2483
|
-
Cost of sales
|
|
2484
|
-
<td>
|
|
2485
|
-
21,334
|
|
2486
|
-
<td>
|
|
2487
|
-
15,852
|
|
2488
|
-
<td>
|
|
2489
|
-
13,717
|
|
2490
|
-
<tbody>
|
|
2491
|
-
<tr>
|
|
2492
|
-
<th>
|
|
2493
|
-
Gross margin
|
|
2494
|
-
<td>
|
|
2495
|
-
$ 11,145
|
|
2496
|
-
<td>
|
|
2497
|
-
$ 8,154
|
|
2498
|
-
<td>
|
|
2499
|
-
$ 5,598
|
|
2500
|
-
<tfoot>
|
|
2501
|
-
<tr>
|
|
2502
|
-
<th>
|
|
2503
|
-
Gross margin percentage
|
|
2504
|
-
<td>
|
|
2505
|
-
34.3%
|
|
2506
|
-
<td>
|
|
2507
|
-
34.0%
|
|
2508
|
-
<td>
|
|
2509
|
-
29.0%
|
|
2510
|
-
</td>
|
|
2511
|
-
</td>
|
|
2512
|
-
</td>
|
|
2513
|
-
</th>
|
|
2514
|
-
</tr>
|
|
2515
|
-
</tfoot>
|
|
2516
|
-
</td>
|
|
2517
|
-
</td>
|
|
2518
|
-
</td>
|
|
2519
|
-
</th>
|
|
2520
|
-
</tr>
|
|
2521
|
-
</tbody>
|
|
2522
|
-
</td>
|
|
2523
|
-
</td>
|
|
2524
|
-
</td>
|
|
2525
|
-
</th>
|
|
2526
|
-
</tr>
|
|
2527
|
-
</td>
|
|
2528
|
-
</td>
|
|
2529
|
-
</td>
|
|
2530
|
-
</th>
|
|
2531
|
-
</tr>
|
|
2532
|
-
</tbody>
|
|
2533
|
-
</th>
|
|
2534
|
-
</th>
|
|
2535
|
-
</th>
|
|
2536
|
-
</th>
|
|
2537
|
-
</tr>
|
|
2538
|
-
</thead>
|
|
2539
|
-
</table>
|
|
2540
|
-
</div>
|
|
2541
|
-
<div class='markup'>
|
|
2542
|
-
<table>
|
|
2543
|
-
<colgroup>
|
|
2544
|
-
<col>
|
|
2545
|
-
<colgroup>
|
|
2546
|
-
<col>
|
|
2547
|
-
<col>
|
|
2548
|
-
<col>
|
|
2549
|
-
<thead>
|
|
2550
|
-
<tr>
|
|
2551
|
-
<th>
|
|
2552
|
-
<th>
|
|
2553
|
-
2008
|
|
2554
|
-
<th>
|
|
2555
|
-
2007
|
|
2556
|
-
<th>
|
|
2557
|
-
2006
|
|
2558
|
-
<tbody>
|
|
2559
|
-
<tr>
|
|
2560
|
-
<th scope='rowgroup'>
|
|
2561
|
-
Research and development
|
|
2562
|
-
<td>
|
|
2563
|
-
$ 1,109
|
|
2564
|
-
<td>
|
|
2565
|
-
$ 782
|
|
2566
|
-
<td>
|
|
2567
|
-
$ 712
|
|
2568
|
-
<tr>
|
|
2569
|
-
<th scope='row'>
|
|
2570
|
-
Percentage of net sales
|
|
2571
|
-
<td>
|
|
2572
|
-
3.4%
|
|
2573
|
-
<td>
|
|
2574
|
-
3.3%
|
|
2575
|
-
<td>
|
|
2576
|
-
3.7%
|
|
2577
|
-
<tbody>
|
|
2578
|
-
<tr>
|
|
2579
|
-
<th scope='rowgroup'>
|
|
2580
|
-
Selling, general, and administrative
|
|
2581
|
-
<td>
|
|
2582
|
-
$ 3,761
|
|
2583
|
-
<td>
|
|
2584
|
-
$ 2,963
|
|
2585
|
-
<td>
|
|
2586
|
-
$ 2,433
|
|
2587
|
-
<tr>
|
|
2588
|
-
<th scope='row'>
|
|
2589
|
-
Percentage of net sales
|
|
2590
|
-
<td>
|
|
2591
|
-
11.6%
|
|
2592
|
-
<td>
|
|
2593
|
-
12.3%
|
|
2594
|
-
<td>
|
|
2595
|
-
12.6%
|
|
2596
|
-
</td>
|
|
2597
|
-
</td>
|
|
2598
|
-
</td>
|
|
2599
|
-
</th>
|
|
2600
|
-
</tr>
|
|
2601
|
-
</td>
|
|
2602
|
-
</td>
|
|
2603
|
-
</td>
|
|
2604
|
-
</th>
|
|
2605
|
-
</tr>
|
|
2606
|
-
</tbody>
|
|
2607
|
-
</td>
|
|
2608
|
-
</td>
|
|
2609
|
-
</td>
|
|
2610
|
-
</th>
|
|
2611
|
-
</tr>
|
|
2612
|
-
</td>
|
|
2613
|
-
</td>
|
|
2614
|
-
</td>
|
|
2615
|
-
</th>
|
|
2616
|
-
</tr>
|
|
2617
|
-
</tbody>
|
|
2618
|
-
</th>
|
|
2619
|
-
</th>
|
|
2620
|
-
</th>
|
|
2621
|
-
</th>
|
|
2622
|
-
</tr>
|
|
2623
|
-
</thead>
|
|
2624
|
-
</col>
|
|
2625
|
-
</col>
|
|
2626
|
-
</col>
|
|
2627
|
-
</colgroup>
|
|
2628
|
-
</col>
|
|
2629
|
-
</colgroup>
|
|
2630
|
-
</table>
|
|
2631
|
-
</div>
|
|
2632
|
-
</div>
|
|
2633
|
-
</section>
|
|
2634
|
-
<section class='element-group' id='forms'>
|
|
2635
|
-
<h1 class='section-title'>Forms</h1>
|
|
2636
|
-
<div class='element' id='sample-forms'>
|
|
2637
|
-
<h2 class='element-title'>Sample Forms</h2>
|
|
2638
|
-
<div class='markup'>
|
|
2639
|
-
<form action='https://pizza.example.com/order.cgi' enctype='application/x-www-form-urlencoded' method='post'>
|
|
2640
|
-
<p>
|
|
2641
|
-
<label>
|
|
2642
|
-
Customer name:
|
|
2643
|
-
<input name='custname' required='' />
|
|
2644
|
-
</label>
|
|
2645
|
-
</p>
|
|
2646
|
-
<p>
|
|
2647
|
-
<label>
|
|
2648
|
-
Telephone:
|
|
2649
|
-
<input name='custtel' type='tel' />
|
|
2650
|
-
</label>
|
|
2651
|
-
</p>
|
|
2652
|
-
<p>
|
|
2653
|
-
<label>
|
|
2654
|
-
E-mail address:
|
|
2655
|
-
<input name='custemail' type='email' />
|
|
2656
|
-
</label>
|
|
2657
|
-
</p>
|
|
2658
|
-
<fieldset>
|
|
2659
|
-
<legend>Pizza Size</legend>
|
|
2660
|
-
<p>
|
|
2661
|
-
<label>
|
|
2662
|
-
<input name='size' type='radio' value='small'>Small</input>
|
|
2663
|
-
</label>
|
|
2664
|
-
</p>
|
|
2665
|
-
<p>
|
|
2666
|
-
<label>
|
|
2667
|
-
<input name='size' type='radio' value='medium'>Medium</input>
|
|
2668
|
-
</label>
|
|
2669
|
-
</p>
|
|
2670
|
-
<p>
|
|
2671
|
-
<label>
|
|
2672
|
-
<input name='size' type='radio' value='large'>Large</input>
|
|
2673
|
-
</label>
|
|
2674
|
-
</p>
|
|
2675
|
-
</fieldset>
|
|
2676
|
-
<fieldset>
|
|
2677
|
-
<legend>Pizza Toppings</legend>
|
|
2678
|
-
<p>
|
|
2679
|
-
<label>
|
|
2680
|
-
<input name='topping' type='checkbox' value='bacon'>Bacon</input>
|
|
2681
|
-
</label>
|
|
2682
|
-
</p>
|
|
2683
|
-
<p>
|
|
2684
|
-
<label>
|
|
2685
|
-
<input name='topping' type='checkbox' value='cheese'>Extra Cheese</input>
|
|
2686
|
-
</label>
|
|
2687
|
-
</p>
|
|
2688
|
-
<p>
|
|
2689
|
-
<label>
|
|
2690
|
-
<input name='topping' type='checkbox' value='onion'>Onion</input>
|
|
2691
|
-
</label>
|
|
2692
|
-
</p>
|
|
2693
|
-
<p>
|
|
2694
|
-
<label>
|
|
2695
|
-
<input name='topping' type='checkbox' value='mushroom'>Mushroom</input>
|
|
2696
|
-
</label>
|
|
2697
|
-
</p>
|
|
2698
|
-
</fieldset>
|
|
2699
|
-
<p>
|
|
2700
|
-
<label>
|
|
2701
|
-
Preferred delivery time:
|
|
2702
|
-
<input max='21:00' min='11:00' name='delivery' required='' step='900' type='time' />
|
|
2703
|
-
</label>
|
|
2704
|
-
</p>
|
|
2705
|
-
<p>
|
|
2706
|
-
<label>
|
|
2707
|
-
Delivery instructions:
|
|
2708
|
-
<textarea maxlength='1000' name='comments'></textarea>
|
|
2709
|
-
</label>
|
|
2710
|
-
</p>
|
|
2711
|
-
<p>
|
|
2712
|
-
<button>Submit order</button>
|
|
2713
|
-
<p></p>
|
|
2714
|
-
</p>
|
|
2715
|
-
</form>
|
|
2716
|
-
</div>
|
|
2717
|
-
</div>
|
|
2718
|
-
<div class='element' id='fieldset'>
|
|
2719
|
-
<h2 class='element-title'>
|
|
2720
|
-
fieldset
|
|
2721
|
-
</h2>
|
|
2722
|
-
<div class='markup'>
|
|
2723
|
-
<fieldset disabled='' name='clubfields'>
|
|
2724
|
-
<legend>
|
|
2725
|
-
<label>
|
|
2726
|
-
<input name='club' onchange='form.clubfields.disabled = !checked' type='checkbox'>
|
|
2727
|
-
Use Club Card
|
|
2728
|
-
</input>
|
|
2729
|
-
</label>
|
|
2730
|
-
</legend>
|
|
2731
|
-
<p>
|
|
2732
|
-
<label>
|
|
2733
|
-
Name on card:
|
|
2734
|
-
<input name='clubname' required='' />
|
|
2735
|
-
</label>
|
|
2736
|
-
</p>
|
|
2737
|
-
<p>
|
|
2738
|
-
<label>
|
|
2739
|
-
Card number:
|
|
2740
|
-
<input name='clubnum' pattern='[-0-9]+' required='' />
|
|
2741
|
-
</label>
|
|
2742
|
-
</p>
|
|
2743
|
-
<p>
|
|
2744
|
-
<label>
|
|
2745
|
-
Expiry date:
|
|
2746
|
-
<input name='clubexp' type='month' />
|
|
2747
|
-
</label>
|
|
2748
|
-
</p>
|
|
2749
|
-
</fieldset>
|
|
2750
|
-
</div>
|
|
2751
|
-
<div class='markup'>
|
|
2752
|
-
<fieldset disabled='' name='clubfields'>
|
|
2753
|
-
<legend>
|
|
2754
|
-
<label>
|
|
2755
|
-
<input name='club' onchange='form.clubfields.disabled = !checked' type='checkbox'>
|
|
2756
|
-
Use Club Card
|
|
2757
|
-
</input>
|
|
2758
|
-
</label>
|
|
2759
|
-
</legend>
|
|
2760
|
-
<p>
|
|
2761
|
-
<label>
|
|
2762
|
-
Name on card:
|
|
2763
|
-
<input name='clubname' required='' />
|
|
2764
|
-
</label>
|
|
2765
|
-
</p>
|
|
2766
|
-
<fieldset name='numfields'>
|
|
2767
|
-
<legend>
|
|
2768
|
-
<label>
|
|
2769
|
-
<input checked='' name='clubtype' onchange='form.numfields.disabled = !checked' type='radio'>
|
|
2770
|
-
My card has numbers on it
|
|
2771
|
-
</input>
|
|
2772
|
-
</label>
|
|
2773
|
-
</legend>
|
|
2774
|
-
<p>
|
|
2775
|
-
<label>
|
|
2776
|
-
Card number:
|
|
2777
|
-
<input name='clubnum' pattern='[-0-9]+' required='' />
|
|
2778
|
-
</label>
|
|
2779
|
-
</p>
|
|
2780
|
-
</fieldset>
|
|
2781
|
-
<fieldset disabled='' name='letfields'>
|
|
2782
|
-
<legend>
|
|
2783
|
-
<label>
|
|
2784
|
-
<input name='clubtype' onchange='form.letfields.disabled = !checked' type='radio'>
|
|
2785
|
-
My card has letters on it
|
|
2786
|
-
</input>
|
|
2787
|
-
</label>
|
|
2788
|
-
</legend>
|
|
2789
|
-
<p>
|
|
2790
|
-
<label>
|
|
2791
|
-
Card code:
|
|
2792
|
-
<input name='clublet' pattern='[A-Za-z]+' required='' />
|
|
2793
|
-
</label>
|
|
2794
|
-
</p>
|
|
2795
|
-
</fieldset>
|
|
2796
|
-
</fieldset>
|
|
2797
|
-
</div>
|
|
2798
|
-
</div>
|
|
2799
|
-
<div class='element' id='label'>
|
|
2800
|
-
<h2 class='element-title'>
|
|
2801
|
-
label
|
|
2802
|
-
</h2>
|
|
2803
|
-
<div class='markup'>
|
|
2804
|
-
<p>
|
|
2805
|
-
<label>
|
|
2806
|
-
Full name:
|
|
2807
|
-
<input name='fn'>
|
|
2808
|
-
<small>Format: First Last</small>
|
|
2809
|
-
</input>
|
|
2810
|
-
</label>
|
|
2811
|
-
</p>
|
|
2812
|
-
<p>
|
|
2813
|
-
<label>
|
|
2814
|
-
Age:
|
|
2815
|
-
<input min='0' name='age' type='number' />
|
|
2816
|
-
</label>
|
|
2817
|
-
</p>
|
|
2818
|
-
<p>
|
|
2819
|
-
<label>
|
|
2820
|
-
Post code:
|
|
2821
|
-
<input name='pc'>
|
|
2822
|
-
<small>Format: AB12 3CD</small>
|
|
2823
|
-
</input>
|
|
2824
|
-
</label>
|
|
2825
|
-
</p>
|
|
2826
|
-
</div>
|
|
2827
|
-
</div>
|
|
2828
|
-
</section>
|
|
2829
|
-
<section class='element-group' id='interactive'>
|
|
2830
|
-
<h1 class='section-title'>Interactive</h1>
|
|
2831
|
-
<div class='element' id='details'>
|
|
2832
|
-
<h2 class='element-title'>
|
|
2833
|
-
details
|
|
2834
|
-
</h2>
|
|
2835
|
-
<p>
|
|
2836
|
-
The
|
|
2837
|
-
<code><a href='http://developers.whatwg.org/interactive-elements.html#the-details-element'>details</a></code>
|
|
2838
|
-
element
|
|
2839
|
-
<a href='http://developers.whatwg.org/interactive-elements.html#represents'>represents</a>
|
|
2840
|
-
a
|
|
2841
|
-
disclosure widget from which the user can obtain additional
|
|
2842
|
-
information or controls.
|
|
2843
|
-
</p>
|
|
2844
|
-
<div class='markup'>
|
|
2845
|
-
<section class='progress window'>
|
|
2846
|
-
<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
|
|
2847
|
-
<details>
|
|
2848
|
-
<summary>
|
|
2849
|
-
Copying...
|
|
2850
|
-
<progress max='375505392' value='97543282'></progress>
|
|
2851
|
-
25%
|
|
2852
|
-
</summary>
|
|
2853
|
-
<dl>
|
|
2854
|
-
<dt>Transfer rate:</dt>
|
|
2855
|
-
<dd>452KB/s</dd>
|
|
2856
|
-
<dt>Local filename:</dt>
|
|
2857
|
-
<dd>/home/rpausch/raycd.m4v</dd>
|
|
2858
|
-
<dt>Remote filename:</dt>
|
|
2859
|
-
<dd>/var/www/lectures/raycd.m4v</dd>
|
|
2860
|
-
<dt>Duration:</dt>
|
|
2861
|
-
<dd>01:16:27</dd>
|
|
2862
|
-
<dt>Color profile:</dt>
|
|
2863
|
-
<dd>SD (6-1-6)</dd>
|
|
2864
|
-
<dt>Dimensions:</dt>
|
|
2865
|
-
<dd>320×240</dd>
|
|
2866
|
-
</dl>
|
|
2867
|
-
</details>
|
|
2868
|
-
</section>
|
|
2869
|
-
</div>
|
|
2870
|
-
<div class='markup'>
|
|
2871
|
-
<details>
|
|
2872
|
-
<summary>
|
|
2873
|
-
<label for='fn'>Name & Extension:</label>
|
|
2874
|
-
</summary>
|
|
2875
|
-
<p>
|
|
2876
|
-
<input id='fn' name='fn' type='text' value='Pillar Magazine.pdf'>
|
|
2877
|
-
<p>
|
|
2878
|
-
<label>
|
|
2879
|
-
<input checked='' name='ext' type='checkbox'>Hide extension</input>
|
|
2880
|
-
</label>
|
|
2881
|
-
</p>
|
|
2882
|
-
</input>
|
|
2883
|
-
</p>
|
|
2884
|
-
</details>
|
|
2885
|
-
</div>
|
|
2886
|
-
</div>
|
|
2887
|
-
<div class='element' id='menu'>
|
|
2888
|
-
<h2 class='element-title'>
|
|
2889
|
-
menu
|
|
2890
|
-
</h2>
|
|
2891
|
-
<p>
|
|
2892
|
-
The
|
|
2893
|
-
<code><a href='http://developers.whatwg.org/interactive-elements.html#menus'>menu</a></code>
|
|
2894
|
-
element represents a list of commands.
|
|
2895
|
-
</p>
|
|
2896
|
-
<div class='markup'>
|
|
2897
|
-
<menu type='toolbar'>
|
|
2898
|
-
<li>
|
|
2899
|
-
<menu label='File'>
|
|
2900
|
-
<button onclick='fnew()' type='button'>New...</button>
|
|
2901
|
-
<button onclick='fopen()' type='button'>Open...</button>
|
|
2902
|
-
<button onclick='fsave()' type='button'>Save</button>
|
|
2903
|
-
<button onclick='fsaveas()' type='button'>Save as...</button>
|
|
2904
|
-
</menu>
|
|
2905
|
-
</li>
|
|
2906
|
-
<li>
|
|
2907
|
-
<menu label='Edit'>
|
|
2908
|
-
<button onclick='ecopy()' type='button'>Copy</button>
|
|
2909
|
-
<button onclick='ecut()' type='button'>Cut</button>
|
|
2910
|
-
<button onclick='epaste()' type='button'>Paste</button>
|
|
2911
|
-
</menu>
|
|
2912
|
-
</li>
|
|
2913
|
-
<li>
|
|
2914
|
-
<menu label='Help'>
|
|
2915
|
-
<li>
|
|
2916
|
-
<a href='help.html'>Help</a>
|
|
2917
|
-
</li>
|
|
2918
|
-
<li>
|
|
2919
|
-
<a href='about.html'>About</a>
|
|
2920
|
-
</li>
|
|
2921
|
-
</menu>
|
|
2922
|
-
</li>
|
|
2923
|
-
</menu>
|
|
2924
|
-
</div>
|
|
2925
|
-
<div class='markup'>
|
|
2926
|
-
<form action=''>
|
|
2927
|
-
<menu type='toolbar'>
|
|
2928
|
-
<label for='goto'>Go to...</label>
|
|
2929
|
-
<menu label='Go'>
|
|
2930
|
-
<select id='goto'>
|
|
2931
|
-
<option selected='selected' value=''>Select site:</option>
|
|
2932
|
-
<option value='http://www.apple.com/'>Apple</option>
|
|
2933
|
-
<option value='http://www.mozilla.org/'>Mozilla</option>
|
|
2934
|
-
<option value='http://www.opera.com/'>Opera</option>
|
|
2935
|
-
</select>
|
|
2936
|
-
<span>
|
|
2937
|
-
<input type='submit' value='Go' />
|
|
2938
|
-
</span>
|
|
2939
|
-
</menu>
|
|
2940
|
-
</menu>
|
|
2941
|
-
</form>
|
|
2942
|
-
</div>
|
|
2943
|
-
</div>
|
|
2944
|
-
</section>
|
|
2945
|
-
</div>
|
|
2946
|
-
<footer></footer>
|
|
2947
|
-
</div>
|
|
2948
|
-
<!--
|
|
2949
|
-
Javascript at the bottom for fast page loading
|
|
2950
|
-
Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary
|
|
2951
|
-
-->
|
|
2952
|
-
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js'></script>
|
|
2953
|
-
<script type='text/javascript'>
|
|
2954
|
-
//<![CDATA[
|
|
2955
|
-
window.jQuery || document.write("<script src='js/libs/jquery-1.6.min.js'>\x3C/script>")
|
|
2956
|
-
//]]>
|
|
2957
|
-
</script>
|
|
2958
|
-
<script src='/js/libs/plugins.js?v=1'></script>
|
|
2959
|
-
<script src='/js/script.js?v=1'></script>
|
|
2960
|
-
<script src='/js/libs/320-up/helper.js?v=1'></script>
|
|
2961
|
-
<script src='/js/kit/kit-source.jquery.js?v=1'></script>
|
|
2962
|
-
<!--[if (lt IE 9) & (!IEMobile)]>
|
|
2963
|
-
<script src="/js/libs/imgsizer.js"></script>
|
|
2964
|
-
<![endif]-->
|
|
2965
|
-
<script type='text/javascript'>
|
|
2966
|
-
//<![CDATA[
|
|
2967
|
-
// iOS scale bug fix
|
|
2968
|
-
MBP.scaleFix();
|
|
2969
|
-
|
|
2970
|
-
// Respond.js
|
|
2971
|
-
yepnope({
|
|
2972
|
-
test : Modernizr.mq('(only all)'),
|
|
2973
|
-
nope : ['/js/libs/respond.min.js']
|
|
2974
|
-
});
|
|
2975
|
-
//]]>
|
|
2976
|
-
</script>
|
|
2977
|
-
<!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
|
|
2978
|
-
<!-- change the UA-XXXXX-X to be your site's ID -->
|
|
2979
|
-
<script type='text/javascript'>
|
|
2980
|
-
//<![CDATA[
|
|
2981
|
-
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"],["_trackPageLoadTime"]];
|
|
2982
|
-
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
|
2983
|
-
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
|
|
2984
|
-
s.parentNode.insertBefore(g,s)}(document,"script"));
|
|
2985
|
-
//]]>
|
|
2986
|
-
</script>
|
|
2987
|
-
</body>
|
|
2988
|
-
</html>
|