Даведнік па HTML

Карысныя спасылкі

Хатняя старонка

Хатняя старонка на W3C: http://www.w3.org/html/

Стандарты і спэцыфікацыі

HTML 4.01

Спэцыфікацыя на W3C: http://www.w3.org/TR/html401

HTML 5.0

Рэкамэндацыя на W3C: http://www.w3.org/TR/html5/

Living Standard на WHATWG: https://html.spec.whatwg.org/multipage/

Чарнавік наступнай мінорнай вэрсіі 5.1 на W3C: http://www.w3.org/html/wg/drafts/html/master/

Розьніца паміж 4ай і 5ай вэрсіямі

Зацемкі ад W3C: http://www.w3.org/TR/html5-diff/

Даведнікі і кнігі

Даведнік па HTML5 на HtmlReference.io: http://htmlreference.io/

Даведнік па HTML5 на MDN: https://developer.mozilla.org/en/HTML/Element

Даведнік па HTML5 на w3school.com: http://www.w3schools.com/html/

Інтэрактыўная шпаргалка па элемэнтах на OverAPI: http://overapi.com/html

Інтэрактыўная шпаргалка па DOM на OverAPI: http://overapi.com/html-dom

Інтэрактыўны курс па HTML5 і CSS3 на CodeSchool: http://frontend.codeschool.com/

Даведнік па HTML4 на SitePoint: http://reference.sitepoint.com/html

Кніга па асаблівасьцях HTML5 «Dive into HTML5»: http://diveintohtml5.org

Даведнік па асаблівасьцях HTML5 «HTML 5 Doctor»: http://html5doctor.com

HTML5 прыклады

https://developer.mozilla.org/en-US/demos/

http://html5gallery.com/

Прылады

JavaScript, які вызначае ці падтрымліваюцца агентам пэўныя асаблівасьці HTML5: http://www.modernizr.com

JavaScript, які «дапамагае» Internet Explorer'у разумець HTML5 элемэнты: http://code.google.com/p/html5shiv

Дапаможнік па выкарыстаньні пазначаных скрыптоў: HTML5 and CSS3 Without Guilt.

HTML і XHTML

Дакумэнт HTML можа быць запісаны традыцыйным HTML-сынтаксам і XML-сынтаксам (так званы XHTML).

HTML-сынтакс мае жорстка зададзены набор элемэнтаў і атрыбутаў. Аўтары і агенты HTML павінны трымацца гэтага набору.

XML жа сынтакс вольны, могуць ўводзіцца новыя элемэнты і атрыбуты, але сам па сабе гэты сынтакс нашмат больш строгі:

Абавязкова павінен зьмяшчаць элемэнты html, head і body.

¹ xmlns - гэта namespace для XML

Адкрывальны тэг html павінен мець атрыбут xmlns¹.
Усе элемэнты павінны мець адкрывальныя і закрывальныя тэгі, акрамя пустых (у адпаведнасьці са спэцыфікацыяй) элемэнтаў, для якіх ужываецца адпаведны сынтакс пустога элемэнту (<br />).
Усе элемэнты і атрыбуты зьяўляюцца case-sensitive.
Значэньні атрыбутаў павінны заключацца ў двукосьсе.

Вельмі істотныя аспэкты, якімі адрозьніваюцца сынтаксы паміж сабой:

