This article is a cheat sheet for HTML tags. Therefore, let's not rant, straight to the point.
abbr
The tag abbr
defines an abbreviation or acronym . An abbreviation or acronym stands for using the attribute title
.
<abbr title="HyperText Markup Language">HTML</abbr> - 1986—1991 .
abbr
often used in conjunction with a tag dfn
that identifies a concept or term:
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - (-).</p>
address
address
. , , , , ..
<address>
: <a href="mailto:ivan@mail.com"> </a><br />
: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
: ,
<address>
audio
audio
- ( .) -.
- src
, source
. , ( - type
).
<audio>
</audio>
, audio
.
: MP3
, WAV
OGG
.
:
autoplay
— ( )controls
— (audio
, , )loop
— , , ,muted
— (autoplay
)preload
— , - . :auto
,metadata
,none
.none
JavaScript
src
—
<audio controls>
"audio". </audio> <!-- --> <audio src="music.mp3" preload="metadata" controls muted loop> "audio".</audio>
video
video
- ( .) -.
- src
, source
. , ( - type
).
<video>
</video>
, video
.
: MP4
, WebM
OGG
.
:
autoplay
— ( )controls
—loop
— , , ,muted
— (autoplay
)preload
— , - . :auto
,metadata
,none
.none
JavaScript
src
—poster
— ,width
—height
—
<video width="320" height="240" controls>
"". </video> <!-- --> <!-- --> <video src="movie.mp4" autoplay muted loop> "".</video>
DOM API
, audio
video
.
base
base
(URL
) / (target
) . head
:
href
—target
—target
. :_blank
,_parent
,_self
_top
<head>
<base href="http://example.com/" target="_blank">
</head>
<body>
<header>
<nav>
<!-- http://example.com/product.html -->
<a href="product.html"></a>
</nav>
</header>
<main>
<!-- http://example.com/images/happy_face.png -->
<img src="images/happy_face.png" alt="" />
</main>
<footer>
<nav>
<!-- http://example.com/contacts.html -->
<a href="contacts.html"></a>
</nav>
</footer>
</body>
blockquote
cite
blockquote
, . cite
.
<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript - . -, . ECMAScript ( ECMA-262).
</blockquote>
cite
- (, , , , , ..). .
<p> JavaScript <cite>" JS"</cite> .</p>
code
code
:
<p>HTML- `button` .</p>
<p>CSS- `background-color` .</p>
code
pre
:
<pre>
`
const name = prompt(' ?')
if (name?.trim()) alert(`, ${name}!`)
else console.info(' ')
`
</pre>
datalist
datalist
. "" input
: .
id
datalist
list
input
.
<!-- `for` `label` `id` `input` -->
<label for="browser"> :</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
options
Datalist
.
dl
, dt
dd
dl
(, ). dt
, , dd
, .
dd
, , , ..
<dl>
<dt></dt>
<dd> </dd>
<dt></dt>
<dd> </dd>
</dl>
details
details
. , JavaScript
. .
details
.
details
.
details
summary
.
details
open
( CSS- — details[open]
JavaScript- — document.querySelector('[open]')
).
<details>
<summary> - "details"</summary>
<p> - </p>
</details>
dialog
dialog
. "" .
dialog
.
dialog
open
.
<dialog open> </dialog>
Dialog
JavaScript
show()
, close()
showModal()
, open
.
figure
figure
() , , , , ..
, figure
(main flow), () . figure
.
figure
figcaption
.
<figure>
<img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
<figcaption>. 1 - "" JavaScript V8.</figcaption>
</figure>
meter
meter
. , meter
- (gauge).
.
meter
label
.
:
value
—min
max
min
—max
—low
— .min
,high
max
high
—optimum
—min
max
. . ,optimum
min
low
, ,form
—form
,meter
<label for="disk_d"> "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>
meter
:
// <meter id="meter" max="100"></meter> if ('getBattery' in navigator) { navigator.getBattery() .then(({ level }) => { meter.value = level * 100 }) }
progress
progress
.
-.
progress
label
.
:
max
— .1
value
—
<label for="file"> :</label>
<progress id="file" max="100" value="32">32%</progress>
:
// <progress id="progress" value="0" max="10"></progress> const timerId = setInterval(() => { progress.value += 1 if (progress.value === progress.max) { progress.remove() clearInterval(timerId) } }, 1000)
output
output
.
:
for
— ,form
—form
,output
name
—output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="25" />
+
<input type="number" id="b" value="50" />
=
<output name="x" for="a b">75</output>
</form>
picture
picture
( ).
(viewport width) .
picture
: source
img
.
source
-, . img
source
.
srcset
, - — media
.
<picture>
\<source media="(min-width:768px)" srcset="big.jpg"/>
\<source media="(min-width:480px)" srcset="small.jpg"/>
<img src="default.jpg" alt="" style="width:auto;"/>
</picture>
template
template
, .
, , ( ).
template
JavaScript
.
<template>
<h1></h1>
<p> - </p>
</template>
<button id="button"> </button>
((body, { content }) => { button.onclick = () => { body.append(content.cloneNode(true)) } })(document.body, document.querySelector('template'))
time
time
( ).
datetime
.
<p> , <time datetime="2000-01-01 00:01"> 2000 </time> , , , . , <time datetime="3000-01-01 00:01"> 3000 </time>, </p>
noscript
noscript
, , JavaScript
. head
, body
. noscript
link
, style
meta
.
<script>
document.write(' ... ?')
</script>
<noscript>, JavaScript</noscript>
""
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="" />
</header>
<aside>
<h2>Aside Title</h2>
<p>Aside Content</p>
</aside>
<main>
<article>
<h2>Atricle Title</h2>
<section>
<h3>Section Title</h3>
<p>Section Content</p>
</section>
</article>
<div>
<section>
<h2>Section2 Title</h2>
<p>Section2 Content</p>
</section>
<section>
<p>Section3 Content</p>
</section>
</div>
</main>
<footer>
<nav>
<ol>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ol>
</nav>
<div>
<p>Block text & <span>inline text</span></p>
</div>
</footer>
</body>
<p>
<b></b>,
<strong> ""</strong>,
<i>""</i>,
<em> </em>,
<small></small>,
<del> </del>,
<ins> </ins>,
<u></u>
<s></s>.
<q> </q>,
<kbd> </kbd>,
<samp> </samp>.
<sup> </sup>
<sub> </sub>.
, <mark></mark>.
<wbr />.
<br /> <hr /> .
</p>
/
.
<form
action="URL"
autocomplete="on / off"
enctype=""
id="form"
method="GET / POST"
name="form"
novalidate
>
<fieldset>
<legend>Title</legend>
<label for="first_name">:</label>
<input type="text" id="first_name">
<label>:
<input type="text">
</label>
</fieldset>
<select
autofocus
disabled
form="form"
multiple
name="select"
required
size="10"
>
<optgroup label="Group1">
<option
value="option1"
disabled
label="option1"
></option>
<option value="option2" selected></option>
</optgroup>
<optgroup label="Group2" disabled>
<option value="option3"></option>
</optgroup>
<option value="option4"></option>
</select>
<textarea
autofocus
cols="30"
disabled
form="form"
maxlength="50"
name="textarea"
placeholder=" ..."
readonly
required
rows="10"
wrap="hard / soft"
></textarea>
<button
type="submit"
autofocus
disabled
form="form"
formaction="URL"
formenctype=""
formmethod="GET / POST"
formnovalidate
name="submit"
>
</button>
<button type="reset"> ( )</button>
<button type="button"> </button>
</form>
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> ( )
<input type="time">
<input type="url">
<input type="week">
:
accept
— MIME- (type="file"
). :, , .png
,audio/*
,video/*
,image/*
,, , json
alt
—autocomplete
—on / off
autofocus
checked
—type="checked"
type="radio"
disabled
form
formaction
—type="submit"
type="image"
formenctype
—type="submit"
type="image"
. :application/x-www-form-urlencoded
,multipart/form-data
,text/plain
formmethod
—type="submit"
type="image"
(get / post
)formnovalidate
—formtarget
— , , (type="submit"
type="image"
). :_blank
,_self
,_parent
,_top
,
height
— (type="image"
)list
max
— ( )maxlength
— ( )min
— ( )minlength
— ( )multiple
—name
pattern
—placeholder
readonly
required
size
— ,src
— , (type="image"
)step
— ()min
max
type
value
width
— (type="image"
)
:
<form>
<input
type="email"
id="email"
name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
required
/>
<input
type="password"
id="password"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title=" 8 , () "
required
/>
<input type="submit" />
</form>
<table>
<caption>
Table Title
</caption>
<colgroup>
<col span="2" />
<col />
</colgroup>
<thead>
<tr>
<th
abbr="H1"
colspan="2"
rowspan="2"
scope="col / colgroup / row / rowgroup"
>
Heading1
</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</tfoot>
</table>
colgroup
col
.
HTML-. . map
area
, ( , ..), . , svg
canvas
, , ( ).
10% !