У XHTML мова пазначаецца атрыбутам xml:lang, а не lang, як у HTML.
У XHTML кадоўка тэксту² пазначаецца ў аб'яве xml:
```
<?xml version="1.0" encoding="UTF-8"?>
```
Тым часам, як ў HTML гэта робіцца праз Content-Type:
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
```
Незалежна ад таго, як дакумэнт напісаны, ён будзе інтэрпрэтавацца як XHTML у выпадку, калі мае пашырэньне .xhtml ці калі пазначаны адпаведны тып зьместу ў Content-Type:
```
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
```

Акрамя гэтага ў XHTML не абавязкова пазначаць DOCTYPE. Але, калі XHTML-дакумэнт прызначаецца для выкарыстаньня як text/html зьмест, тады DOCTYPE пазначаць трэба:


<!-- HTML example -->
<!DOCTYPE html>
<html>
…
</html>


<!-- XHTML example -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
…
</html>

DOCTYPE

Фарматы

DOCTYPES – гэта адмысловая інструкцыя, абавязковая для HTML-сынтаксу, якая вызначае мадэль апрацоўкі браўзэра. Гэтая інструкцыя павінна зьмяшчацца ў самым пачатку дакумэнту і адпавядаць аднаму з 3-х фарматаў:

Сучасны:
```
<!DOCTYPE html>
```

Састарэлы:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Сумяшчальны з legacy-tool, то бок з агентам, які працуе не з грамадзкімі вэрсіямі HTML, а з уласнымі, пашыранымі:
```
<!DOCTYPE html SYSTEM "about:legacy-compat">
```

Даступныя тыпы

У табліцы ніжэй прыведзеныя DOCTYPES, якія даступныя грамадзкасьці ад W3C

DOCTYPE	Апісаньне
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	Строгі HTML 4.01. Не дазваляецца выкарыстаньне састарэлых прэзэнтацыйных (ці стылявых, напр. `font`) элемэнтаў. Не дазваляецца выкарыстаньне фрэймаў.
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	Пераходны HTML 4.01. У параўнаньні з папярэднім дазваляецца выкарыстаньне прэзэнтацыйных элемэнтаў, якія зьяўляюцца састарэлымі для строгага тыпу.
`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`	Фрэймавы HTML 4.01. Тое ж самае, што папярэдні тып, толькі яшчэ дазваляецца выкарыстоўваць фрэймы.
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`	Строгі XHTML 1.0. Тое ж, што строгі HTML 4.01 толькі дакумэнт павінен быць напісаны, як правільны XML.
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`	Пераходны XHTML 1.0. Тое ж, што пераходны HTML 4.01 толькі дакумэнт павінен быць напісаны, як правільны XML.
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">`	Фрэймавы XHTML 1.0. Тое ж самае, што папярэдні тып, толькі яшчэ дазваляецца выкарыстоўваць фрэймы.
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`	Строгі XHTML 1.1. Як і строгі XHTML 1.0 толькі дазваляецца мадулярызацыя, то бок можна дадаваць модулі – напрыклад, каб дадаць падтрымку Ruby для кітайскіх, японскі, карэйскіх сымбаляў.

Рэжымы агентаў³

Каб правільна адлюстроўваць і сучасныя дакумэнты, што адпавядаюць стандарту, і старыя, якія яму не адпавядаюць, у браўзэраў ёсьць некалькі рэжымаў працы (адлюстраваньня дакумэнту):

Quirks Mode. Рэжым сумяшчальны са старымі дакумэнтамі, якія не адпавядаюць сучасным стандартам.
Standards Mode (у HTML5 выкарыстоўваецца тэрмін "no quirks mode"). Рэжым, у якім агенты адлюстроўваюць дакумэнт у адпаведнасьці са стандартам.
Almost Standards Mode (у HTML5 выкарыстоўваецца тэрмін "limited quirks mode"). Рэжым, у якім вэртыкальныя памеры ячэек табліцы разьлічваюцца традыцыйна, а не ў адпаведнасьці са спэцыфікацыяй CSS2.

Загатоўкі дакумэнтаў

Boilerplate

Boilerplate – гэта паўнавартасная, усебаковая, добра адпрацаваная загатоўка сайту ці сеціўнай праграмы, якая ўключае ня толькі сам HTML, але і асноўныя стылі, скрыпты і г.д.

Старонка праекту на GitHub: https://github.com/h5bp/html5-boilerplate

Відэа-урок ад стваральніка загатоўцы на NetTuts+: The Official Guide to HTML5 Boilerplate

Кароткая для HTML5


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="be-BY" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta name="title" content="Загаловак старонкі" />
  <meta name="description" content="Апісаньне зьместу старонкі." />
  <meta name="keywords" content="ключавыя словы старонкі" />

  <title>Загаловак старонкі</title>
</head>

<body>

</body>
</html>

Пашыраная для HTML5


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="be-BY" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />

  <!-- SHOULD BE USED TO RELOAD/REDIRERCT PAGE IN CERTAIN PERIOD OF TIME -->
  <!-- meta http-equiv="refresh" content="5" /-->
  <meta http-equiv="refresh" content="5; url=http://yurtsevich.info/" />

  <meta name="title" content="Загаловак старонкі" />
  <meta name="description" content="Апісаньне зьместу старонкі." />
  <meta name="classification" content="Катэгорыя зьместу старонкі, напр., Internet" />
  <meta name="keywords" content="ключавыя словы старонкі" />
  <meta name="owner" content="Кампанія ўладальнік" />
  <meta name="author" content="Аўтар дакумэнту1" />
  <meta name="author" content="Аўтар дакумэнту2" />
  <!-- As alternative to tag 'author' -->
  <meta name="creator" content="Аўтар дакумэнту1" />
  <meta name="creator" content="Аўтар дакумэнту2" />
  <meta name="publisher" content="Публікатар дакумэнту1" />
  <meta name="publisher" content="Публікатар дакумэнту2" />

  <meta name="copyright"
      content="Copyright © 2010 -Уладальнік правоў-, All Rights Reserved" />
  <!-- As alternative to above -->
  <meta name="rights"
      content="Copyright © 2010 -Уладальнік правоў-, All Rights Reserved" />
  <!-- More detailed information to above tag 'rights' -->
  <meta name="rights-standard" content=";copr2010" />

  <meta name="rating" content="general" />
  <meta name="audience" content="all" />

  <!-- IF INFO ON PAGE MAY BE EXPIRED. -->
  <meta name="expires" content="2010-12-31" />
  <!-- IF PAGE IS INTENDED TO BE PRINTED AT SPECIFIC CIRCUMSTANCES. -->
  <meta name="format-print" content="A5" />

  <!-- IF PAGE SHOULD NOT BE FOUND IF SEARCHED BY CERTAIN KEYWORDS. -->
  <meta name="keywords-not" content="sex" />
  <!-- IF PAGE SHOULD NOT BE FOUND IF SEARCHED BY CERTAIN KEYWORDS. -->
  <meta name="robots" content="noindex,nofollow" />

  <title>Загаловак старонкі</title>
</head>

<body>
</body>
</html>

Пашыраная для HTML4


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html lang="be-BY" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Language" content="be-BY">

  <!-- SHOULD BE USED TO RELOAD/REDIRERCT PAGE IN CERTAIN PERIOD OF TIME -->
  <!-- meta http-equiv="refresh" content="5" /-->
  <meta http-equiv="refresh" content="5; url=http://yurtsevich.info/">

  <meta name="title" content="Загаловак старонкі">
  <meta name="description" content="Апісаньне зьместу старонкі.">
  <meta name="classification" content="Катэгорыя зьместу старонкі, напр., Internet">
  <meta name="keywords" content="ключавыя словы старонкі">
  <meta name="owner" content="Кампанія ўладальнік">
  <meta name="author" content="Аўтар дакумэнту1">
  <meta name="author" content="Аўтар дакумэнту2">
  <!-- As alternative to tag 'author' -->
  <meta name="creator" content="Аўтар дакумэнту1">
  <meta name="creator" content="Аўтар дакумэнту2">
  <meta name="publisher" content="Публікатар дакумэнту1">
  <meta name="publisher" content="Публікатар дакумэнту2">

  <meta name="copyright"
      content="Copyright © 2010 -Уладальнік правоў-, All Rights Reserved">
  <!-- As alternative to above -->
  <meta name="rights"
      content="Copyright © 2010 -Уладальнік правоў-, All Rights Reserved">
  <!-- More detailed information to above tag 'rights' -->
  <meta name="rights-standard" content=";copr2010">

  <meta name="rating" content="general">
  <meta name="audience" content="all">

  <!-- IF PAGE SHOULD NOT BE FOUND IF SEARCHED BY CERTAIN KEYWORDS. -->
  <meta name="robots" content="noindex,nofollow">

  <title>Загаловак старонкі</title>
</head>

<body>
  <a href="http://validator.w3.org/check/referer">Валідацыя</a>
</body>
</html>

Элемэнты HTML

Па тыпу зьместу

Каранёвы элемэнт

html

Элемэнты мэтаданых

base – базавы URL

head – кантэйнэр мэтаданых дакумэнту

link – мэтаданыя суадносінаў паміж дакумэнтамі

meta – мэтаданыя

style – інфармацыя аб стылі (прэзэнтацыйная інфармацыя)

title – загаловак дакумэнту

Разьметачныя элемэнты

У ангельскай тэрміналёгіі – flow elements (ці block elements, як іх называлі да HTML5). Выдзяляюць сэмантыку і структуру тэксту. Зь 5й вэрсіі фактычна ўсе элемэнты, якія зьмяшчаюцца ў body, можна аднесьці да гэтага тыпу. Уключаюць:

Тэкставыя элемэнты, address · article · aside · blockquote · details · div · dl · fieldset · figure · footer · form · h1, h2, h3, h4, h5, h6 · header · hr · menu · nav · ol · p · pre · section · table · ul

Тэкставыя элемэнты

У ангельскай тэрміналёгіі – phrasing elements (ці inline elements, як іх называлі да HTML5). Фактычна фарміруюць тэкст дакумэнту. Могуць зьмяшчаць унутры толькі таксама тэкставыя элемэнты. Уключаюць:

a · abbr · area · audio · b · bdi · bdo · br · button · canvas · cite · code · datalist · del · dfn · em · embed · i · iframe · img · input · ins · kbd · keygen · label · map · mark · menuitem · meter · noscript · object · output · progress · q · ruby · samp · script · select · small · span · strong · sub · sup · textarea · time · var · video · wbr

«Празрыстыя» элемэнты

У ангельскай тэрміналёгіі – transparent elements. Гэтыя элемэнты самі зьяўляюцца і дазваляюць зьмяшчаць унутры сябе як разьметачныя, гэтак і тэкставыя элемэнты, у залежнасьці ад таго, што дазваляюць зьмяшчаць у сабе іх бацькоўскія элемэнты.

Пустыя элемэнты

У ангельскай тэрміналёгіі – void elements. Элемэнты, якім не дазваляецца зьмяшчаць даччыныя элемэнты (аніякія). Уключаюць:

area · base · br · col · embed · hr · img · input · keygen · link · menuitem · meta · param · source · wbr

Элемэнты скрыптоў

noscript – фрагмэнт дакумэнту, які не апрацоўваецца скрыптом

script – убудаваны скрыпт

Сэкцыйныя элемэнты

address – кантактная інфармацыя аўтара дакумэнту (не прызначаны для пазначэньня агульных адрасоў, а менавіта кантактнай інфармацыі аўтара – напрыклад, электронны адрас ці тэлефон; для пазначэньня агульных адрасоў гл. Microformats)

article – асобны артыкул дакумэнту

aside – дадатковы зьмест, кшталту зносак ці найважнейшых вытрымак асноўнага тэксту

footer – footer

h1, h2, h3, h4, h5, h6 – загалоўкі розных узроўняў

header – загаловак

nav – група навігацыйных спасылак

section – асобная сэкцыя артыкулу

Элемэнты групаваньня зьместу

blockquote – блёк цытаваньня

br – разрыў радка

dd – апісаньне / значэньне

div – кантэйнэр агульнага прызначэньня

dl – сьпіс апісаньняў / значэньняў

dt – тэрмін / імя

figcaption – подпіс да выявы

figure – выява

hr – тэматычны разрыў

li – элемэнт сьпісу

ol – нумараваны сьпіс

p – параграф

pre – тэкст у прадвызначаным фармаце

ul – ненумараваны сьпіс

Элемэнты пазначэньня сэмантыкі

a – спасылка

abbr – абрэвіятура

b – фрагмэнт тлустага тэксту

bdi – фрагмэнт тэксту з магчымым іншым напрамкам

bdo – зьмена напрамку тэксту

cite – цытаваньне пэўнай назвы

code – фрагмэнт коду

dfn – вызначэньне тэрміну

em – фрагмэнт тэксту, падвышанага значэньня

i – фрагмэнт нахіленага тэксту

kbd – апісаньне клявіятурных скаротаў

mark – выдзелены фрагмэнт тэксту (звычайна колерам, а-ля маркер)

q – цытуемы фрагмэнт тэксту

rp – «дужкі» вакол ruby-тэксту ў ruby-анатацыі

rt – ruby-тэкст у ruby-анатацыі

ruby – ruby-анатацыя

samp – пазначэньне вываду ці выніку пэўнага працэсу

small – фрагмэнт тэксту зьменшанымі літарамі

span – фрагмэнт тэксту агульнага прызначэньня

strong – фрагмэнт тэксту, да якога павінна прыцягвацца асаблівая ўвага

sub – пад-радковы тэкст

sup – па-над-радковы тэкст

time – дата і/ці час

var – сэнсавая ці літаральная (у формуле) зьменная

Элемэнты пазначэньня рэдагаваньняў

del – выдалены тэкст

ins – устаўлены тэкст

Элемэнты ўбудаванага зьместу

area – спасылка на пэўную вобласьць выявы

audio – аўдыё-струмень (audio stream)

canvas – канва для дынамічнай графікі (canvas for dynamic graphics)

embed – убудаваньне не-HTML зьместу, праз плагіны (integration point for plugins)

iframe – убудаваны/укладзены фрэйм (nested browsing context, inline frame)

img – выява

map – мапа спасылак на выяве

object – зьнешні зьмест агульнага прызначэньня

param – парамэтры плагінаў

source – медыя-крыніца (media source)

video – відэа-струмень (video)

Элемэнты табліцаў

caption – загаловак табліцы

col – калёнка табліцы

colgroup – група калёнак

table – табліца

tbody – цела табліцы

td – ячэйка табліцы

tfoot – група радкоў у якасьці footer’а табліцы

th – ячэйка шапкі табліцы

thead – група радкоў у якасьці header’а табліцы

tr – радок табліцы

Элемэнты формаў

button – кнопка

datalist – прадвызначаныя опцыі для іншых элемэнтаў формы

fieldset – набор зьвязаных элемэнтаў формы

form – форма

input – элемэнт формы для ўводу тэксту

keygen – элемэнт формы уводу/генэрацыі пар ключоў (key-pair)

label – подпіс да элемэнту формы

legend – загаловак ці тлумачальны подпіс

meter – Скалярнае вымярэньне/значэньне ў пэўным дыяпазоне, ці фракцыйнае значэньне

optgroup – група опцыяў

option – опцыя

output – вынік калькуляцыі ў форме

progress – паказальнік прагрэсу пэўнага працэсу

select – элемэнт формы выбару опцыі

textarea – вобласьць уводу тэксту (шматрадковага)

Інтэрактыўныя элемэнты

details – элемэнт дадатковай інфармацыі, якая прадстаўляецца па запыту

menu – мэню камандаў

menuitem – каманда

summary – прадстаўляе summary, caption ці legend для details-элемэнту

Схемы элемэнтаў

Апісаньне элемэнтаў

`a`

Абгортвае тэкст ці выяву, альбо і то і іншае, і робіць з гэтага спасылку да іншай старонкі, альбо іншага разьдзелу дадзенай. Не дазваляецца выкарыстоўваць прагалы ў href. Калі выкарыстоўваецца не абсалютны шлях, тады ён інтэрпрэтуецца як адносны да base.

Атрыбуты

глябальныя
href – URL-спасылка, да якой перамясьціцца.
hreflang – мова старонкі, якую пазначае спасылка⁴.

media new – media, для якой створана старонка, пазначаная спасылкай. Калі атрыбут не прапісаны, выкарыстоўваецца значэньне па-змоўчваньні – "all".
rel – пазначае адносіны паміж цяперашняй старонкай і той, якую пазначае спасылка (адна ці болей фармулёвак, падзеленых прагаламі)⁵.

target changed – кантэкст агляданьня.
type – MIME-тып старонкі, пазначанай спасылкай⁶.

Прыклады


<!-- Спасылка на зьнешні рэсурс. -->
<a href="http://www.example.com">Зьнешні сайт</a>

<!-- Спасылка на старонку таго ж самага сайту. -->
<a href="home.html">Дадому</a>

<!-- Спасылка для спампаваньня (толькі ў HTML5). Значэньне, пазначанае ў атрыбуце "download",
     выкарыстоўваецца ў якасьці змоўчнага імені файла ў Save-дыялёгу.
     Калі апусьціць гэты атрыбут, будзе прапанавана тое ж імя, якое рэсурс мае на сэрвэры. -->
<a href="filename_on_server.pdf" download="meaningful_filename.pdf">Спампаваць PDF-файл</a>

<!-- Адкрыць спасылку ў новым акне. -->
<a href="http://www.example.com" target="_blank">Адкрыць старонку ў новым акне</a>

<!-- Выява як частка спасылкі. -->
<a href="http://www.example.com"><img src="images/bullet.png">A link with an image</a>

<!-- Спасылка на элемэнт той жа самай старонкі, па значэньні яго атрыбуту "id". -->
<a href="#top">Go to top</a>

<!-- Значэньні атрыбуту "rel" вызначаюць адносіны паміж цяперашняй старонкай і той, якую пазначае спасылка. -->
<a href="http://www.example.com/help" rel="help">Дапамога</a>
<a href="../toc.html" rel="index up">уверх</a>

`abbr`

Выкарыстоўваецца для пазначэньня абрэвіятуры ці акроніма. Расшыфроўка абрэвіятуры ці акроніма пазначаецца ў атрыбуце title (на старонцы расшыфроўка паказваецца ў якасьці падказкі да элемэнту).

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`address`

Выкарыстоўваецца для пазначэньня нейкай кантактнай інфармацыі аўтара дакумэнту. Не прызначаны для пазначэньня агульных адрасоў, але менавіта кантактнай інфармацыі аўтара – напрыклад, электроннай пошты ці тэлефону. Для пазначэньня адрасоў гл. Microformats. Ужываецца звычайна ў header ці footer.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`area`

Уяўляе зь сябе альбо тэкставую спасылку, зьвязаную з пэўнай вобласьцю на выяве, альбо «мёртвую» вобласьць на выяве. Ужываецца толькі як дзіцячы элемэнт элемэнту map. Зьяўляецца пустым элемэнтам.

Атрыбуты

глябальныя

alt – тэкст, які павінен адлюстравацца на месцы пазначанай вобласьці ў выпадку, калі выява яшчэ не загрузілася альбо недаступная. Абавязковы атрыбут, калі пазначаны атрыбут href.
download – гэты атрыбут, калі прысутнічае, пазначае, што спасылка прызначаная для спампоўваньня рэсурсу.
href – URL-спасылка, да якой перамясьціцца.
hreflang new – мова старонкі, якую пазначае спасылка⁷.

media new – media, для якой створана старонка, пазначаная спасылкай. Калі атрыбут не прапісаны, выкарыстоўваецца значэньне па-змоўчваньні – "all".
rel – пазначае адносіны паміж цяперашняй старонкай і той, якую пазначае спасылка (адна ці болей фармулёвак, падзеленых прагаламі)⁸.
target changed – кантэкст агляданьня.

type – MIME-тып старонкі, пазначанай спасылкай⁹.
shape="rect" і coords="каардынаты_прамакутніка" у наступнай пасьлядоўнасьці:
1. адлегласьць у піксэлях ад левага краю малюнка да левага краю вобласьці;
2. адлегласьць у піксэлях ад верхняга краю малюнка да верхняга краю вобласьці;
3. адлегласьць у піксэлях (больш, чым 1-ае значэньне) ад левага краю малюнка да правага краю вобласьці;
4. адлегласьць у піксэлях (больш, чым 2-ое значэньне) ад верхняга краю малюнка да ніжняга краю вобласьці.
shape="circle" і coords="каардынаты_круга" у наступнай пасьлядоўнасьці:
1. адлегласьць у піксэлях ад левага краю малюнка да цэнтру круглай вобласьці;
2. адлегласьць у піксэлях ад верхняга краю малюнка да цэнтру круглай вобласьці;
3. не нэгатыўны лік радыюсу круглай вобласьці.
shape="poly" і coords="каардынаты_шматкутніка" – падзеленыя коскамі мінімум 6 лічбаў (але цотная колькасьць лічбаў), кожная пара гэтых лічбаў уяўляе зь сябе каардынату адпаведнай кропкі шматкутніка – адлегласьць у піксэлях ад левага і верхняга краю выявы адпаведна.
shape="default" – пазначае, што прамакутная вобласьць спасылкі – гэта ўся выява.

Прыклад


<img src="planets.gif" width="145" height="126" alt="Планеты" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Сонца">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Мэркурый">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Вэнэра">
</map>

`article`

Прадстаўляе фрагмэнт зьместу, які ўяўляе зь сябе незалежную частку дакумэнту ці сайту. Напрыклад, артыкул часопіса, газэты, ці запіс блогу. Не можа быць даччыным элемэнтам элемэнту address.

Атрыбуты

глябальныя

Прыклад


<article class="review">
  <header>
    <h2>Парк юрскага пэрыяду</h2>
  </header>
  <section class="main_review">
    <p>Дыназаўры былі ашаламляльныя!</p>
  </section>
  <section class="user_review">
    <p>Але было застрашна для мяне.</p>
  </section>
  <footer>
    <p>Апублікавана <time datetime="2015-05-20 20:00">20 траўня</time> штатам.</p>
  </footer>
</article>

`aside`

Прадстаўляе фрагмэнт дадатку да асноўнага тэксту дакумэнту ці сайту. Напрыклад, зноскі, анатацыі і падобнае. Не можа быць даччыным элемэнтам элемэнту address.

Атрыбуты

глябальныя

Прыклад


<article>
  <p>Гэтым летам мы з сям'ёй наведалі Зальцбург.</p>
  <aside>
    <h4>Зальцбург</h4>
    <p>Зальцбург – горад у Аўстрыі, у якім нарадзіўся і жыў Моцарт.</p>
  </aside>
</article>

`audio`

Прадстаўляе аўдыё-струмень. У выпадку, калі ў элемэнце ўжываецца атрыбут controls, ён ня можа быць даччыным элемэнтам элемэнтаў a і button. Празрысты элемэнт. Трэба ўжываць альбо атрыбут src, альбо даччыныя source-элемэнты (павінны ісьці першымі сярод даччыных элемэнтаў).

Атрыбуты

глябальныя
autoplay – кажа агенту пачынаць прайграваць аўдыё адразу ж, як гэта стане магчымым (атрыбут без значэньня).
controls – кажа агенту, каб той паказаў элемэнты кіраваньня прайграваньнем (атрыбут без значэньня).
loop – кажа агенту пачаць прайграваньне ізноў пасьля дасягненьня канцу струменя (атрыбут без значэньня).
muted – кажа агенту, што гук аўдыё-струменю павінен быць першапачаткова сьцішаны (атрыбут без значэньня).
preload – кажа агенту ці ўжываць "аптымістычнае пампаваньне" струменю альбо мэтаданых (адразу пачынаць кэшаваць даныя, нават калі карыстальнік яшчэ не ціснуў на старт). Значэньні:
- "none" – карыстальніку можа не спатрэбіцца аўдыё, мінімізацыя ўжыванага трафіку;
- "metadata" – карыстальніку можа не спатрэбіцца аўдыё, аднак папярэдняя загрузка мэтаданых (працягласьць аўдыё і інш.) пажаданая;
- "auto" ці "" ці ўвогуле без значэньня – пажадана адразу пачаць кэшаваць увесь струмень.
src – URL крыніцы аўдыё-струменю.

Прыклад


<!-- Простае прайграваньне -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Ваш браўзэр не падтрымлівае <code>audio</code> элемэнт.
</audio>

<!-- Прайграваньне з подпісамі -->
<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

<!-- Выкарыстаньне даччыных source-элемэнтаў -->
<audio controls="controls">
  Ваш браўзэр не падтрымлівае <code>audio</code> элемэнт.
  <source src="foo.wav" type="audio/wav">
  <source src="foo.mp3" type="audio/mpeg">
</audio>

`b`

Элемэнт сэмантычна пазначае фрагмэнт тэксту, для якога прынятае друкарскае прадстаўленьне – тлусты шрыфт, але які не адрозьніваецца ад асноўнага тэксту па значэньні. Напрыклад, ключавыя словы у рэзюмэ дакумэнту, ці назва тавару ў дакумэнце-аглядзе гэтага тавару.

Атрыбуты

глябальныя

`base`

Мэта-элемэнт, які можа ўжывацца толькі ў загалоўку дакумэнту (элемэнт head) і вызначае базавы URL для адносных спасылак усяго дакумэнту. У ім не дазваляецца ўжываць даччыныя элемэнты. Дазваляецца пазначаць толькі адзін элемэнт base ў дакумэнце.

Атрыбуты

глябальныя
href – базавы URL.
target – імя змоўчнага кантэксту агляданьня, які будзе ўжыты, калі не пазначаны непасрэдна ў самой спасылцы.

`bdi`

Элемэнт пазначае фрагмэнт тэксту, напрамак якога можа адрозьнівацца ад напрамку тэксту, у якім ён утрымліваецца. Напрыклад, імёны карыстальнікаў у блёку камэнтароў. Аўтар дакумэнту не можа прадбачыць, што будзе ўведзена карыстальнікам у якасьці яго імені, і калі гэта будзе напрылад араб, альбо габрэй, то напрамак уведзенага ім тэксту (імені) можа адрозьнівацца да напрамку не-арабскага(-габрэйскага) тэксту.

Атрыбуты

глябальныя

Прыклад


<ul>
  <li>Карыстальнік <bdi>алесь</bdi>: 60 балаў</li>
  <li>Карыстальнік <bdi>mike</bdi>: 80 балаў</li>
  <li>Карыстальнік <bdi>إيان</bdi>: 90 балаў</li>
</ul>

`bdo`

Элемэнт ужываецца для зьмены напрамку тэксту ў bidirectional (абрэвіятура bdo) альгарытмы Unicode. Маецца на ўвазе, што напрамак усяго тэксту адзін, а для пэўнага фрагмэнту яго трэба зьмяніць – напрыклад, габрэйскі тэкст у ангельскім дакумэнце. Ужываецца звычайна з пазначэньнем атрыбутаў dir і lang, прычым першы зь іх – абавязковы.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`blockquote`

Элемэнт абрамляе фрагмэнт тэксту – цытаты. Гэта менавіта блёчная цытата, якая прыводзіцца асобным(і) параграфам(і), а не фразай у асноўным тэксьце (як элемэнт q).

Атрыбуты

глябальныя
cite – URL крыніцы, адкуль узятая цытата.

Прыклад


<blockquote cite="http://developer.mozilla.org">
  <p>Вытрымка ўзята з Mozilla Developer Center.</p>
</blockquote>

`body`

Элемэнт абрамляе цела дакумэнту, як проціпастаўленьне мэтаданым дакумэнту (head).

Атрыбуты

глябальныя

Прыклад


<html>
  <head>
    <title>Загаловак дакумэнту</title>
  </head>

  <body>
    Зьмест дакумэнту...
  </body>
</html>

`br`

Разрыў/перанос радка. Не павінен ужывацца ў прэзэнтацыйных мэтах. Фактычна адзіныя дапушчальныя выпадкі яго ўжываньня – гэта вершы і адрасы, калі разрыў радка павінен сустракацца ў строга вызначаным месцы тэксту. Пусты элемэнт.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`button`

Элемэнт для прадстаўленьня клікальных кнопак, звычайна на форме. Не можа зьяўляцца даччыным элемэнтам элемэнтаў a і іншых button.

Атрыбуты

глябальныя
autofocus new – кажа агенту, каб ён перадаў элемэнту фокус як толькі дакумэнт будзе загружаны (атрыбут без значэньня).
disabled – кажа агенту, што кнопка павінна быць не актыўна (атрыбут без значэньня).
form new – значэньне атрыбуту id формы, зь якой зьвязана кнопка. Наяўнасьць гэтага атрыбуту дазваляе герархічна зьмяшчаць кнопкі не ў саміх формах, а ў адвольным месцы старонкі. Пры гэтым падзея націсканьня на кнопку аўтаматычна накіруецца да адпаведнай формы.
name – імя гэтага элемэнту, з пары імя/значэньне, якімі апэрыруе форма.
type – пазначае тып кнопкі. Магчымыя значэньні:
- "submit"
- "reset"
- "button"
Калі гэты атрыбут не пазначаны, па-змоўчваньні ужываецца тып "submit".
value – значэньне элемэнту, з пары імя/значэньне, якімі апэрыруе форма

Прыклад


<button type="button">Націсьні мяне!</button>

`button type="submit"`

Змоўчны тып кнопкі, выкарыстоўваецца для адсылцы (submit) формы.

Атрыбуты

У дадатак да атрыбутаў апісаных у button:

formaction new – URL, па катораму будзе дасланая адпаведная форма.
formenctype new – MIME-тып, зь якім агент павінен даслаць адпаведную форму. Значэньні:
- "application/x-www-form-urlencoded"
- "multipart/form-data"
- "text/plain"
formmethod new – HTTP-мэтад, які павінен ужыць агент пры адсылцы адпаведнай формы. Значэньні:
- "get"
- "post"
- "put"
- "delete"
formnovalidate new – кажа агенту, што адпаведная форма не павінна правярацца (be validated) на правільнасьць уведзеных даных (атрыбут без значэньня).
formtarget new – кантэкст агляданьня.
type="submit" – кажа аб тым, што гэта кнопка менавіта для адсылцы формы.

`button type="reset"`

Кнопка прызначаная для таго, каб скінуць значэньні палёў формы ў змоўчныя значэньні.

Атрыбуты

Ужываюцца толькі атрыбуты, пазначаныя ў разьдзеле button:

`button type="button"`

Кнопка агульнага прызначэньня, бяз пэўнай сэмантыкі і звычайна не на форме, а ў адвольным месцы старонкі для актывацыі нейкіх дзеяў.

Атрыбуты

Ужываюцца толькі атрыбуты, пазначаныя ў разьдзеле button:

`canvas`

Элемэнт для прадстаўленьня resolution-dependent растравай канвы, якая можа ужывацца для дынамічнага маляваньня графікаў, гульняў ці выяваў для іншых мэтаў у рэжыме рэальнага часу. Больш падрабязна глядзі адпаведны разьдзел.

Атрыбуты

глябальныя
height – вышыня канвы.
width – шырыня канвы.

Прыклад


<canvas id="canvas" width="300" height="300">
  Нажаль ваш браўзэр не падтрымлівае canvas-элемэнт.
</canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);
</script>

`caption`

Ужываецца для пазначэньня загалоўку ці подпісу да table. Павінен быць адзіным даччыным caption-элемэнтам у табліцы і ісьці першым з усіх іншых даччыных элемэнтаў гэтай табліцы.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`cite`

Элемэнт сэмантычна пазначае фрагмэнт тэксту, які зьяўляецца назвай пэўнага твору – літаратурнага, музычнага, тэлевізійнага ці якога іншага. Ня блытаць з i і em, якія таксама робяць фрагмэнт тэксту па-змоўчваньні нахіленым, але прызначаны для іншых мэтаў. Таксама ня блытаць з q, які таксама цытуе, але не назву, а фразу/гутарку.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`code`

Элемэнт сэмантычна пазначае фрагмэнт тэксту, які зьяўляецца пэўным кампутэрным кодам – HTML, Java, JavaScript, Perl, запыт да базы, імя файла і г.д. Часта выкарыстоўваецца ў спалучэньні з элемэнтам pre.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`col`

Элемэнт для вызначэньня характарыстык адной ці некалькіх калёнак у colgroup. Апошні зьяўляецца адзіным магчымым бацькоўскім элемэнтам.

Атрыбуты

глябальныя
span – лічба, пазначае колькі калёнак аб'ядноўвае гэты элемэнт.

`colgroup`

Элемэнт зьяўляецца кантэйнэрам групы калёнак (элемэнтаў col) табліцы. Гэта групаваньне віртуальнае, патрэбнае толькі для таго, каб у адным месцы пазначыць атрыбуты, характэрныя для ўсіх калёнак групы. Бацькоўскім элемэнтам можа быць толькі табліца, даччынымі – col.

Атрыбуты

глябальныя
span – колькасьць калёнак у групе.

Прыклад

Прыклад на jsbin.com

`datalist`

Элемэнт уключае ў сябе шэраг option-элемэнтаў, якія прызначаны для фармаваньня сьпісу опцыяў для іншых элемэнтаў. У якасьці даччыных элемэнтаў дазваляюцца толькі option-элемэнты. Зьмест гэтага элемэнту схаваны і не адлюстроўваецца непасрэдна на старонцы.

Зьмест элемэнту datalist ня будзе непасрэдна адлюстраваны, але зьяўляецца «прапановай» для элемэнту input, які яму папярэднічае ў дакумэнце.

Атрыбуты

глябальныя

Прыклад

(Зьмясьціце курсор у тэкставае поле «Enter a breed» і націсьніце кнопку «уніз»):

Прыклад на jsbin.com

`dd`

Элемэнт прадстаўляе апісаньне ці значэньне тэрміну, які быў пазначаны вышэй элемэнтам dt. Бацькоўскім элемэнтам можа быць толькі dl.

Атрыбуты

глябальныя

Прыклад


<dl>
  <dt>Spam</dt>
  <dd>unsolicited email sent in the hope of increasing sales of some product</dd>
  <dd>a brand name for tinned meat comprising pork and ham</dd>
</dl>

`del`

Пазначае фрагмэнт тэксту, які першапачаткова прысутнічаў у дакумэнце, але пазьней быў выдалены аўтарам. Адлюстроўваецца такі фрагмэнт ў выглядзе закрэсьленага тэксту. Выкарыстоўваецца ў спалучэньні з элемэнтам ins.

Атрыбуты

глябальныя
cite – URL-спасылка на дакумэнт, які тлумачыць чаму фрагмэнт быў выдалены.
datetime – дата і/ці час¹⁰, калі фрагмэнт быў выдалены.

Прыклад

Прыклад на jsbin.com

`details`

Элемэнт уключае ў сябе тэкст і/ці элемэнты, якія трэба паказваць альбо хаваць па неабходнасьці – кшталту Show/Hide Details. Ня можа быць даччыным элемэнтам элемэнтаў a і button.

Атрыбуты

глябальныя
open – кажа агенту, што зьмест элемэнту першапачаткова павінен быць адлюстраваным, а не схаваным (атрыбут без значэньня).

Прыклад

Прыклад на jsbin.com

`dfn`

Пазначае першае зьмяшчэньне ў тэксьце пэўнага тэрміну (навуковага, жаргоннага выразу ці інш.). Мяркуецца, што наступным будзе ісьці вызначэньне гэтага тэрміну. Калі элемэнт мае атрыбут title, тады значэньне гэтага атрыбуту – гэта і ёсьць тэрмін. Інакш, калі элемэнт утрымлівае толькі даччыны элемэнт abbr і гэты элемэнт мае атрыбут title, тады значэньне гэтага title-атрыбуту – і ёсьць тэрмін. У астатніх выпадках значэньнем тэрміну зьяўляецца тэкст, які зьмяшчаецца ўнутры гэтага элемэнту dfn.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`div`

Кантэйнер разьметачнага ўзроўню агульнага прызначэньня. Яго рэкамэндуецца ўжываць толькі ў тым выпадку, калі больш «вузкія» сэкцыйныя элемэнты ня могуць быць ужытыя. Каб дадаць больш сэмантыкі, звычайна ужываюцца такія атрыбуты, як class, lang, xml:lang і title.

Атрыбуты

глябальныя

`dl`

Сьпіс азначэньняў (ад description/definition list). Гэта сьпіс з 0 ці больш групаў, кожная зь якіх складаецца з аднаго ці болей элемэнтаў dt, за якімі ідзе адзін ці болей элемэнтаў dd.

Атрыбуты

глябальныя

Прыклад


<dl>
  <dt>Spam</dt>
  <dd>unsolicited email sent in the hope of increasing sales of some
      product, or simply for the purposes of annoying people
    <dl>
      <dt>Spammer</dt>
      <dd>someone who sends out spam email and therefore deserves to
          develop a nasty incurable disease of some kind</dd>
      <dt>Spam Filter</dt>
      <dd>a tool used in email to 'filter out' likely spam messages,
          usually placing them in a dedicated junk messages folder
          or similar</dd>
    </dl>
  </dd>
</dl>

`dt`

Элемэнт прадстаўляе тэрмін, якому будзе дадзена азначэньне ніжэй элемэнтам dd. Бацькоўскім элемэнтам можа быць толькі dl.

Атрыбуты

глябальныя

Прыклад


<dl>
  <dt>Sofa</dt>
  <dt>Settee</dt>
  <dd>a long upholstered seat with a back and arms, for two or more people</dd>
  ⋮
</dl>

`em`

Пазначае фрагмэнт тэксту, на які трэба зьвярнуць большую ўвагу ў параўнаньні да астатняга тэксту. Трэба ведаць, што элемэнт (як і ўсе астатнія па стандарту) не вызначае стыль, але толькі кажа аб сэнсе элемэнту – больш важны фрагмэнт тэксту, хаця ўва ўсіх браўзэрах па-змоўчваньні ён і будзе адлюстраваны нахіленым шрыфтам. Для пазначэньня тэксту нахіленым шрыфтам, які не валодае такой сэмантыкай, трэба карыстацца альбо элемэнтамі i і cite, калі яны пасуюць, альбо іншым сэмантычна пасуючым элемэнтам і карыстацца сродкамі CSS для наданьня нахіленасьці шрыфту.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`embed`

Ўжываецца для ўбудаваньня не-HTML зьместу, для адлюстраваньня якога звычайна патрабуюцца дадаткі – напр., такі мэдыя-зьмест, як флэш і відэа.

Атрыбуты

глябальныя
height – вышыня ўбудаванага зьместу ў піксэлях.
src – URL-спасылка на зьмест.
type – MIME-тып¹¹ зьместу.
width – шырыня ўбудаванага зьместу ў піксэлях.

Прыклад


<embed type="video/quicktime" src="movie.mov" width="640" height="480">

`fieldset`

Уяўляе зь сябе кантэйнэр элемэнтаў формы, што згрупаваныя па пэўнай прыкмеце. Добрым стылем зьяўляецца выкарыстаньне даччынага элемэнту legend, які павінен ісьці першым з даччыных элемэнтаў, калі прысутнічае, і ўяўляе зь сябе подпіс у рамцы вакол элемэнтаў, у верхнім левым яе куце.

Атрыбуты

глябальныя
disabled – кажа агенту, што кантэйнэр не актыўны (атрыбут без значэньня).
form new – значэньне id-атрыбута формы, да якой адносіцца гэты кантэйнэр.
name – імя кантэйнэру.

Прыклад

Прыклад на jsbin.com

`figcaption`

Подпіс да элемэнту figure, можа ўжывацца толькі як даччыны элемэнт гэтага элемэнту.

Атрыбуты

глябальныя

`figure`

Самастойны, незалежны элемэнт дакумэнту, які можа быць прыбраны адтуль без уплыву на сэнс дакумэнту. Ужываецца для ілюстрацыі пэўнай думкі – у выглядзе выявы, альбо прыкладу коду, альбо яшчэ чаго іншага. Звычайна ўжываецца ў спалучэньні з даччыным элемэнтам figcaption, які павінен ісьці ці самым першым, ці самым апошнім даччыным элемэнтам.

Атрыбуты

глябальныя

Прыклады

Прыклад на jsbin.com

ці:


<figure>
  <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently.">
  <figcaption>Bubbles at work</figcaption>
</figure>

`footer`

Прадстаўляе footer пэўнага блёку інфармацыі альбо section-элемэнту, у якім ужываецца, – інфармацыя аб аўтарстве, капірайт, зьвязаныя спасылкі ці інш. Ня можа ўжывацца як даччыны элемэнт элемэнтаў: address, footer, header.

Атрыбуты

глябальныя

`form`

Прадстаўляе форму, якую карыстальнік можа запоўніць і адаслаць.

Атрыбуты

глябальныя
accept-charset – сьпіс кадовак¹², прымальных для ўжываньня ў форме. Павінны быць ASCII-сумяшчальнымі.
action – URL, на які будзе дасланая форма.
autocomplete – адзначае ці робіць форма прадзапаўненьне – гэта калі агент запамінае значэньні, якія карыстальнік увёў у палі input, і прадзапаўняе іх наступны раз, калі форма будзе адчынена.
enctype – MIME-тып, зь якім агент павінен даслаць форму. Магчымыя значэньні:
- "application/x-www-form-urlencoded"
- "multipart/form-data"
- "text/plain"
method – HTTP-мэтад, які павінен ужыць агент пры адсылцы формы. Магчымыя значэньні:
- "get"
- "post"
- "put"
- "delete"
novalidate new – кажа агенту, што форма не павінна правярацца (be validated) на правільнасьць уведзеных даных перад дасылкай (атрыбут без значэньня).
target – кантэкст агляданьня.

Прыклад


<form action="http://www.google.com/search" method="get">
  <label>Google: <input type="search" name="q"></label>
  <input type="submit" value="Search...">
</form>
<form action="http://www.bing.com/search" method="get">
  <label>Bing: <input type="search" name="q"></label>
  <input type="submit" value="Search...">
</form>

`h1, h2, h3, h4, h5, h6`

Загалоўкі розных узроўняў адпаведных сэкцыяў. Ня могуць быць даччынымі элемэнтамі ў address.

Атрыбуты

глябальныя

`head`

Кантэйнэр мэтаданых дакумэнту. Можа быць даччыным элемэнтам толькі элемэнту html. Утрымлівае адзін неабходны элемэнт title, а таксама любую колькасьць магчымых элемэнтаў base, link, meta, noscript, script, style.

Дапаможнік: A free guide to <head> elements

Атрыбуты

глябальныя

`header`

Прадстаўляе загаловак сэкцыі (section) дакумэнту, у якім звычайна зьмяшчаюцца – элемэнты h1, h2, h3, h4, h5, h6, а таксама магчымыя тэкставыя ўводзіны ў сэкцыю і дадатковая навігацыя па сэкцыі. Ня можа ўжывацца як даччыны элемэнт элемэнтаў: address, footer, header.

Атрыбуты

глябальныя

`hr`

Прадстаўляе сабой тэматычны разрыў у тэксьце, дзе па пэўным прычынам не пасуе загаловак. Пусты элемэнт.

Атрыбуты

глябальныя

`html`

Карнявы элемэнт усяго дакумэнту. Утрымлівае 1 элемэнт head, і 1 элемэнт body.

Атрыбуты

глябальныя
manifest new – URL-спасылка на маніфэст кэшу сеціўнай праграмы¹³


<!DOCTYPE html>
<html lang="be-BY">
  <head>
    <meta charset="utf-8" />
    <title>Прыклад старонкі</title>
  </head>
  <body>
    <h1>Прывітаньне, сьвет!</h1>
    <p>
      Гэта прыклад старонкі HTML.
    </p>
  </body>
</html>

`i`

Абрамляе тэкст, які выдзяляецца ад астатняга тэксту, але бяз пэўнага сэнсавага націску (як у выпадку em), які звычайна з друкарскага пункту гледжаньня адлюстроўваецца нахіленым шрыфтам – напрыклад, тэкст на іншай мове, тэхнічны тэрмін, ідыяматычны выраз, назва караблю ці інш. кшталту гэтага. Ня блытаць з cite.

Атрыбуты

глябальныя

Прыклад


<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

<p>The term <i>prose content</i> is defined above.</p>

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

`iframe`

Убудаваны/укладзены фрэйм, у які можа незалежна (ад асноўнай старонкі) запампоўвацца зьнешні зьмест.

Атрыбуты

глябальныя
height – вышыня фрэйму ў піксэлях.
name – імя кантэксту агляданьня, які асацыюецца з гэтым фрэймам.
sandbox=<магчымы сьпіс дазваляльных ключавых словаў> new – кажа агенту абмежаваць магчымасьці фрэйму. Калі атрыбут зьмешчаны сам па сабе, то бок без значэньняў (ключавых словаў) ці з пустым значэньнем, фрэйм максымальна абмежаваны, то бок забароненыя: скрыпты, дадаткі, формы, пераключэньне ў іншыя паўнавартасныя ці ўсплываючыя вокны; а таксама «same-origin treatment of the content hosted by the iframe and the content which hosts the iframe is disallowed/disabled; the iframe is instead treated as being from a unique origin» (то бок не дазваляецца пасьля загрузкі камунікаваць з сайтам-крыніцай фрэйма, нешта кшталту гэтага). Дазваляльныя ключавыя словы пасьля поўнага абмежаваньня функцыянальнасьці могуць ізноў уключыць нейкія з заблякаваных магчымасьцяў:
- allow-forms – разблякіруе забарону на ўжываньне формаў;
- allow-scripts – разблякіруе забарону на ўжываньне скрыптоў;
- allow-top-navigation – разблякіруе забарону на пераключэньне ў іншыя вокны, у тым ліку ўсплываючыя;
- allow-same-origin – разблякіруе забарону на кантактаваньне з арыгінальнай крыніцай;
seamless new – кажа агенту, каб зьмест фрэйма быў «незаўважна» адлюстраваны ў зыходным дакумэнце, быццам гэта яго родны зьмест.
src – URL-спасылка дакумэнту, які трэба адлюстраваць у фрэйме.
width – шырыня фрэйму ў піксэлях.

`img`

Элемэнт для зьмяшчэньня выяваў у дакумэнце. Пусты элемэнт.

Атрыбуты

глябальныя
alt – альтэрнатыўны (alt – ад ангельскага alternative) тэкст, які паказваецца замест выявы, калі яна ня можа ўвогуле адлюстравацца, ці пакуль яшчэ не адлюстравалася¹⁴.
height – вышыня выявы ў піксэлях.

¹⁵ Правільная хэш-імя спасылка да элемэнту пэўнага тыпу – гэта чарада, якая пачынаецца з сымбалю "#", за якім ідзе чарада, якая дакладна супадае са значэньне атрыбуту name элемэнту гэтага тыпу.

ismap – кажа агенту, што элемэнт прадстаўляе доступ да мапы выяваў.
usemap – хэш-імя спасылка¹⁵ да map-элемэнту.
src – URL-спасылка да выявы.
width – шырыня выявы ў піксэлях.

Прыклад


<img src="giant-prawn.jpg" title="The Giant Prawn at Ballina" alt="The Giant Prawn at Ballina"/>

Парады па выкарыстаньні атрыбуту `alt`

Калі іншае не пазначана, кожная выява павінна ўтрымліваць атрыбут alt. Якім жа мусіць быць яго значэньне залежыць ад кантэксту, у якім выява выкарыстоўваецца. Найбольш агульнае правіла такое: калі замяніць кожную выяву яе альтэрнатыўным тэкстам, сэнс дакумэнту не павінен сказіцца. Пры гэтым альтэрнатыўны тэкст – гэта ня подпіс (caption) і не падказка (tooltip) да выявы, але гэта тэкст, якім выява можа быць замененая. Яшчэ адна парада заключаецца ў тым, што альтэрнатыўны тэкст не павінен паўтараць/дубляваць інфармацыю, якая ўжо пададзеная ў тэксьце вакол выявы.

Навошта ўвогуле патрэбны гэты альтэрнатыўны тэкст? Ёсьць 2 асноўныя мэты. Адна зь іх – паказаць нешта зьмястоўнае на месцы выявы, калі яна пакуль што (маруднае злучэньне з сецівам), альбо ўвогуле (няправільная спасылка) ня можа загрузіцца. Іншая мэта альтэрнатыўнага тэксту, можа нават больш значная – гэта дапамога людзям з абмежаванымі здольнасьцямі (напрыклад, невідучым). Гэтыя людзі не чытаюць інфармацыю на старонцы вачыма, але слухаюць тое, што ім агучваюць дапаможныя праграмы. Дапаможныя праграмы ня могуць перадаць голасам выяву, але могуць прачытаць альтэрнатыўны тэкст.

У якасьці падказкі разглядзім некалькі прыкладаў, у кожным з якіх выкарыстоўваецца адна і тая ж выява, але alt-тэкст адрозьніваецца, адпаведна кантэксту. Выява ўяўляе зь сябе герб гораду Carouge кантону Geneva у Швэйцарыі.


<!-- Калі выява толькі дапаўняе асноўны тэкст, alt варта пакідаць пустым: -->
<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
</code></pre>
<pre><code class="language-html">
<!-- Тут выява замяняе сабой назву горада,
     таму ў alt трэба зьмясьціць толькі гэтую назву: -->
<p>Home town: <img src="carouge.svg" alt="Carouge" title="Carouge"></p>


<!-- А ў дадзеным выпадку выява замяняецца цэлым апісальным сказам: -->
<p>He picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>He stared at the folder. S! The answer he had been looking for all
this time was simply the letter S! How had he not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Marco had stuck his tongue out...</p>


<!-- Тут на момант складаньня дакумэнту было невядома,
     што будзе за выява, таму альтэрнатыўны тэкст увогуле не зьмяшчаецца: -->
<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

Яшчэ некалькі прыкладаў рознага замяшчальнага тэксту для адной і той жа выявы:


<!-- Here are some more examples showing the same picture used in different contexts,
with different appropriate alternate texts each time. -->
<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
    what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
    photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
    immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>He would play in the morning, he would play in the evening.</p>
</article>

Выпадак спасылак ці кнопак, якія ўтрымліваюць толькі выяву:


<!-- У дадзеным прыкладзе карыстальнік мае выбраць пажаданы колер з трох магчымых.
     Кожны колер прадстаўлены выявай, але калі карыстальнік так наладзіў браўзэр,
     каб той не загружаў выявы, карыстальнік пабачыць тэкставае абазначэньне колераў: -->
<h1>Pick your color</h1>
<ul>
  <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
  <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
  <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>


<!-- У гэтым прыкладзе кожная кнопка мае набор выяваў, каб пазначыць
     пажаданую для карыстальніка каляровую схему. Магчыма, зьмясьціць
     альтэрнатыўны тэкст у першай з трох выяваў будзе найлепшым рашэньнем.
     Заўважце таксама, што асобныя літары абрэвіятураў у атрыбуце alt
     трэба падзяляць прагаламі, каб дапаможныя праграмы правільна іх прачыталі -->
<button name="rgb"><img src="red" alt="R G B"><img src="green" alt="">
    <img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="C M Y K"><img src="magenta" alt="">
    <img src="yellow" alt=""><img src="black" alt=""></button>

Падрабязнае тэкставае апісаньне ў выпадках дыяграмаў і графікаў:


<!-- In the following example we have a flowchart in image form, with text in the alt
     attribute rephrasing the flowchart in prose form: -->
<p>In the common case, the data handled by the tokenization stage
    comes from the network, but it can also come from script.
</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png"
    alt="The network passes data to the Tokenizer stage, which passes data to the Tree
        Construction stage. From there, data goes to both the DOM and to
        Script Execution. Script Execution is linked to the DOM, and, using
        document.write(), passes data to the Tokenizer.">
</p>

Групы выяваў, якія складаюць адну вялікую выяву:


<!-- У наступным прыкладзе рэйтынг паказаны як тры замалёваныя зоркі і дзьве контурныя.
    Хаця альтэрнатыўным тэкстам мог быць "★★★☆☆",
    аўтар замест гэтага вырашыў падабраць больш зразумелы тэкст: "тры з пяці",
    які быў зьмешчаны ў першвай выяве, а ў астатніх выявах альтэрнатыўны тэкст
    быў пакінуты пустым. -->
<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
    ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
    ><img src="0" alt=""></meter></p>

`input`

Поле ўводу даных на форме. Ня можа быць даччыным элемэнтам элемэнтаў a і button.

Агульныя атрыбуты

Атрыбуты, якія характэрны ўсім палям, незалежна ад іх тыпу:

глябальныя
autofocus new – кажа агенту, што на поле неабходна зьмясьціць фокус як толькі дакумэнт будзе цалкам загружаны (атрыбут без значэньня). Ужываецца да ўсіх палёў акрамя поля тыпу "hidden".
disabled – кажа агенту, што поле не актыўнае, карыстальніку нельга дазваляць туды нешта ўводзіць (атрыбут без значэньня).
form new – значэньне атрыбуту id формы, зь якой зьвязанае поле. Наяўнасьць гэтага атрыбуту дазваляе герархічна зьмяшчаць элемэнты ўводу даных не ў саміх формах, а ў адвольным месцы старонкі.
name – імя гэтага поля, з пары імя/значэньне, якімі апэрыруе форма.
type – пазначае тып поля. Магчымыя значэньні:
- "button"
- "checkbox"
- "color"
- "date"
- "datetime"
- "datetime-local"
- "email"
- "file"
- "hidden"
- "image"
- "month"
- "number"
- "password"
- "radio"
- "range"
- "reset"
- "search"
- "submit"
- "tel"
- "text"
- "time"
- "url"
- "week"
Калі гэты атрыбут не пазначаны, па-змоўчваньні ужываецца тып "text".
value – значэньне поля, з пары імя/значэньне, якімі апэрыруе форма. Ужываецца да ўсіх палёў акрамя поля тыпу "file".

Атрыбуты тэкставых палёў

Сьпіс атрыбутаў, якія характэрны толькі для тэкставых палёў (тыпу "text", password), у дадатак да агульных:

autocomplete new – кажа агенту, што ён павінен захоўваць уведзенае карыстальнікам у гэтае поле значэньне, каб у наступны раз перадзапоўніць яго гэтым значэньнем. Магчымыя значэньні:
- "on" (опцыя ўключана)
- "off" (опцыя выключана)
list new – значэньне атрыбуту id элемэнту datalist, зь якім зьвязанае поле.
maxlength – не адмоўны лік, які вызначае максымальна магчымую даўжыню значэньня поля.
pattern new – вызначае рэгулярны выраз, якім будзе правярацца ўведзенае карыстальнікам значэньне.
placeholder new – вызначае кароткую падказку, якая прызначана дапамагчы карыстальніку з уводам даных у гэтае поле (звычайна паказваецца ў полі шэрым колерам пакуль карыстальнік не пачне ўводзіць нешта ў поле).
readonly – кажа агенту, што поле прызначанае толькі для адлюстраваньня даных, а не для рэдагаваньня (атрыбут без значэньня).
required new – кажа агенту, што поле абавязковае да запаўненьня (атрыбут без значэньня).
size – пазытыўны лік, які вызначае даўжыню самога поля па колькасьці сымбаляў, якія павінны быць бачнымі.

Атрыбуты лікавых палёў

Сьпіс атрыбутаў, якія характэрны толькі для лікавых палёў (тыпу "date", "datetime", "datetime-local", "month", "number", "range", "time", "week"), у дадатак да агульных:

autocomplete new – кажа агенту, што ён павінен захоўваць уведзенае карыстальнікам у гэтае поле значэньне, каб у наступны раз перадзапоўніць яго гэтым значэньнем. Магчымыя значэньні:
- "on" (опцыя ўключана)
- "off" (опцыя выключана)
list new – значэньне атрыбуту id элемэнту datalist, зь якім зьвязанае поле.
max new – верхняя мяжа значэньняў, якія дазваляецца прымаць гэтаму полю.
min new – ніжняя мяжа значэньняў, якія дазваляецца прымаць гэтаму полю.
readonly – кажа агенту, што поле прызначанае толькі для адлюстраваньня даных, а не для рэдагаваньня (атрыбут без значэньня).
required new – кажа агенту, што поле абавязковае да запаўненьня (атрыбут без значэньня).
step new – вызначае крок значэньняў. Можа прымаць пазытыўныя цэлыя альбо рэчаісныя значэньні (глядзі вызначэньне адпаведнага элемэнту) альбо адмысловае значэньне any (то бок любы).

`input type="button"`

Кнопка формы агульнага прызначэньня (глядзі таксама элемэнт button).

Атрыбуты

Ужываюцца толькі агульныя атрыбуты.

Прыклад

See the Pen MKYMNy by Dzmitry Yurtsevich (@yurtsevich) on CodePen.

`input type="checkbox"`

Поле checkbox (поле з набору множнага выбару).

Атрыбуты

У дадатак да агульных атрыбутаў ужываюцца яшчэ:

checked – вызначае, што поле выбранае (атрыбут без значэньня).
required new – кажа агенту, што поле абавязковае да запаўненьня (атрыбут без значэньня).

Прыклад

Прыклад на jsbin.com

`input type="color"`

Поле выбару колеру.

Атрыбуты

У дадатак да агульных атрыбутаў ужываюцца яшчэ:

autocomplete new – кажа агенту, што ён павінен захоўваць уведзенае карыстальнікам у гэтае поле значэньне, каб у наступны раз перадзапоўніць яго гэтым значэньнем. Магчымыя значэньні:
- "on" (опцыя ўключана)
- "off" (опцыя выключана)
list new – значэньне атрыбуту id элемэнту datalist, зь якім зьвязанае поле.

Прыклад


<input type="color" value="#ff0000" />

Прыклад на jsbin.com

`input type="date"`

Поле ўводу даты.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя цэлыя значэньні. А атрыбуты min, max і value – значэньні поўнай даты¹⁶.

Прыклад


<input type="date" value="2012-12-07" />

Прыклад на jsbin.com

`input type="datetime"`

Поле глябальнай даты і часу (з пазначэньнем часовага пасу).

Атрыбуты

¹⁷ У фармаце: http://tools.ietf.org/html/rfc3339. Літаралы T і Z у фармаце павінны быць абавязкова з вялікай літары.

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя рэчаісныя значэньні. А атрыбуты min, max і value – значэньні поўнай даты і часу¹⁷.

Прыклад


<input type="datetime" value="1990-12-31T23:59:59Z" />
<!-- альбо -->
<input type="datetime" value="1990-12-31T19:59:59-04:00" />

`input type="datetime-local"`

Поле лякальнай даты і часу (без пазначэньня часовага пасу).

Атрыбуты

¹⁸ У фармаце: http://tools.ietf.org/html/rfc3339. Літарал T у фармаце павінен быць абавязкова з вялікай літары, а літарал Z не павінен ужывацца, таму што гэта поле лякальнай даты, інфармацыя пра часавы пас не актуальная.

Прыклад


<input type="datetime-local" value="1985-04-12T23:20:50.52" />

Прыклад на jsbin.com

`input type="email"`

Поле ўводу адрасоў электроннай пошты.

Атрыбуты

У дадатак да агульных атрыбутаў і атрыбутаў тэкставых палёў ужываецца яшчэ:

multiple new – вызначае, што поле можа прымаць некалькі значэньняў (атрыбут без значэньня).

Атрыбут value можа прымаць радок, які ўтрымлівае альбо адзін, альбо некалькі (ужыты атрыбут multiple) адрасоў электроннай пошты, падзеленых паміж сабой коскамі. Рэгулярны выраз, якому павінны адпавядаць адрасы мае выкляд:


/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

`input type="file"`

Поле выбару файла для загрузкі.

Атрыбуты

У дадатак да агульных атрыбутаў (акрамя атрыбуту value, якое не выкарыстоўваецца ў гэтым полі) выкарыстоўваюцца яшчэ:

accept – сьпіс MIME-тыпаў¹⁹, падзеленых коскай, як падказка агенту, якія тыпы файлаў можа прыняць сэрвэр.
multiple new – вызначае, што поле можа прымаць некалькі значэньняў (атрыбут без значэньня).
required new – кажа агенту, што поле абавязковае для запаўненьня (атрыбут без значэньня).

Прыклады

Як апрацоўваць імёны абраных файлаў у JavaScript:


<html>
  <head>
  <title>Files property test</title>
  <script type="text/javascript">
    function getFiles() {
      // Бяром элемэнт уводу
      myFileList = document.getElementById("myfiles");
      // Перабіраем абраныя файлы пры дапамозе атрыбуту files
      for (var i = 0; i < myFileList.files.length; i++) {
        // Адлюстроўваем сьпіс абраных файлаў у элемэнце div
        document.getElementById("display").innerHTML += "<br/>" + myFileList.files[i].name ;
      }
    }
  </script>
  </head>
  <body>
    <label>Use <strong>shift</strong> or <strong>ctrl</strong> click to pick a few files:
    <input type="file" multiple id="myfiles" onchange="getFiles();" /></label>
    <div id="display"></div>
  </body>
</html>

Прыклад на jsbin.com

Як дасылаць абраны файл на сэрвэр:


<form action="/endpoint" enctype="multipart/form-data" method="post">
  <input type="file" name="my-file"/>
  <input type="submit" value="Upload File">
</form>

`input type="hidden"`

Схаванае поле формы. Выкарыстоўваецца часьцей за ўсё для таго, каб з формай даслаць некаторыя прадвызначаныя значэньні сэрвэру ў дадатак да таго, што дашле карыстальнік.

Атрыбуты

Выкарыстоўваюцца толькі агульныя атрыбуты (акрамя атрыбуту autofocus, якое па зразумелым прычынам не выкарыстоўваецца ў гэтым полі).

`input type="image"`

Поле вызначэньня каардынатаў выявы.

Атрыбуты

alt – альтэрнатыўны тэкст, які апісвае выяву.
formaction new – URL, на які будзе дасланая форма.
formenctype new – MIME-тып, зь якім агент павінен даслаць форму. Магчымыя значэньні:
- "application/x-www-form-urlencoded"
- "multipart/form-data"
- "text/plain"
formmethod new – HTTP-мэтад, які павінен ужыць агент пры адсылцы формы. Магчымыя значэньні:
- "get"
- "post"
formnovalidate new – кажа агенту, што поле не павінна правярацца (be validated) на правільнасьць уведзеных даных перад дасылкай формы (атрыбут без значэньня).
formtarget new – кантэкст агляданьня.
height – вышыня выявы ў піксэлях.
src – URL-спасылка да выявы.
width – шырыня выявы ў піксэлях.

`input type="month"`

Поле ўводу месяца і году.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя цэлыя значэньні. А атрыбуты min, max і value – значэньні месяца і году²⁰.

Прыклады


<input type="month" value="2012-12" />

Прыклад на jsbin.com

`input type="number"`

Поле для ўводу лікавых значэньняў.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя рэчаісныя значэньні. А атрыбуты min, max і value – адвольныя рэчаісныя значэньні.

Прыклад


<input type="number" value="" name="numbox" />

Прыклад на jsbin.com

`input type="password"`

Тэкставае поле для ўводу пароляў. Яно адлюстроўвае тэкст, які ў яго ўводзяць, такім чынам, каб яго немагчыма было пабачыць – напрыклад, у выглядзе зорачак.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты тэкставых палёў (акрамя атрыбуту list, які не выкарыстоўваецца ў гэтым полі).

`input type="radio"`

Поле radiobutton (поле з набору адзіночнага выбару).

Атрыбуты

У дадатак да агульных атрыбутаў ужываюцца яшчэ:

checked – вызначае, што поле выбранае (атрыбут без значэньня).
required new – кажа агенту, што поле абавязковае да запаўненьня (атрыбут без значэньня).

Прыклад


<label><input type="radio" name="age" value="young" checked>1-30 years old</label>
<label><input type="radio" name="age" value="mid">31-50 years old</label>
<label><input type="radio" name="age" value="old">51-120 years old</label>

Прыклад на jsbin.com

`input type="range"`

Даслоўна – поле ўводу дыяпазону, але, як ні дзіўна, уводзіць можна адно лікавае значэньне. Асабіста мне не зразумела, чым тады ён адрозьніваецца ад input type="number".

Атрыбуты

`input type="reset"`

Кнопка для таго, каб скінуць значэньні палёў формы ў змоўчныя значэньні (глядзі таксама элемэнт button type="reset").

Атрыбуты

Ужываюцца толькі агульныя атрыбуты.

`input type="search"`

Тэкставае поле ўводу пошукавых запытаў.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты тэкставых палёў.

`input type="submit"`

Кнопка адсылцы формы (глядзі таксама элемэнт button type="submit").

Атрыбуты

У дадатак да агульных атрыбутаў выкарыстоўваюцца яшчэ:

formaction new – URL, на які будзе дасланая форма.
formenctype new – MIME-тып, зь якім агент павінен даслаць форму. Магчымыя значэньні:
- "application/x-www-form-urlencoded"
- "multipart/form-data"
- "text/plain"
formmethod new – HTTP-мэтад, які павінен ужыць агент пры адсылцы формы. Магчымыя значэньні:
- "get"
- "post"
formnovalidate new – кажа агенту, што форма не павінна правярацца (be validated) на правільнасьць уведзеных даных перад дасылкай (атрыбут без значэньня).
formtarget new – кантэкст агляданьня.

`input type="tel"`

Тэкставае поле ўводу тэлефоннага нумару. Само па сабе не прад'яўляе ніякіх патрабаваньняў, што да фармату, але можна карыстацца атрыбутам pattern, каб задаць пажаданы фармат, які можа быць выкарыстаны агентам пры сабміце формы.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты тэкставых палёў.

Прыклад


<input type="tel" name="teleNumber" pattern="\(\d\d\d\) ?\d\d\d-\d\d\d\d" title="(###) ###-####" />

Прыклад на jsbin.com

`input type="text"`

Тэкставае поле агульнага прызначэньня. Менавіта гэты тып будзе ўжыты, калі атрыбут type яўна не пазначаны.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты тэкставых палёў.

`input type="time"`

Поле ўводу часу.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя рэчаісныя значэньні. А атрыбуты min, max і value – значэньні часу²¹.

Прыклад


<input type="time" value="17:39:57" />

Прыклад на jsbin.com

`input type="url"`

Тэкставае поле ўводу абсалютнай URL-спасылкі.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты тэкставых палёў.

`input type="week"`

Поле ўводу году і тыдня.

Атрыбуты

Ужываюцца агульныя атрыбуты і атрыбуты лікавых палёў. Атрыбут step можа прымаць пазытыўныя цэлыя значэньні. А атрыбуты min, max і value – значэньні году і яго тыдня²².

Прыклад


<input type="week" value="2012-W52" />

Прыклад на jsbin.com

`ins`

Пазначае фрагмэнт тэксту, які першапачаткова не прысутнічаў у дакумэнце, але пазьней быў устаўлены аўтарам. Адлюстроўваецца такі фрагмэнт ў выглядзе падкрэсьленага тэксту. Выкарыстоўваецца ў спалучэньні з элемэнтам del.

Атрыбуты

глябальныя
cite – URL-спасылка на дакумэнт, які тлумачыць чаму фрагмэнт быў устаўлены.
datetime – дата і/ці час²³.

Прыклад


<p>Нейкі тэкст. <ins>А гэты фрагмэнт быў пазьней устаўлены.</ins></p>

Прыклад на jsbin.com

`kbd`

Пазначае ўвод карыстальніка: альбо ўвод тэксту ў кансолі, альбо націсканьне клявішаў клявіятуры, альбо выбар пункту мэню. Можа выкарыстоўваецца ў спалучэньні з элемэнтам pre і samp.

Атрыбуты

глябальныя

Прыклады

Тут элемэнт kbd пазначае каманду, якая павінна быць уведзеная ў кансолі:


<p>Type the command <kbd>git status</kbd> to see the working tree status.</p>

Тут элемэнт kbd пазначае клявішы, якія павінны быць націснутыя:


<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

У гэтым прыкладзе карыстальніку прапануецца націснуць пэўны пункт мэню. Зьнешні элемэнт kbd пазначае усю камбінацыю цалкам, а ўнутраныя элемэнты kbd пазначаюць кожны крок паасобку, элемэнты samp унутры іх пазначаюць, што ўвод базуецца на тым, што адлюстравана сыстэмай, у дадзеным выпадку – на подпісах мэню:


<p>To make George eat an apple, select
  <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

Хаця такая дэталізацыя, як у апошнім прыкладзе, не абавязковая, дастаткова зрабіць наступным чынам, што будзе эквівалентна:


<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

`keygen`

Элемэнт формы для генэрацыі пары ключоў (public/private). Калі адбываецца дасылка формы, гэты элемэнт генэрыруе па пэўнаму альгарытму пару ключоў, публічны зь іх дасылаецца сэрвэру запакаваным з формай, а прыватны захоўваецца ў агенце кліенцкай машыны. Можа выкарыстоўвацца, напрыклад, для генэрацыі кліенцкага сэртыфікату. Void-элемэнт.

Атрыбуты

глябальныя
autofocus new – кажа агенту ўсталяваць на элемэнт фокус адразу пасьля канчатковай загрузкі старонкі (атрыбут без значэньня).
challenge – challenge-радок, каторы трэба перадаць разам з публічным ключом.
disabled – кажа агенту, што элемэнт павінен быць неактыўным (атрыбут без значэньня).
form new – значэньне id-атрыбуту формы, зь якой яўна зьвязваецца гэты элемэнт.
keytype="rsa" – тып ключа, які павінен быць створаны. На дадзены момант падтрымліваецца толькі RSA.
name – імя элемэнту формы (у сэнсе пары імя/значэньне пры адсылцы формы).

Прыклад

Каб стварыць пару ключоў, дадаць прыватны да лякальнага сховішча і даслаць публічны сэрвэру, можа быць выкарыстаны наступны код:


<form action="processkey.cgi" method="post" enctype="multipart/form-data">
  <p><keygen name="key" challenge="235ldahlae983dadfar" keytype="rsa"></p>
  <p><input type=submit value="Submit key..."></p>
</form>

Сэрвэр у гэтым выпадку атрымае форму з запакаваным публічным ключом RSA па ключу "key".

`label`

Подпіс да элемэнтаў формы.

Атрыбуты

глябальныя
for – значэньне атрыбуту id поля формы, да якога адносіцца подпіс.
form new – значэньне id самой формы, да якой адносіцца подпіс (як, відавочна, і само поле).

Прыклад

Зьвязка адбываецца яўным чынам (пераважны спосаб):


<input type="radio" name="friendship" value="Not_Applicable" id="rb"/>
<label for="rb">Not applicable</label>

Прыклад на jsbin.com

... ці апасродкавана (непажаданы спосаб), калі поле формы зьмяшчаецца ўнутры элемэнту подпісу:


<label>Click me <input type="text"></label>

`legend`

Прадстаўляе загаловак ці тлумачальны подпіс да бацькоўскага fieldset-элемэнту (можа быць даччыным элемэнтам толькі гэтага элемэнту). Уяўляе зь сябе подпіс у рамцы вакол элемэнтаў, у верхнім левым яе куце.

Атрыбуты

глябальныя

Прыклад


<form>
  <fieldset>
    <legend>Friendship</legend>
    <input type="radio" name="friendship" value="Not_Applicable" id="b"/>
    <label for="b">Not applicable</label>
    ⋮
   </fieldset>
   ⋮
</form>

Прыклад на jsbin.com

`li`

Уяўляе зь сябе элемэнт сьпісу – ненумараванага, нумараванага ці мэню. Адзінымі бацькоўскімі элемэнтамі могуць быць адпаведна ul, ol, menu.

Атрыбуты

глябальныя
value changed – атрыбут дазваляецца ўжываць толькі ў выпадку, калі бацькоўскім элемэнтам зьяўляецца ol і прадстаўляе нумар элемэнту ў сьпісе ў гэтым выпадку.

Прыклад

У наступным прыкладзе прыведзены выдуманы сьпіс 10 найлепшых фільмаў у зваротным парадку. Зьвярніце ўвагу, як сьпісу дададзены загаловак праз элемэнт figure і яго даччыны элемэнт figcaption.


<figure>
  <figcaption>The top 10 movies of all time:</figcaption>
  <ol>
      <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
      <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
      <li value="8"><cite>A Bug's Life</cite>, 1998</li>
      <li value="7"><cite>Toy Story</cite>, 1995</li>
      <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
      <li value="5"><cite>Cars</cite>, 2006</li>
      <li value="4"><cite>Toy Story 2</cite>, 1999</li>
      <li value="3"><cite>Finding Nemo</cite>, 2003</li>
      <li value="2"><cite>The Incredibles</cite>, 2004</li>
      <li value="1"><cite>Ratatouille</cite>, 2007</li>
  </ol>
</figure>

Прыклад на jsbin.com

`link`

Элемэнт уяўляе зь сябе мэтаданыя, якія выражаюць адносіны да спасылаемага дакумэнту. Напрыклад, спасылка на CSS-дакумэнт, які павінен ужывацца разам з гэтым HTML-дакумэнтам, ці спасылкі на іншыя HTML-дакумэнты з пазначэньнем тыпу адносін – папярэдні, наступны дакумэнт, дакумэнт зьместу і інш. Можа ўжывацца толькі ў head-элемэнце ці ў элемэнце noscript, які ў сваю чаргу зьмешчаны ў head. Пусты элемэнт.

Атрыбуты

глябальныя
href – URL-спасылка, якая пазначае іншы дакумэнт.
hreflang – мова дакумэнту, які пазначаецца спасылкай²⁴.
media – media, для якой створана старонка, пазначаная спасылкай. Калі атрыбут не прапісаны, выкарыстоўваецца значэньне па-змоўчваньні – all.

rel – тэкставае апісаньне адносінаў да спасылаемага дакумэнту (ці сьпіс апісаньняў, аддзеленых паміж сабой прагаламі)²⁵.
sizes="any" ці значэньні памераў іконкі new – атрыбут выкарыстоўваецца, калі тып спасылкі "icon" і вызначае памеры іконкі.
type – MIME-тып²⁶ старонкі, пазначанай спасылкай.

Прыклад

У наступным прыкладзе шэраг элемэнтаў link спасылаецца на стылі да старонкі:


<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

Далей прыводзіцца прыклад, як можна пазначаць альтэрнатыўныя старонкі іншых фарматаў, на іншых мовах альбо для іншых прыладаў:


<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print
    title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print
    title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

Альбо спасылкі да наступнага і папярэдняга дакумэнту:


<link rel="prev" href="chapter4.html">
<link rel="next" href="chapter6.html">

`main`

Элемэнт прызначаны для таго, каб утрымліваць галоўны зьмест элемэнту body сеціўнага дакумэнту альбо праграмы. Адпаведна, нельга зьмяшчаць некалькі такіх элемэнтаў у body. Ён ня можа быць даччыным элемэнтам у элемэнтах article, aside, footer, header і nav. У ім нельга зьмяшчаць элемэнты (інфармацыю), якія паўтараюцца ў розных дакумэнтах сайту: лягатып, навігацыя, бакавая панэль, інфармацыя аб аўтарскім праве і г.д.

Атрыбуты

глябальныя

Прыклад


<html>
  <head>
    <title>Main element example</title>
  </head>
  <body>
    <main>
      <header>
        <h1>Apples</h1>
        <p>The apple is the pomaceous fruit of the apple tree.</p>
      </header>

      <article>
        <h2>Red Delicious</h2>
        <p>These bright red apples are the most common found in many
        supermarkets.</p>
        <p>... </p>
        <p>... </p>
      </article>

      <article>
        <h2>Granny Smith</h2>
        <p>These juicy, green apples make a great filling for
        apple pies.</p>
        <p>... </p>
        <p>... </p>
      </article>
    </main>
    <footer>
      Copyright 2015
    </footer>
  </body>
</html>

`map`

У спалучэньні з элемэнтам area прадстаўляе мапу выяваў – выяву, падзеленую на асобныя вобласьці (магчыма «клікальныя», але не абавязкова).

Атрыбуты

глябальныя
name – імя мапы. Абавязковы атрыбут. Калі ў элемэнце вызначаецца і атрыбут id, тады ён павінен мець тое ж значэньне, што і гэты атрыбут name.

Прыклад

Мапа выяваў злучаецца з уласна выявай праз атрыбут выявы usemap:


<img src="solarsys.png" width="504" height="126" alt="Solar System" usemap="#SystemMap"/>
<map name="SystemMap">
  <area shape="rect" coords="0,0,82,126" href="/workshop/graphics/sun.png" alt="sun"/>
  <area shape="circle" coords="90,58,3" href="/workshop/graphics/merglobe.png" alt="mercury"/>
  <area shape="circle" coords="124,58,8" href="/workshop/graphics/venglobe.png" alt="venus"/>
  <area shape="circle" coords="162,58,10" href="/workshop/graphics/earglobe.png" alt="earth"/>
  <area shape="circle" coords="203,58,8" href="/workshop/graphics/marglobe.png" alt="mars"/>
  <area shape="poly" coords="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54"
      href="/workshop/graphics/jupglobe.png" alt="jupiter"/>
  <area shape="poly" coords="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50"
      href="/workshop/graphics/satglobe.png" alt="saturn"/>
  <area shape="poly" coords="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44"
      href="/workshop/graphics/uraglobe.png" alt="uranus"/>
  <area shape="poly" coords="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47"
      href="/workshop/graphics/nepglobe.png" alt="neptune"/>
  <area shape="circle" coords="479,66,3" href="/workshop/graphics/pluglobe.png" alt="pluto"/>
</map>

`mark`

Ужываецца для зьвяртаньня ўвагі на пэўны фрагмэнт (ці выдзяленьня пэўнага фрагмэнту) дакумэнту. У пэўным сэнсе падобны да элемэнтаў i, em, cite, але адрозьніваецца ад іх у тым, што не пазначае больш важны фрагмэнт, ці назву твора, ці фрагмэнт нахіленага шрыфту. Вобласьць ужываньня можна параўнаць з ужываньнем маркёраў у папяровых дакумэнтах. Глядзі ніжэй прыклады выкарыстаньня.

Атрыбуты

глябальныя

Прыклад

Элемэнт mark можа быць выкарыстаны для прыцягненьня ўвагі да пэўнай частцы цытаваньня; для падсьветкі тых частак дакумэнту, якія адпавядаюць пошукавым крытэрам; альбо каб адзначыць у кодзе месца з памылкай:


<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
  <p>Look around and you will find, no-one's really
      <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
    the person writing this quote is clearly not American.</p>


<p>I also have some <mark>kitten</mark>s who are visiting me
    these days. They're really cute. I think they like my garden! Maybe I
    should adopt a <mark>kitten</mark>.</p>


<p>The highlighted part below is where the error lies:</p>
<pre><code>
var i: Integer;
begin
   i := <mark>1.1</mark>;
end.
</code></pre>

Прыклад на jsbin.com

`menu`

Элемэнт прадстаўляе сьпіс камандаў (мэню).

Атрыбуты

глябальныя
label new – подпіс да мэню.
type new – тып мэню. Калі атрыбут не пазначаны, ужываецца тып па змоўчваньні list – сьпіс камандаў агульнага прызначэньня. Магчымыя яўныя значэньні:
- context – азначае, што элемэнт прадстаўляе кантэкстнае мэню.
- toolbar – азначае, што элемэнт прадстаўляе паліцу прыладаў.

Прыклад


<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="fnew()">New...</button>
      <button type="button" onclick="fopen()">Open...</button>
      <button type="button" onclick="fsave()">Save</button>
      <button type="button" onclick="fsaveas()">Save as...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="ecopy()">Copy</button>
      <button type="button" onclick="ecut()">Cut</button>
      <button type="button" onclick="epaste()">Paste</button>
    </menu>
  </li>
  <li>
    <menu label="Help">
      <li><a href="help.html">Help</a></li>
      <li><a href="about.html">About</a></li>
    </menu>
  </li>
</menu>

`menuitem`

Элемэнт пазначае каманду, якая зьвязана з пэўнай дзеяй. Гэты элемэнт не адлюстроўваецца на старонцы пакуль не зьявіцца ў элемэнце menu.

Атрыбуты

глябальныя
disabled – кажа агенту, што каманда на дадзены момант не актыўна (атрыбут без значэньня).
icon – URL да файла з выявай.
label – подпіс да каманды.
type – пазначае тып каманды. Магчымыя значэньні:
- "checkbox"
- "command"
- "radio"
Калі гэты атрыбут не пазначаны, па-змоўчваньні ужываецца тып "command".

Прыклад


<menu type="toolbar">
  <menuitem type="radio" radiogroup="alignment" checked="checked"
      label="Left" icon="icons/alL.png" onclick="setAlign('left')">
  <menuitem type="radio" radiogroup="alignment"
      label="Center" icon="icons/alC.png" onclick="setAlign('center')">
  <menuitem type="radio" radiogroup="alignment"
      label="Right" icon="icons/alR.png" onclick="setAlign('right')">
  <hr>
  <menuitem type="command" disabled
      label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

`menuitem type="checkbox"`

Пазначае каманду абраньня ці зьняцьця абраньня пэўнай опцыі/элемэнту.

Атрыбуты

У дадатак да атрыбутаў, пазначаных у menuitem:

checked – пазначае, што опцыя/элемэнт выбраны (атрыбут без значэньня).

`menuitem type="radio"`

Пазначае каманду выбару элемэнту са сьпісу элемэнтаў.

Атрыбуты

У дадатак да атрыбутаў, пазначаных у menuitem:

checked – пазначае, што каманда/элемэнт выбраны (атрыбут без значэньня).
radiogroup – імя групы элемэнтаў, у якую ўваходзіць гэтая каманда/элемэнт, паміж якімі будзе адбывацца пераключэньне пры зьмяненьні выбару карыстальніка.

У HTML4 дазвалялася ўжываць любое значэньне ў атрыбуце http-equiv наступнага элемэнту, а ў HTML5 гэты атрыбут можа прымаць толькі пэўныя значэньні.

`meta`

Элемэнт для пазначэньня мэта-даных дакумэнту. Наконт пэўнага ўжываньня глядзі адпаведныя разьдзелы ніжэй.

`meta charset`

Пазначае кадоўку²⁷ дакумэнту.


<meta charset="utf-8">

`meta name`

Зьвязвае імя мэта-даных, пазначанае ў атрыбуце name, са значэньнем мэта-даных, пазначаных у атрыбуце content.


<meta name="title" content="Article title">

Пры гэтым пэўна вызначаныя значэньні атрыбута name:

application-name – імя сеціўнай праграмы, да якой належыць старонка.
author – аўтар старонкі. Толькі адзін аўтар на элемэнт. Калі аўтараў некалькі – асобны элемэнт на кожнага зь іх.
description – апісаньне старонкі.
generator – софт, з дапамогай якога была створана старонка.
keywords – ключавыя словы старонкі.

Эксперыментальныя/прапанаваныя/вольныя значэньні атрыбута name можна пабачыць тут: http://wiki.whatwg.org/wiki/MetaExtensions

Наступны элемэнт не пажадана выкарыстоўваць у HTML5. Замест яго варта ўжываць атрыбут lang элемэнту html.

`meta http-equiv="content-language"`

Pragma-дырэктыва для пазначэньня мовы зьместу.

`meta http-equiv="content-type"`

Pragma-дырэктыва для пазначэньня тыпу зьместу. Атрыбут content мае пэўны фармат:


<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />

Першая часта (text/html) пазначае, што гэта HTML-дакумэнт, а другая – кадоўку²⁸ дакумэнту.

`meta http-equiv=default-style`

Pragma-дырэктыва для пазначэньня прадвызначанага стылю. У атрыбуце content пазначаецца значэньне атрыбуту id:

альбо элемэнту link;
альбо элемэнту style,

якія адпаведна:

альбо спасылаюцца на CSS-файл;
альбо ўтрымліваюць убудаванае апісаньне стылю.

`meta http-equiv="refresh"`

Pragma-дырэктыва для перанакіраваньня ці перагрузкі старонкі. У атрыбуце content пазначаецца:

альбо колькасьць сэкундаў, праз якія абнавіць/перагрузіць старонку;
альбо колькасьць сэкундаў, праз якія перанакіраваць старонку, і кропка з коскай і спасылка, куды перанакіраваць.

Гэты код абнавіць старонку праз 5 сэкундаў, перанакіраваньня не адбудзецца:


<meta http-equiv="refresh" content="5" />

Гэты код праз 5 сэкундаў перанакіруе агента на новую пляцоўку:


<meta http-equiv="refresh" content="5;url=http://yurtsevich.info/" />

`meter`

Скалярнае вымярэньне/значэньне ў пэўным дыяпазоне, ці фракцыйнае значэньне. Напрыклад, занятасьць дыску на кампутары, рэлевантасьць вынікаў пошуку ці разьмеркаваньне галасоў сярод кандыдатаў у час нейкага галасаваньня (напр. у прэзыдэнты). Могуць выкарыстоўвацца значэньні любых адзінак (якая адзінка выкарыстоўваецца ў пэўным выпадку, можна пазначыць у атрыбуце title).

УВАГА: не прызначаны для пазначэньня індыкатару прагрэсу (progress bar), для апошняга служыць асобны элемэнт – progress.

Атрыбуты

глябальныя
high – значэньне ніжняй мяжы верхняга сэгмэнту.
low – значэньне верхняй мяжы ніжняга сэгмэнту.
max – максымальнае значэньне дыяпазону. Калі атрыбут не пазначаны, максымальнае значэньне прымаецца за 1,0.
min – мінімальнае значэньне дыяпазону. Калі атрыбут не пазначаны, максымальнае значэньне прымаецца за 0.
value – «вымеранае» значэньне для паказу/індыкацыі.
optimum – аптымальнае значэньне.

Калі атрыбуты min і max не пазначаны, дыяпазон прымаецца за 0..1. Значэньні атрыбутаў павінны задавальняць наступным умовам:

min ≤ value ≤ max
min ≤ low ≤ max (калі low пазначаны)
min ≤ high ≤ max (калі high пазначаны)
min ≤ optimum ≤ max (калі optimum пазначаны)
low ≤ high (калі і low, і high пазначаны)

Акрамя саміх значэньняў варта пазначаць тэкставае апісаньне.

Прыклады

Ува ўсіх 3 выпадках ніжэй будзе адлюстравана тры чацьвёртых:

Прыклад на jsbin.com

Прыклад памылковага выкарыстаньня (не пазначана максымальнае значэньне, таму яно прымаецца за 1,0 і пры гэтым само значэньне выйдзе за дыяпазон):


<p>The grapefruit pie had a radius of <meter value="12">12cm</meter>
    and a height of <meter value="2">2cm</meter>.</p> <!-- BAD! -->

`nav`

Абрамляе частку дакумэнту, якая ўтрымлівае спасылкі на іншыя дакумэнты ці на сэкцыі ўнутры гэтага ж дакумэнту – навігацыйны блёк. Ня ўсе часткі дакумэнту са спасылкамі варта абрамляць у гэты элемэнт, а толькі асноўныя блёкі – напр., галоўная навігацыя па ўсяму сайту + лякальная навігацыя па пэўнай катэгорыі сайту ці па самой старонцы; яшчэ прыклад – ніжняя частка старонак сайту ўтрымлівае звычайна блёк з пэўнымі спасылкамі (Main, Term of Use, Contact Us, etc.), аднак іх варта зьмяшчаць у footer і элемэнт nav пры гэтым увогуле не выкарыстоўваць. Ня можа быць даччыным элемэнтам элемэнту address.

Атрыбуты

глябальныя

Прыклад


<body>
<header>
  <h1>Wake up sheeple!</h1>
  <p>
    <a href="news.html">News</a> -
    <a href="blog.html">Blog</a> -
    <a href="forums.html">Forums</a>
  </p>
  <p>Last Modified: <time>2009-04-01</time></p>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="articles.html">Index of all articles</a></li>
      <li><a href="today.html">Things sheeple need to wake up for today</a></li>
      <li><a href="successes.html">Sheeple we have managed to wake</a></li>
    </ul>
  </nav>
</header>
<div>
  <article>
    <header>
      <h1>My Day at the Beach</h1>
    </header>
    <div>
      <p>Today I went to the beach and had a lot of fun.</p>
      <!-- ...more content... -->
    </div>
    <footer>
      <p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
    </footer>
  </article>
  <!-- ...more blog posts... -->
</div>
<footer>
  <p>Copyright © 2006 The Example Company</p>
  <p>
    <a href="about.html">About</a> -
    <a href="policy.html">Privacy Policy</a> -
    <a href="contact.html">Contact Us</a>
  </p>
</footer>
</body>

`noscript`

Элемэнт уключае ў сябе зьмест, які будзе паказаны, калі ў агента няма падтрымкі скрыптоў альбо гэтая падтрымка адключана карыстальнікам (напр., дзеля бясьпекі). Элемэнт можа ўключацца ў head, тады ў ім дазваляецца ўжываць толькі элемэнты link, meta і style, а таксама ў body, тады ён зьяўляецца празрыстым, адзінае выключэньне – сярод яго даччыных элемэнтаў ня можа быць іншы noscript элемэнт. Ужываць гэты элемэнт не рэкамэндуецца, таму што ёсьць шмат сытуацыяў, калі спалучэньне элемэнтаў script/noscript можа прывесьці да памылак. Напр., калі скрыпты падтрымліваюцца, але іх выкананьне блякуецца firewall – тады зьмест элемэнту не будзе паказаны, але і сам скрыпт таксама ня будзе выкананы.

Замест гэтага варта карыстацца іншым падыходам. Элемэнты, якія б інакш былі зьмешчаныя ў элемэнт noscript, зьмяшчаюцца проста ў дакумэнце, але выдаляюцца/хаваюцца скрыптом. Пры такім падыходзе, калі скрыпты не падтрымліваюцца, альбо адключаны, альбо іх заблякаваў firewall, будзе паказаны асноўны зьмест, а скрыпт, які прызначаны ў тым ліку схаваць яго частку проста не адпрацуе, у іншым выпадку, ён схавае частку асноўнага зьместу і карэктна адпрацуе.

Атрыбуты

глябальныя

Прыклады

Прыклад з noscript:


<form action="calcSquare.php">
  <p>
    <label for=x>Number</label>:
    <input id="x" name="x" type="number">
  </p>
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' squared is ' + v * v;
    };
  </script>
  <noscript>
    <input type=submit value="Calculate Square">
  </noscript>
</form>

Тое ж самае бяз noscript:


<form action="calcSquare.php">
  <p>
    <label for=x>Number</label>:
    <input id="x" name="x" type="number">
  </p>
  <input id="submit" type=submit value="Calculate Square">
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' squared is ' + v * v;
    };
    var submit = document.getElementById('submit');
    submit.parentNode.removeChild(submit);
  </script>
</form>

`object`

Элемэнт агульнага прызначэньня для ўбудаваньня ў дакумэнт аб'ектаў розных тыпаў. У залежнасьці ад тыпу аб'екты будуць інтэрпрэтаваны альбо як выявы, альбо як убудаваны кантэкст агляданьня (іншы HTML), альбо як аддалены рэсурс для апрацоўкі адпаведнай убудовай (plugin). Даччынымі элемэнтамі могуць быць param, якія павінны ісьці першымі сярод усіх даччыных элемэнтаў, а потым – празрыстыя элемэнты. Абавязкова павінен прысутнічаць атрыбут data альбо type. Іншы элемэнт, які падобны на гэты – embed.

Атрыбуты

глябальныя
data – URL-спасылка на зьмест.

³⁰Правільная хэш-імя спасылка да элемэнту пэўнага тыпу – гэта чарада, якая пачынаецца з сымбалю "#", за якім ідзе чарада, якая дакладна супадае са значэньне атрыбуту name элемэнту гэтага тыпу.

form new – значэньне атрыбуту id формы, зь якой зьвязан аб'ект.
height – вышыня ўбудаванага зьместу ў піксэлях.
name – кантэкст агляданьня.
type – MIME-тып²⁹ зьместу.
usemap – хэш-імя спасылка³⁰ да элемэнту map.
width – шырыня ўбудаванага зьместу ў піксэлях.

Прыклады


<figure>
  <object type="application/x-java-applet">
    <param name="code" value="MyJavaClass">
    <p>You do not have Java available, or it is disabled.</p>
  </object>
  <figcaption>My Java Clock</figcaption>
</figure>


<figure>
  <object data="clock.html"></object>
  <figcaption>My HTML Clock</figcaption>
</figure>


<p>Look at my video:
  <object type="application/x-shockwave-flash">
    <param name=movie
        value="http://video.example.com/library/watch.swf">
    <param name=allowfullscreen value=true>
    <param name=flashvars
        value="http://video.example.com/vids/315981">
    <video controls src="http://video.example.com/vids/315981">
      <a href="http://video.example.com/vids/315981">View video</a>.
    </video>
  </object>
</p>

`ol`

Прадстаўляе нумараваны/упарадкаваны сьпіс элемэнтаў. У якасьці даччыных дазваляюцца толькі элемэнты li. Для ненумараваных сьпісаў глядзі элемэнт ul.

Атрыбуты

глябальныя
reversed new – кажа агенту, што сьпіс мае зваротны парадак (..., 3, 2, 1) (атрыбут без значэньня).
start changed – парадкавы нумар першага элемэнту – «зь якога нумару пачаць».
type – атрыбут задае стыль нумарацыі (у якасьці альтэрнатывы да CSS-атрыбуту list-style-type). Магчымыя значэньні:
- "1" – арабскія лічбы;
- "a" – малыя літары;
- "A" – вялікія літары;
- "i" – малыя рымскія лічбы;
- "I" – вялікія рымскія лічбы;
Калі гэты атрыбут не пазначаны, па-змоўчваньні ужываецца тып "1".

Прыклад

Прыклад на jsbin.com

`optgroup`

Выкарыстоўваецца для візуальнага групаваньня некалькіх элемэнтаў option (адзіны магчымы тып даччыных элемэнтаў). Можа быць даччыным элемэнтам толькі элемэнту select. Атрыбут label – абавязковы.

Атрыбуты

глябальныя
disabled – кажа агенту, што ўсе option-элемэнты групы павінны быць неактыўнымі (атрыбут без значэньня).
label – подпіс да групы. Гэты подпіс не прапануецца для выбару, але служыць толькі подпісам да групы элемэнтаў, якія ў сваю чаргу могуць быць выбраныя.

Прыклад

Прыклад на jsbin.com

`option`

Прадстаўляе элемэнт выбару ў элемэнтах select (магчыма праз пасярэдні optgroup) ці datalist. У пэўных выпадках элемэнт не зьяўляецца элемэнтам выбару, але подпісам да ўсяго select-элемэнту, для падрабязнасьцей глядзі апісаньне select-элемэнту. Індэксам элемэнту зьяўляецца колькасьць элемэнтаў да яго ў дрэве элемэнтаў выбару (сярод усіх непасрэдных элемэнтаў і тых, што знаходзяцца ў ім праз пасярэднія optgroup-элемэнты, за выключэньнем элемэнту, які зьяўляецца подпісам да select-элемэнту – глядзі сказ вышэй).

Атрыбуты

глябальныя
disabled – кажа агенту, што дадзены элемэнт павінен быць неактыўным. Такі ж эфэкт будзе мець наяўнасьць гэтага ж атрыбуту ў бацькоўскім элемэнце optgroup (атрыбут без значэньня).
label – подпіс элемэнту. Калі атрыбут адсутнічае, подпісам будзе зьяўляцца тэкст паміж адкрывальным і закрывальным тэгамі.
selected – кажа агенту, што дадзены элемэнт павінен быць абраным па змоўчваньні, калі карыстальнік яўным чынам не зрабіў выбар. Калі атрыбут multiple бацькоўскага элемэнту select не пазначаны, толькі адзін з элемэнтаў option гэтага select-элемэнту можа мець пазначаным гэты атрыбут. (атрыбут без значэньня)
value – значэньне, якое будзе перададзена ў выпадку абраньня элемэнту пры адсылцы формы. Калі атрыбут не пазначаны, значэньнем для перадачы будзе тэкст паміж адкрывальным і закрывальным тэгамі.

Прыклад


<form>
  <label for="favoritefood">Favorite food</label>
  <select name="favoritefood" id="favoritefood">
    <option>Cheese</option>
    <option>Egg</option>
    <option>Cabbage</option>
    ⋮
  </select>
</form>

`output`

Прадстаўляе вынік матэматычнага разьліку.

Атрыбуты

глябальныя
for – радок, які складаецца са значэньняў id-атрыбутаў элемэнтаў формы (праз прагал), значэньні якіх ўдзельнічаюць у разьліку, ці ўплываюць на яго.
form – значэньне атрыбуту id формы, зь якой яўна зьвязаны элемэнт.
name – імя гэтага элемэнту, з пары імя/значэньне для мэтаў формы.

Прыклад

Прыклад на jsbin.com

`p`

Прадстаўляе параграф тэксту. Ня можа ўтрымліваць разьметачныя элемэнты, у тым ліку іншы p.

Атрыбуты

глябальныя

Прыклад

Элемэнт p не павінен выкарыстоўвацца, калі пасуе больш спэцыфічны элемэнт. Хаця наступны прыклад з тэхнічнага пункту гледжаньня і карэктны:


<section>
  <!-- ... -->
  <p>Last modified: 2001-04-23</p>
  <p>Author: fred@example.com</p>
</section>

Тым ня менш, лепш яго запісаць наступным чынам:


<section>
  <!-- ... -->
  <footer>Last modified: 2001-04-23</footer>
  <address>Author: fred@example.com</address>
</section>

Альбо так:


<section>
  <!-- ... -->
  <footer>
    <p>Last modified: 2001-04-23</p>
    <address>Author: fred@example.com</address>
  </footer>
</section>

`param`

Зьяўляецца мэханізмам перадачы парамэтраў бацькоўскаму элемэнту object. Пусты элемэнт. Абодва парамэтры (name i value) – абавязковыя.

Атрыбуты

глябальныя
name – імя парамэтру.
value – значэньне парамэтру.

Прыклад


<p>
  <object type="application/vnd.o3d.auto">
    <param name="o3d_features" value="FloatingPointTextures">
    <img src="o3d-teapot.png"
        title="3D Utah Teapot illustration rendered using O3D."
        alt="When O3D renders the Utah Teapot, it appears as a squat
        teapot with a shiny metallic finish on which the
        surroundings are reflected, with a faint shadow caused by
        the lighting.">
    <p>
      To see the teapot actually rendered by O3D on your
      computer, please download and install the
      <a href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">
          O3D plugin</a>.
    </p>
  </object>
  <script src="o3d-teapot.js"></script>
</p>

`pre`

Элемэнт выкарыстоўваецца для захаваньня важных прагалаў і пераводаў радкоў у тэксьце. Часта выкарыстоўваецца ў спалучэньні з элемэнтамі code, kbd, samp.

Атрыбуты

глябальныя

Прыклад


<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

Прыклад на jsbin.com

`progress`

Прадстаўляе значэньне прагрэсу выкананьня нейкага працэсу (аналяг progress bar).

УВАГА! Не прызначаны для пазначэньня проста нейкага скалярнага значэньня ў пэўным дыяпазоне, для апошняга служыць элемэнт meter.

Атрыбуты

глябальныя
max – вызначае колькасьць працэдураў/крокаў зь якіх складаецца ўвесь працэс,– калі ён будзе лічыцца скончаным. Прымае пазытыўныя рэчаісныя значэньні.
value – лічбавы эквівалент скончанасьці працэсу. Як шмат працэдураў/крокаў з усяго працэсу выканана. Напр., 2гі крок зь 10. Калі атрыбут не пазначаны, progress bar знаходзіцца ў няпэўным стане. Прымае не нэгатыўныя рэчаісныя значэньні

Пачаткам прагрэсу лічыцца 0. Калі атрыбут max не пазначаны, за максымальнае значэньне прымаецца 1. Значэньні атрыбутаў павінны задавальняць наступным умовам:

0 ≤ value ≤ max

Акрамя саміх значэньняў progress bar варта пазначаць яго тэкставае апісаньне.

Прыклад


<p>Progress: <progress id="progressBar" max="100" value="10"></progress><span id="progressValue">0</span>%</p>
<script>
  var progressBar = document.getElementById('progressBar');
  var progressValue = document.getElementById('progressValue');
  function updateProgress(newValue) {
    if (newValue >= 100) {
      progressBar.value = newValue % 100;
    } else {
      progressBar.value = newValue;
    }
    progressValue.textContent = newValue;
    setTimeout(function() {
      updateProgress(progressBar.value + 1);
    }, 100);
  }

  updateProgress(1);
</script>

Прыклад на jsbin.com

`q`

Элемэнт выкарыстоўваецца для пазначэньня фразы з пэўнай крыніцы ці словаў нейкай асобы. У двукосьсе гэтую фразу (ані ўнутры элемэнту, ані вакол яго) браць ня трэба – двукосьсе аўтаматычна павінен дадаць агент. Ня блытаць з элемэнтам cite, мэта якога пазначыць назву пэўнага твору.

Атрыбуты

глябальныя
cite – URL-спасылка крыніцы, адкуль узятая цытата, калі такая спасылка існуе.

Прыклад

Прыклад на jsbin.com

`rp`

Ужываецца ў якасьці «дужак» вакол ruby text component (тэкст над, напрыклад, іерогліфамі, які тлумачыць іх вымаўленьне) у ruby-анатацыі для паказу ў агентах, якія не падтрымліваюць ruby-анатацыі. Можа быць даччыным элемэнтам толькі ruby-элемэнту.

Атрыбуты

глябальныя

Прыклад


<ruby>
 漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
 字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

Прыклад на jsbin.com

`rt`

Пазначае ruby text component у ruby-анатацыі. Можа быць даччыным элемэнтам толькі ruby-элемэнту.

Атрыбуты

глябальныя

`ruby`

Дазваляе пазначаць адну ці болей іерогліфаў, словаў альбо цэлых фразаў ruby-анатацыямі. Ruby-анатацыі пазначаюць вымаўленьне ўсходніх моваў.

Атрыбуты

глябальныя

Прыклады

Прыклад на jsbin.com

`s`

Элемэнт выкарыстоўваецца для пазначэньня фрагмэнту тэксту, які больш не зьяўляецца правільным ці актуальным, але ўсё яшчэ павінен утрымлівацца ў дакумэнце. Для пазначэньня фрагмэнтаў тэксту, якія былі выдаленыя аўтарам, прызначаецца элемэнт del.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`samp`

Элемэнт выкарыстоўваецца для пазначэньня вываду/выніку пэўнага працэсу ў кампутэрнай сыстэме. Часта выкарыстоўваецца ў спалучэньні з элемэнтам pre.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`script`

Элемэнт дазваляе дадаваць скрыпты і блёкі даных у дакумэнты. Скрыпт можа быць убудаваным, ці загружацца са зьнешняга файлу. Скрыпт прызначаны для выкананьня на кліенцкай машыне, таму ёсьць верагоднасьць яго невыкананьня – карыстальнік можа адключыць выкананьне скрыптоў у сваім агенце. Як вынік, існуе нефармальнае патрабаваньне – блякіраваньне выкананьня скрыптоў не павінна істотным чынам адбівацца на функцыянальнасьці старонак (апошняе збольшага тычыцца статычных сайтаў, зразумела, што зрабіць сеціўную праграму без скрыптоў амаль немагчыма). Тып скрыпту па змоўчваньні – "text/javascript".

Атрыбуты

глябальныя
async new – кажа агенту, што скрыпт павінен быць выкананы асынхронна – то бок агент не будзе чакаць сканчэньня загрузкі скрыпту для таго, каб адлюстраваць старонку (атрыбут без значэньня).
charset – кадоўка³¹ зьнешняга скрыпту.
defer – кажа агенту, што скрыпт павінен быць выкананы толькі пасьля разбору (parsing) дакумэнту (атрыбут без значэньня).

src – URL-спасылка на зьнешні файл, які ўтрымлівае скрыпт.
type – MIME-тып³² старонкі, пазначанай спасылкай.

Прыклад

Прыклад на jsbin.com

`section`

Прадстаўляе сэкцыю агульнага прызначэньня ў дакумэнце (тэматычна згрупаваны зьмест), звычайна з загалоўкам.

Атрыбуты

глябальныя

Прыклад


<article>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section>
    <h1>Red Delicious</h1>
    <p>These bright red apples are the most common found in many supermarkets.</p>
  </section>
  <section>
    <h1>Granny Smith</h1>
    <p>These juicy, green apples make a great filling for apple pies.</p>
  </section>
</article>

`select`

Прадстаўляе выпадаючы сьпіс (dropdown combobox) на форме. Элемэнтамі сьпісу зьяўляюцца элемэнты option. Ня можа быць даччыным элемэнтам у элемэнтах a, button. Калі атрыбут multiple не пазначаны, ня можа быць абрана некалькі опцыяў. Калі select павінен быць злучаным з элемэнтам label, тады атрыбут for апошняга павінен быць ідэнтычным атрыбуту id у select.

Атрыбуты

глябальныя
disabled – кажа агенту, што элемэнт зьяўляецца неактыўным (атрыбут без значэньня).
form new – значэньне атрыбуту id формы, зь якой яўна зьвязаны элемэнт.
multiple – кажа агенту, што можа быць абрана ад 0 да некалькіх опцыяў (атрыбут без значэньня).
name – імя элемэнту для мэтаў формы (пара name/value пры адсылцы формы).
size – колькасьць опцыяў для паказу карыстальніку. У гэтым выпадку элемэнт адлюстроўваецца ў выглядзе не выпадаючага, але статычнага сьпісу фіксаванай вышыні, каб у ім было бачна столькі элемэнтаў, колькі пазначана ў гэтым атрыбуце.

Прыклад


<form>
  <label for="favoritefood">Favorite food</label>
  <select name="favoritefood" id="favoritefood">
    <option>Cheese</option>
    <option>Egg</option>
    <option>Cabbage</option>
    ⋮
  </select>
</form>

Прыклад на jsbin.com

`small`

Прадстаўляе невялікі фрагмэнт тэксту (не параграфы тэксту, а фраза/сказ(ы)) – так званы side comment, які звычайна адлюстроўваецца малым шрыфтам. Ужываньне гэтага элемэнту ўнутры элемэнтаў em ці strong ніякім чынам не зьмяншае значнасьць тэксту, але толькі пазначае тэкст, які звычайна адлюстроўваецца малым шрыфтам.

Атрыбуты

глябальныя

Прыклады

Прыклад на jsbin.com

`source`

Дазваляе пазначаць некалькі альтэрнатыўных крыніц для мэдыя-элемэнтаў – audio, video. Можа быць даччыным элемэнтам толькі гэтых элемэнтаў. Пусты элемэнт. Акрамя альтэрнатыўнай спасылкі больш ніякай нагрузкі не нясе.

Атрыбуты

глябальныя
media – мэдыя-тып зьместу.
src – URL-спасылка на зьмест.
type – MIME-тып³³ зьместу.

Прыклады

Наступны сьпіс паказвае прыклады выкарыстаньня MIME-парамэтру codecs= у атрыбуце type.

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
```
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
```
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
```
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
```

H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container


<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
```
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
```
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
```
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
```
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
```
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
```
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
```
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
```

Theora video and Vorbis audio in Ogg container


<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora video and Speex audio in Ogg container


<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Vorbis audio alone in Ogg container


<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

Speex audio alone in Ogg container


<source src='audio.spx' type='audio/ogg; codecs=speex'>

FLAC audio alone in Ogg container


<source src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac video and Vorbis audio in Ogg container


<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

Theora video and Vorbis audio in Matroska container


<source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'>

Калі аўтар не перакананы, што агент карыстальніка здолее адлюстраваць пазначаны мэдыя-рэсурс, можна дадаць апрацоўшчык памылкі для прадстаўленьня альтэрнатыўных паводзінаў:


<script>
  function fallback(video) {
    // replace <video> with its contents
    while (video.hasChildNodes()) {
      if (video.firstChild instanceof HTMLSourceElement)
        video.removeChild(video.firstChild);
      else
        video.parentNode.insertBefore(video.firstChild, video);
    }
    video.parentNode.removeChild(video);
  }
</script>


<video controls autoplay>
  <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
      onerror="fallback(parentNode)">
  ...
</video>

`span`

Элемэнт агульнага прызначэньня, які агортвае пэўную фразу (невялікі фрагмэнт тэксту), і сам па сабе ніякай сэнсавай нагрузкі не нясе. Звычайна патрэбны для азначэньня пэўнага фрагмэнту тэксту для зьмены яго стылю афармленьня праз CSS.

Атрыбуты

глябальныя

Прыклад


<head>
  <style>
    .brandname { font-style: italic; color: #006; text-transform: uppercase; }
  </style>
</head>
⋮
<body>
  <p>There were various brands represented at the
    conference, including <span class="brandname">Adobe</span>,
    <span class="brandname">Microsoft</span>,
    <span class="brandname">Apple</span>,
    and <span class="brandname">Intel</span>.
  </p>
</body>

Прыклад на jsbin.com

`strong`

Пазначае фрагмэнт тэксту вялікай важнасьці. Калі ў гэтым элемэнце сустракаецца даччыны strong-элемэнт, ён (апошні зь іх) азначае павелічэньне важнасьці – яшчэ больш важны тэкст.

Атрыбуты

глябальныя

Прыклад


<p>
  <strong>Warning.</strong> This dungeon is dangerous. <strong>Avoid the ducks.</strong>
  Take any gold you find. <strong><strong>Do not take any of the diamonds</strong>,
  they are explosive and <strong>will destroy anything within ten meters.
  </strong></strong> You have been warned.
</p>

Прыклад на jsbin.com

`style`

Дазваляе ўбудоўваць стылёвую інфармацыю ў дакумэнт.

Атрыбуты

глябальныя
media – тып media, для якога ўжываецца стыль.
scoped new – кажа агенту, што стыль павінен быць ужыты толькі да пад-дрэва бацькоўскага элемэнту. Калі атрыбут не пазначаны, стыль павінен быць ужыты да ўсяго дакумэнту (атрыбут без значэньня).
type – MIME-тып³⁴ зьместу.

Прыклад

У наступным прыкладзе стыль элемэнтаў em зьмяняецца на нармальны шрыфт чырвонага колеру замест змоўчнага нахіленага шрыфту звычайнага колеру:

Прыклад на jsbin.com

А вось прыклад ужываньня атрыбуту scoped:

Прыклад на jsbin.com

`sub`

Пазначае падрадковы фрагмэнт тэксту. Але ня проста стылістычна падрадковы, але які мае пры гэтым асобы сэнс – звычайна ў матэматычных, хімічных фрагмэнтах.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`summary`

Прадстаўляе summary, caption ці legend для details-элемэнту.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`sup`

Пазначае па-надрадковы фрагмэнт тэксту. Але ня проста стылістычна па-надрадковы, але які мае пры гэтым асобы сэнс – звычайна ў матэматычных фрагмэнтах ці пры пазначэньні зносак.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`table`

Прадстаўляе таблічныя даныя. Зьместам элемэнту можа быць:

Магчымы элемэнт option, за якім ідуць 0 ці больш элемэнтаў colgroup, за якімі ідзе магчымы элемэнт thead, за якім ідзе:
- адзін элемэнт tfoot, за якім ідуць 0 ці больш элемэнтаў tbody альбо 1 ці больш элемэнтаў tr;
- 0 ці больш элемэнтаў tbody альбо 1 ці больш элемэнтаў tr, за якімі ідзе магчымы элемэнт tfoot.

Атрыбуты

глябальныя
summary – апісаньне структуры табліцы.

Прыклад

Прыклад на jsbin.com

`tbody`

Групуе некалькі радкоў бацькоўскага table-элемэнту (адзіны магчымы тып бацькоўскага элемэнту). Даччынымі могуць быць толькі tr-элемэнты.

Атрыбуты

глябальныя

`td`

Прадстаўляе ячэйку табліцы. Бацькоўскім можа быць толькі tr-элемэнт.

Атрыбуты

глябальныя
colspan – колькасьць калёнак табліцы, на якія «пашыраецца» гэтая ячэйка.
headers – зьмяшчае значэньні id-атрыбутаў аднаго ці болей адпаведных th-элемэнтаў.
rowspan – колькасьць радкоў табліцы, на якія «пашыраецца» гэтая ячэйка.

`textarea`

Элемэнт падобны да input type="text", але пры ўсім дазваляе ўводзіць шматрадковы тэкст.

Атрыбуты

глябальныя
autofocus new – кажа агенту перадаць элемэнту фокус адразу, як дакумэнт будзе запампаваны (атрыбут без значэньня).
cols – максымальная колькасьць сымбаляў на радок, якія агент будзе паказваць.
disabled – кажа агенту, што элемэнт павінен быць неактыўным (атрыбут без значэньня).
form new – значэньне атрыбуту id формы, зь якой зьвязаны элемэнт.
maxlength – максымальная колькасьць сымбаляў на элемэнт.
name – імя гэтага элемэнту, з пары імя/значэньне, якімі апэрыруе форма
placeholder new – вызначае кароткую падказку, якая прызначана дапамагчы карыстальніку з уводам даных у гэтае поле (звычайна паказваецца ў полі шэрым колерам пакуль карыстальнік не пачне ўводзіць нешта ў поле).
readonly – кажа агенту, што элемэнт не можа рэдагавацца (атрыбут без значэньня).
required new – пазначае, што элемэнт зьяўляецца абавязковым пры адсылцы формы (атрыбут без значэньня).
rows – максымальная колькасьць радкоў, якія агент будзе паказваць.
wrap
- ="hard" – кажа агенту падстаўляць разрыў радка пры дасягненьні максымальнай колькасьці сымбаляў у радку (col-атрыбут, які ў гэтым выпадку зьяўляецца абавязковым). Як я разумею «залішнія» сымбалі будуць не перанесеныя на наступны радок, але адкінутымі.
- ="soft" – дадатковыя пераносы радкоў не будуць дадавацца.

`tfoot`

Групуе адзін ці некалькі радкоў бацькоўскага table-элемэнту, у калёнках якіх падводзіцца вынік табліцы.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`th`

Прадстаўляе ячэйку загалоўку табліцы. Бацькоўскім можа быць толькі tr-элемэнт.

Атрыбуты

глябальныя
colspan – колькасьць калёнак табліцы, на якія «пашыраецца» гэтая ячэйка.
headers – зьмяшчае значэньні id-атрыбутаў аднаго ці болей адпаведных th-элемэнтаў.
rowspan – колькасьць радкоў табліцы, на якія «пашыраецца» гэтая ячэйка.
scope="row" ці "col" ці "rowgroup" ці "colgroup" – пазначае да набору якіх ячэек адносіцца гэты элемэнт. Калі атрыбут не пазначаны, прыналежнасьць вызначаецца ў залежнасьці ад кантэксту.

Прыклад

Прыклад на jsbin.com

Апісаньне прыкладу:

`thead`

Групуе адзін ці некалькі радкоў бацькоўскага table-элемэнту, у ячэйках якіх знаходзяцца подпісы да калёнак табліцы.

Атрыбуты

глябальныя

`time`

Прызначаны для прадстаўленьня даты і/ці часу ў форме, прыдатнай да чытаньня машынамі. Ня можа быць даччыным элемэнтам іншага time-элемэнту.

Атрыбуты

глябальныя
datetime – пазначае ўласна дату і/ці час³⁵.

Прыклад

Прыклад на jsbin.com

`title`

Прадстаўляе загаловак дакумэнту. Абавязковы элемэнт, які павінен зьмяшчацца ў head, павінен утрымліваць толькі тэкст (укладзеныя элемэнты будуць проста праігнараваныя), і яго зьмест павінен быць самадастатковым для разуменьня. Зьмест гэтага элемэнту адлюстроўваецца ў загалоўку ўкладкі браўзэра, у якім адкрываецца дакумэнт.

Атрыбуты

глябальныя

Прыклад


<!DOCTYPE html>

<html>
  <head>
    <title>Загаловак старонкі</title>
  </head>

  <body>
  </body>
</html>

`tr`

Прадстаўляе радок ячэек табліцы. Даччынымі элемэнтамі мугуць быць альбо шэраг (0 ці болей) td-элемэнтаў, альбо шэраг th-элемэнтаў. Бацькоўскімі элемэнтамі могуць быць: table, thead, tfoot, tbody.

Атрыбуты

глябальныя

`track`

Прадстаўляе тэкставыя подпісы да мэдыя-элемэнтаў (audio і video) – субцітры, подпісы і іншае. Спасылаюцца на файлы ў фармаце WebVTT (файлы з пашырэньнем .vtt). У адным і тым жа бацькоўскім мэдыя-элемэнце ня можа быць некалькі подпісаў, у якіх атрыбуты kind, label і srclang маюць аднолькавыя значэньні.

Атрыбуты

глябальныя
default – змоўчны подпіс (атрыбут без значэньня). Толькі адзін з подпісаў аднаго мэдыя-элемэнтаў можа мець гэты атрыбут.
kind – пазначае тып подпісу, магчымыя значэньні:
- captions – прадстаўляюць транскрыпцыю альбо пераклад гутаркі і іншай невярбальнай інфармацыі, як гукавых эфэктаў – для глухіх людзей, альбо калі гук выключаны;
- chapters – загалоўкі да зьмены эпізодаў;
- descriptions – тэкставае апісаньне відэа-плыні, напрыклад для сьляпых людзей;
- metadata – гэтыя подпісы выкарыстоўваюцца скрыптамі і нябачныя для людзей;
- subtitles – прадстаўляюць пераклад гутаркі, якая можа быць незразумелай гледачам, напрыклад не-ангельская гутарка ў ангельскім фільме. Іншая ўдакладняючая інфармацыя, напрыклад дата, месца падзеяў і інш.;
label – загаловак подпісу.
src – пазначае URL-спасылку подпісу, абавязковы атрыбут.
srclang – пазначае мову подпісу, абавязковы атрыбут, калі атрыбут kind мае значэньне subtitles.

Прыклад


<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>

`u`

Элемэнт выкарыстоўваецца для пазначэньня фрагмэнту тэксту, які ўтрымлівае напрыклад лексычныя альбо граматычныя памылкі. Агенты адлюстроўваюць тэкст такіх элемэнтаў як падкрэсьлены.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`ul`

Прадстаўляе ненумараваны сьпіс элемэнтаў. У якасьці даччыных дазваляюцца толькі элемэнты li. Для нумараваных сьпісаў глядзі элемэнт ol.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

`var`

Прадстаўляе зьменную. Альбо літаральную – ў матэматычнай формуле ці ў праграмным кодзе, альбо сэнсавую – слова ці фраза ў тэксьце, якія чытач павінен у думках замяніць на падыходзячае ў кантэксьце значэньне.

Атрыбуты

глябальныя

Прыклад

Прыклад на jsbin.com

І яшчэ адзін прыклад:


<p>
  If there are <var>n</var> pipes leading to the ice cream factory then I expect at
  <em>least</em> <var>n</var> flavors of ice cream to be available for purchase!
</p>

`video`

Прадстаўляе відэа(-струмень) ці фільм. У выпадку, калі ў элемэнце ўжываецца атрыбут controls, ён ня можа быць даччыным элемэнтам элемэнтаў a і button. Празрысты элемэнт. Трэба ўжываць альбо атрыбут src, альбо даччыныя source-элемэнты (павінны ісьці першымі сярод даччыных элемэнтаў).

Атрыбуты

глябальныя
autoplay – кажа агенту пачынаць прайграваць відэа адразу ж, як гэта стане магчымым (атрыбут без значэньня).
controls – кажа агенту, каб той паказаў элемэнты кіраваньня прайграваньнем (атрыбут без значэньня).
height – вышыня акна відэа у піксэлях.
loop – кажа агенту пачаць прайграваньне ізноў пасьля дасягненьня канцу відэа (атрыбут без значэньня).
poster – URL-спасылка да выявы, якая будзе паказвацца пакуль відэа яшчэ не прайграецца/не даступна.
preload – кажа агенту ці ўжываць «аптымістычнае пампаваньне» струменю альбо мэтаданых (адразу пачынаць кэшаваць даныя, нават калі карыстальнік шчэ не націснуў на старт). Калі атрыбут ня вызначаны, браўзэрам дазваляецца самім вызначаць змоўчнае значэньне, але рэкамэндуецца, каб яно было "metadata". Значэньні:
- "none" – карыстальніку можа не спатрэбіцца відэа, мінімізацыя ўжыванага трафіку;
- "metadata" – карыстальніку можа не спатрэбіцца відэа, аднак папярэдняя спампоўка мэтаданых (працягласьць відэа і інш.) пажаданая;
- "auto" – пажадана адразу пачаць кэшаваць увесь струмень.
src – URL крыніцы відэа-струменю.
width – шырыня акна відэа ў піксэлях.

Прыклады


<!-- Самы просты прыклад -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Прыклад з субтытрамі -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

<!-- Прыклад з множнымі крыніцамі -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>

`wbr`

«Падказвае» агенту, дзе лепш зрабіць перанос радка, калі ў гэтым зьявіцца патрэба.

Атрыбуты

глябальныя

Прыклад

Напрыклад у наступным кодзе элемэнт паказвае дзе магчымы перанос назвы фільма:

Прыклад на jsbin.com

Атрыбуты

Лягічныя атрыбуты без значэньняў

Сярод усяго набору атрыбутаў прысутнічаюць лягічныя, значэньні якіх не абавязкова пазначаць. Прысутнасьць ці адсутнасьць гэтых атрыбутаў само па сабе пазначае значэньне: калі атрыбут прысутнічае, тады ён прымае ісьціннае значэньне; калі не прысутнічае, тады ён прымае ілжывае значэньне. Пры гэтым ёсьць некалькі спосабаў, якімі гэтыя атрыбуты могуць пазначацца:

поўны – у гэтым выпадку ў якасьці значэньня атрыбуту пазначаецца ён сам (disabled = "disabled"):
```
<input type="text" disabled="disabled" name="name" value="Міхась">
```
спрошчаны – у гэтым выпадку ў якасьці значэньня атрыбуту пазначаецца пустая чарада (disabled = ""):
```
<input type="text" disabled="" name="name" value="Міхась">
```
скарочаны – у гэтым выпадку значэньне атрыбуту увогуле не пазначаецца (disabled):
```
<input type="text" disabled name="name" value="Міхась">
```

Апошні спосаб найбольш пажаданы для выкарыстаньня – ён кароткі, пры ім не дублюецца інфармацыя і ён найбольш падтрымліваецца браўзэрамі.

Кантэкст агляданьня

Сярод атрыбутаў элемэнтаў ёсьць шэраг тых (іх імёны звычайна складаюцца альбо ўключаюць ў сябе слова target), якія пазначаюць кантэкст агляданьня (browsing context) – гэта кантэкст, у якім будзе адкрыты рэсурс, на які спасылаецца элемэнт. Гэта можа быць альбо імя іншага элемэнту, альбо адмысловае ключавое слова.

У якасьці імені выкарыстоўваецца значэньне атрыбуту name элемэнту iframe, тады пераход па спасылцы не выкліча перагрузку бягучага акна новым зьместам, але новы зьмест будзе запампаваны ў пазначаны iframe:


<iframe name="myframe" src="http://nn.by" height="200" width="200" frameborder="1">
  <p>Your browser does not support iframes. That kinda sucks, eh?</p>
</iframe>
<p>And hear is content of <a href="http://tut.by" target="myframe">tut.by</a>.</p>

Ключавымі жа словамі могуць быць:

_blank – зьмест спасылкі будзе адкрыты ў новым акне
_parent – зьмест спасылкі будзе адкрыты ў бацькоўскім frame'е бягучага frame'у
_self – зьмест спасылкі будзе адкрыты ў бягучым frame'е
_top – зьмест спасылкі будзе адкрыты ў бягучым акне (як frame самага верхняга ўзроўню)

Трэба адзначыць, што выкарыстаньне фрэймаў старога (frame) і новага (iframe) тыпаў, як і ключавых словаў кантэксту агляданьня не дазваляецца ў дакумэнтах строгага тыпу. Як абыход гэтага абмежаваньня, каб спасылка адкрывалася ў новым акне, можна выкарыстоўваць наступны скрыпт:


<a href="http://www.nn.by" onclick="window.open(this.href); return false;">Link</a>

Глябальныя

Глябальныя атрыбуты – гэта атрыбуты, уласьцівыя для абсалютна ўсіх элемэнтаў HTML. Ніжэй прыведзены сьпіс гэтых атрыбутаў з іх апісаньнем.

`accesskey`

Дазваляе актывізаваць элемэнт на старонцы пры дапамозе пазначанага скароту клявіятуры. Напрыклад, калі гэты атрыбут зададзены для спасылкі, актывізацыя адпаведнага скароту клявіятуры прывядзе да спрацоўваньня гэтай спасылкі.

Актывізацыя скаротаў у розных браўзэрах адбываецца па-рознаму:

IE/Windows: Alt + accesskey
Firefox/Windows: Alt + Shift + accesskey
any browser in Mac: Ctlr + accesskey
Opera in any OS: Shift + Esc – выводзіць сьпіс усіх скаротаў.

`class`

Пазначае клясу ці клясы (праз прагал) адпаведнага элемэнту. Гэтыя клясы потым могуць ужывацца ў CSS і JavaScript для наданьня стылю і дынамікі адпаведным элемэнтам.

`contenteditable`

Можа прымаць значэньні true і false. Прызначаецца для пазначэньня ці можа зьмест элемэнту рэдагавацца.

`contextmenu`

У якасьці значэньня выкарыстоўваецца id-атрыбут элемэнту menu, які прызначаецца ў якасьці кантэкстнага мэню для гэтага элемэнту.

`dir`

Можа прымаць значэньні ltr (left-to-right) ці rtl (right-to-left) і пазначае напрамак літараў пры адлюстраваньні тэксту. Часьцей за ўсё ўжываецца для пазначэньня фрагмэнтаў тэкстаў на мовах кшталту іўрыт ці арабская мова, калі асноўны тэкст – звычайныя мовы кшталту ангельская ці беларуская.

Прыклад на jsbin.com

`draggable`

Можа прымаць значэньні true і false. Прызначаецца для пазначэньня ці можа элемэнт перацягвацца (быць draggable).

`hidden`

Можа прымаць значэньні hidden ці пустое. Пазначае элемэнты, якія павінны быць схаваныя (не бачныя карыстальніку).

`id`

Унікальны ідэнтыфікатар элемэнту. У дакумэнце не павінна быць 2 і больш элемэнтаў з аднолькавым ідэнтыфікатарам. Значэньне – любы радок ненулявой даўжыні без прагалаў.

`lang`

Пазначае галоўную мову зьместу элемэнту і яго атрыбутаў, каторыя зьмяшчаюць тэкст. Значэньне – subtag³⁶ мовы.

`spellcheck`

Пазначае элемэнт, чый зьмест падлягае праверцы артаграфіі і граматыкі.

`style`

Зьмяшчае інструкцыі CSS, якія павінны быць ужытыя да элемэнту. Інструкцыі, зьмешчаныя ў гэтым атрыбуце, маюць найвышэйшы прыярытэт сярод усяго каскаду стыляў.

`tabindex`

Пазначае парадкавы нумар у чарзе праходу фокусу. Калі пэўны элемэнт ня мае гэтага атрыбуту, ён усё роўна будзе факусіравацца, але толькі пасьля тых элемэнтаў, якія ўтрымліваюць гэты атрыбут. Калі ж пэўны элемэнт утрымлівае атрыбут disabled, нават у выпадку пазначэньня атрыбуту tabindex, ён будзе выключаны з чаргі праходу фокусу.

`title`

Дазваляе пазначыць дадатковую інфармацыю пра пэўны элемэнт. Звычайна зьмест гэтага атрыбуту паказваецца як усплываючая падказка (tooltip) да элемэнту. Часьцей за ўсё ўжываецца разам з элемэнтамі a, abbr і элемэнтамі формы, каб пазначыць дадатковую/дапаможную інфармацыю пра спасылку, скарачэньне, элемэнты формы (фармат зьместу, напр.) адпаведна.

Custom Data Attributes

HTML5Doctor

Да ўсіх элемэнтаў HTML, пачынаючы з 5-й вэрсіі, могуць дадавацца дадатковыя атрыбуты выгляду:

'data-*'

якія апісваюць нейкія ўласьцівасьці гэтых элемэнтаў, каторыя немагчыма прадставіць праз атрыбуты са спэцыфікацыі. Прымальнае выкарыстаньне такіх атрыбутаў:

Утрымліваць пачатковую вышыню ці празрыстасьць элемэнту, якія пазьней могуць спатрэбіцца для анімацыі праз JavaScript.
Утрымліваць парамэтры для Flesh, які загружаецца праз JavaScript.
Утрымліваць custom web analytics tagging data.
Захоўваць даныя пра health, ammo ці lives у JavaScript гульні.
To power accessible JavaScript video subtitles.

Media

HTML і CSS падтрымліваюць пераключэньне табліц стыляў у залежнасьці ад прылады, якая на дадзены момант выкарыстоўваецца для адлюстраваньня старонкі.

Тыпы

Сьпіс тыпаў прыладаў (media), якія падтрымліваюцца ў HTML5/CSS3:

all – ўжываецца для любой прылады
print – друкар
screen – манітор
speech – сынтэзатар маўленьня (у CSS2 мела абазначэньне aural)

Наступныя значэньні таксама падтрымліваюцца ў HTML5/CSS3, але ў Media Queries Level 4 пазначаныя як непажаданыя для выкарыстаньня:

braille – прылада для чытаньня сьляпымі (шрыфт Брайля)
embossed – прылада друкаваньня шрыфту Брайля
handheld – наладонная прылада
projection – праектар
tty – кансоль
tv – тэлевізар

Прыклад ужываньня:


<link rel="stylesheet" media="screen and (color)" href="example.css" />

У гэтым прыкладзе CSS-файл example.css будзе ўжыты для прылады screen з пэўнай характарыстыкай – color (каляровая). Тое ж самае з выкарыстаньнем @import-rule у CSS будзе выглядаць:


@import url(color.css) screen and (color);

Пры пералічэньні некалькіх media у адной інструкцыі выкарыстоўваецца коска (аналяг лягічнага OR). У якасьці лягічнага AND выкарыстоўваецца and, а ў якасьці лягічнага адмаўленьня выкарыстоўваецца not:


<link rel="stylesheet" media="not screen and (color)" href="example.css" />

Характарыстыкі

Амаль усе характарыстыкі могуць мець неабавязковыя прэфіксы min- і max-, якія азначаюць больш-ці-роўна і меньш-ці-роўна. Характарыстыкі могуць ня мець лічбавых значэньняў – быць самі па сабе, як color у прыкладах вышэй.

`width`

Шырыня вобласьці адлюстраваньня (display area) прылады. Для прыладаў працяглага адлюстраваньня (манітор), гэта значэньне яго viewport (як апісана ў CSS2, сэкцыя 9.1.1) уключна з памерам скролбара (калі адлюстраваны). Для прыладаў пастаронкавага адлюстраваньня (друкар), гэта шырыня старонкі (як апісана ў CSS2, сэкцыя 13.2).


(min-width: 25cm)

альбо:


(max-width: 700px)

`height`

Вышыня вобласьці адлюстраваньня прылады.

`device-width`

Шырыня паверхні візуалізацыі (rendering surface) прылады. Для прыладаў працяглага адлюстраваньня, гэта значэньне шырыні іх экрану. Для прыладаў пастаронкавага адлюстраваньня, гэта шырыня аркушу.

`device-height`

Вышыня паверхні візуалізацыі прылады.

`orientation`

Арыентацыя прылады. Мае значэньне 'portrait', калі значэньне характарыстыкі height больш ці роўна значэньню характарыстыкі width. Інакш значэньне orientation – 'landscape'.

Прыклад у CSS-фармаце:


@media all and (orientation: portrait) {
  /* ... */
}

@media all and (orientation: landscape) {
  /* ... */
}

`aspect-ratio`

Суадносіны width да height прылады.

`device-aspect-ratio`

Суадносіны device-width да device-height прылады.

Напрыклад, калі памеры манітору складаюць 1280 піксэляў па-гарызанталі і 720 піксэляў па-вэртыкалі (фармат «16:9»), усе наступныя media-вызначэньні падыдуць да гэтага манітору (у CSS-фармаце):


@media screen and (device-aspect-ratio: 16/9) {
  /* ... */
}

@media screen and (device-aspect-ratio: 32/18) {
  /* ... */
}

@media screen and (device-aspect-ratio: 1280/720) {
  /* ... */
}

@media screen and (device-aspect-ratio: 2560/1440) {
  /* ... */
}

`color`

Колькасьць бітаў, якія прылада выдзяляе на кожны свой каляровы кампанэнт. Калі лічбавае значэньне не пазначанае, значыць проста каляровы, не важна колькі бітаў на каляровы кампанэнт. Калі значэньне 0 – некаляровая прылада.

`color-index`

Колькасьць запісаў у color lookup table. Калі прылада не выкарыстоўвае color lookup table – 0.

`monochrome`

Колькасьць бітаў на піксэль у манахромным frame buffer. Калі прылада не манахромная – 0.

`resolution`

Разрозьненьне прылады.

Прыклад у CSS-фармаце:


@media print and (min-resolution: 300dpi) {
  /* ... */
}

`scan`

Тып працэсу сканаваньня ў тэлевізійных прыладах.

Прыклад у CSS-фармаце:


  @media tv and (scan: progressive) {
    /* ... */
  }

`grid`

Пазначае прылада grid ці bitmap³⁷.

Microformats

microformats.org

Canvas

API канвы: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Audio

Як убудоўваць аўдыё на сайт: http://www.elated.com/articles/html5-audio/

Video

Як кадаваць і ўбудоўваць відэа на сайт: http://camendesign.com/code/video_for_everybody#video-what

CheatSheet

Спэцыяльныя сымбалі

Калі зьмясьціць звычайныя сымбалі ў тэкст старонкі не зьяўляецца праблемай, таму што гэтыя сымбалі прысутнічаюць на клявіятуры, то каб зьмясьціць асаблівыя сымбалі на старонцы, трэба скарыстацца мэханізмам, калі выкарыстоўваецца іх лічбавы альбо імянны код.

Імянны код мае форму &ІМЯННЫ_КОД;, напрыклад £ для сымбаля £.

Лічбавы код мае форму &#ЛІЧБАВЫ_КОД;, напрыклад £ для таго ж сымбаля £.

Пры дапамозе сеціўнай праграмы па вызначэньні кодаў http://amp-what.com можна шукаць коды вялікай базы сымбаляў па ключавым словам.

Коды асноўных асаблівых сымбаляў
Імянны код	Лічбавы код	Адлюстраваньне сымбаля	Апісаньне сымбаля
`‘`		‘	левы адзіночны апостраф
`’`		’	правы адзіночны апостраф
`“`		“	левы двайны апостраф
`”`		”	правы двайны апостраф
`"`	`"`	"	пазнака цытаваньня (двайны апостраф)
	`'`	'	адзіночны апостраф
`&frasl;`	`/`	⁄	слэш
`<`	`<`	<	знак "менш"
`>`	`>`	>	знак "больш"
`–`	``	–	сярэдні працяжнік
`—`	``	–	доўгі працяжнік
` `	` `		неразрыўны прагал
`¢`	`¢`	¢	знак цэнту
`£`	`£`	£	знак фунту
`€`	`€`	€	знак эўра
`¥`	`¥`	¥	знак йены
`¤`	`¤`	¤	агульны знак валюты
`§`	`§`	§	знак параграфу
`©`	`©`	©	знак аўтарскага права
`®`	`®`	®	знак зарэгістраванай гандлёвай маркі
`™`		™	знак гандлёвай маркі
`«`	`«`	«	левыя вуглавыя дужкі цытаваньня
`»`	`»`	»	правыя вуглавыя дужкі цытаваньня
`°`	`°`	°	знак градусаў
`±`	`±`	±	знак плюс/мінус
`²`	`²`	²	знак другой ступені (2 у верхнім рэгістры)
`³`	`³`	³	знак трэцяй ступені (3 у верхнім рэгістры)
`µ`	`µ`	µ	знак мікра-значэньняў
`¶`	`¶`	¶	знак пераводу радка
`·`	`¶`	·	кропка ў сярэдзіне радка
`¼`	`¼`	¼	адна чацьвёртая
`½`	`½`	½	адна другая
`¾`	`¾`	¾	тры чацьвёртых
`←`		←	стрэлка ўлева
`↑`		↑	стрэлка ўверх
`→`		→	стрэлка ўправа
`↓`		↓	стрэлка ўніз

Ніжэй прыведзеныя спасылкі на табліцы з кодамі больш спэцыфічных сымбаляў:

Deprecated элемэнты

Элемэнт	Апісаньне і парада па замене
`acronym`	Пазначае абрэвіятуру. Замест гэтага трэба выкарыстоўваць `abbr`.
`applet`	Убудаваньне Java-аплетаў. Замест гэтага трэба выкарыстоўваць больш агульны `object`.
`basefont`	Стыль базавага шрыфту. Замест гэтага трэба карыстацца сродкамі CSS.
`bgsound`	Музычнае тло дакумэнту. Замест гэтага трэба выкарыстоўваць `audio`-элемэнт.
`big`	Робіць памер шрыфту большым. Замест гэтага трэба ўжываць сэмантычна пасуючы элемэнт і карыстацца сродкамі CSS для зьмены стылю.
`blink`	Тэкст міргае. Замест гэтага трэба выкарыстоўваць сродкі CSS і/альбо JavaScript. Але не забываемся, што гэты эфэкт увогуле лічыцца не густоўным.
`center`	Цэнтруе тэкст. Замест гэтага трэба ўжываць сэмантычна пасуючы элемэнт і карыстацца сродкамі CSS для зьмены стылю.
`comment`	Устаўляе камэнтар. Замест яго трэба выкарыстоўваць `<!-- -->`.
`dir`	Шматкалёначны сьпіс. Замест яго трэба выкарыстоўваць элемэнт `ul`.
`font`	Зьмяняе стыль шрыфту. Замест гэтага трэба ўжываць сэмантычна пасуючы элемэнт і карыстацца сродкамі CSS для зьмены стылю.
`frame`	Замест гэтага элемэнту трэба ўжываць CSS-layout альбо `iframe`-элемэнт.
`frameset`	Замест гэтага элемэнту трэба ўжываць CSS-layout альбо `iframe`-элемэнт.
`isindex`	Вельмі стары і кепска рэалізаваны мэханізм для арганізацыі пошуку. Замест яго трэба карыстацца формай з полем `input type="search"` і кнопкай `button type="submit"` – сучаснай формай арганізацыі пошуку.
`listing`	Прадфарматаваны тэкст (з захаваньнем прагалаў і пераносаў радка). Замест гэтага элемэнту трэба ўжываць элемэнт `pre`.
`marquee`	Аўтаматычная пракрутка пэўнага тэксту (бягучы радок). Ужываньне гэтага эфэкту лічыцца кепскім стылем, які часта раздражняе карыстальнікаў. Нават калі і ёсьць сэнс ужываньня гэтага эфэкту, трэба ўжываць JavaScript ці CSS-анімацыю.
`nobr`	Кажа агенту не рабіць разрыў радка (перанос) у пэўным фрагмэнце тэксту. Замест гэтага трэба ўжываць сэмантычна пасуючы элемэнт і карыстацца сродкамі CSS для зьмяненьня стылю.
`noembed`	Утрымлівае зьмест, альтэрнатыўны таму, што зьмяшчаецца ў `embed`, калі браўзэр ня ў стане адлюстраваць апошняе. Сучасныя браўзэры поўнасьцю падтрымліваюць элемэнт `embed`, таму ўжываць гэты элемэнт няма ніякага сэнсу, тым больш, што ён не апісаны ніякім стандартам.
`noframes`	Утрымлівае зьмест, альтэрнатыўны таму, што зьмяшчаецца ў `frameset` (гл. вышэй у гэтай табліцы), калі браўзэр ня ў стане адлюстраваць апошняе (не падтрымлівае працу з фрэймамі). Улічваючы, што ўжываньне фрэймаў само па сабе на дадзены момант непажаданае да выкарыстаньня, адпадае неабходнасьць і ў гэтым элемэнце.
`plaintext`	Прадфарматаваны тэкст (з захаваньнем прагалаў, пераносаў радка; напрыклад HTML-разьметка будзе адлюстравана як тэкст, а не інтэрпрэтаваная як HTML-разьметка). Замест гэтага элемэнту трэба ўжываць элемэнт `pre`.
`spacer`	?. Замест гэтага трэба карыстацца сродкамі CSS.
`strike`	Перакрэсьлівае тэкст. Замест гэтага трэба ўжываць элемэнт `del` ці іншы сэмантычна пасуючы элемэнт + сродкі CSS для зьмены стылю.
`tt`	Тэлетайп – тэкст зь літарамі аднолькавай шырыні. Замест гэтага трэба ўжываць элемэнт `code` ці іншы сэмантычна пасуючы элемэнт + сродкі CSS для зьмены стылю.
`u`	Падкрэсьлівае тэкст. Замест гэтага трэба ўжываць сэмантычна пасуючы элемэнт і карыстацца сродкамі CSS для зьмены стылю.
`wbr`	Пазначае, дзе ў слове можа быць устаўлены перанос слова. Улічваючы, што гэта не стандартны элемэнт і не аднолькава добра падтрымліваецца ў розных браўзэрах, не пажадана яго ўжываць увогуле.
`xmp`	Тэкст прыкладу. Прадфарматаваны тэкст (з захаваньнем прагалаў, пераносаў радка і ўжываньнем шрыфту з літарамі аднолькавай шырыні; напрыклад HTML-разьметка будзе адлюстраваны як тэкст, а не інтэрпрэтаваны як HTML-разьметка). Замест гэтага элемэнту трэба ўжываць элемэнт `pre`

Карысныя спасылкі

Хатняя старонка

Стандарты і спэцыфікацыі

HTML 4.01

HTML 5.0

Розьніца паміж 4ай і 5ай вэрсіямі

Даведнікі і кнігі

HTML5 прыклады

Прылады

HTML і XHTML

DOCTYPE

Фарматы

Даступныя тыпы

Рэжымы агентаў3

Загатоўкі дакумэнтаў

Boilerplate

Кароткая для HTML5

Пашыраная для HTML5

Пашыраная для HTML4

Элемэнты HTML

Па тыпу зьместу

Каранёвы элемэнт

Элемэнты мэтаданых

Разьметачныя элемэнты

Тэкставыя элемэнты

«Празрыстыя» элемэнты

Пустыя элемэнты

Элемэнты скрыптоў

Сэкцыйныя элемэнты

Элемэнты групаваньня зьместу

Элемэнты пазначэньня сэмантыкі

Элемэнты пазначэньня рэдагаваньняў

Элемэнты ўбудаванага зьместу

Элемэнты табліцаў

Элемэнты формаў

Інтэрактыўныя элемэнты

Схемы элемэнтаў

Апісаньне элемэнтаў

a

Атрыбуты

Прыклады

abbr

Атрыбуты

Прыклад

address

Атрыбуты

Прыклад

area

Атрыбуты

Прыклад

article

Атрыбуты

Прыклад

aside

Атрыбуты

Прыклад

audio

Атрыбуты

Прыклад

b

Атрыбуты

base

Атрыбуты

bdi

Атрыбуты

Прыклад

bdo

Атрыбуты

Прыклад

blockquote

Атрыбуты

Прыклад

body

Атрыбуты

Прыклад

br

Атрыбуты

Прыклад

button

Атрыбуты

Рэжымы агентаў³

`a`

`abbr`

`address`

`area`

`article`

`aside`

`audio`

`b`

`base`

`bdi`

`bdo`

`blockquote`

`body`

`br`

`button`

`button type="submit"`

`button type="reset"`

`button type="button"`

`canvas`

`caption`

`cite`

`code`

`col`

`colgroup`

`datalist`

`dd`

`del`

`details`

`dfn`

`div`

`dl`

`dt`

`em`

`embed`

`fieldset`

`figcaption`

`figure`

`footer`

`form`

`h1, h2, h3, h4, h5, h6`

`head`