Please enable JavaScript.
Coggle requires JavaScript to display documents.
Front-End training (HTML (Document Elements (Tags: html (Set primary…
Front-End training
HTML
Document Elements
Tags: html
Set primary language for document.
<html lang="en"></html>
Document Metadata
Tags: head, title, base, link, meta, style
Must have:
meta attributes:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<meta name="author" content="Roman Gorislavski">
<meta name="description" content="bla..bla..">
name="description (application-name/author/keywords/generator)"
<meta name="referrer" content="no-referrer-when-downgradeorigin-when-cross-origin)
http-equiv="refresh (default-style/set-cookie/content-security-policy)"
content="300"
refresh. set-cookie
Base
sets base location, which will be used in future as relative url starting point and will deside how one is open (in same or new tab or other way)
<base href="/folder/" target="_blank">
Other target options: _self (default), _parent, _top, framename
CSS
All links are downloaded anyway.
Link
that loads always CSS (no title or media).
<link rel="stylesheet" href="default.css" type="text/css">
Link
that loads for printing CSS (no title).
<link rel="stylesheet" href="print.css" type="text/css" media="print">
Link
that loads CSS by default pick(no media).
<link rel="stylesheet" href="default.css" type="text/css" title="default">
Link
that loads CSS on user pick (no media).
<link rel="alternate" stylesheet" href="fancy.css" type="text/css" title="fancy">
Feed
Link
that gives syndication feed to current page.
Atom format is newer than RSS format.
<link rel="alternate" href="https://www.theregister.co.uk/headlines.atom" type="application/atom+xml" >
Favicon
Default icons are size of 16 and 32 px and png format.
Used to be used favicon.ico format, which is still put at domain root.
SVG format is also supported.
<link rel=icon href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" >
Alternate language
Show location of translations
<link rel="alternate" href="/et/Roman" hreflang="et" type="text/html" >
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
Alternate PDF
<link rel=alternate href="/et/Roman/pdf" hreflang=en type=application/pdf title="English PDF">
Author
Refer as mail or other page to owner or maker of website
<link rel="author" href="mailto:juku@mail.ee" >
Help
For page as a whole
<link rel="help" href="help/topic.html" >
License
License for <main> content
<link rel="license" href="https://www.opensource.org/licenses/mit-license.php">
Search
Only for open search
<link rel="search" href="search.html">
Sequential page linking
<link rel="prev" href="Roman/01.html">
<link rel="next" href="Roman/03.html">
(preload preconnect, prerender prefetch dns-prefetch pingback serviceworker )
Sections
Tags: body, article, section, nav, aside, h1 to h6, header, footer No special attributes.
body attributes:
onhashchange="renew()"
onoffline="update(true)"
ononline="update(false)"
Grouping Content
Tags: p, address, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, main, div
blockquote -> cite
Text Level Semantic
Tags: a, em, small, s, cite, q, dfn, abbr, ruby, rb, rt, rtc, rp, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, bdi, bdo, span, br, wbr
Edits
Tags: ins, del
Embedded Content
Tags: picture, source, img, iframe, embed, object, param, video, audio, track, map, area, math, svg
Tabular data
Tags: table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
Forms
Tags: form, label, input, button, select, datalist, optgroup, option, textarea, output, progress, meter, fieldset, legend
Interactive Elements
Tags: details, summary, dialog
Scripting
Tags: script, noscript, template, canvas
Special Tags
<!DOCTYPE html>
<!-- -->
Always empty <element>
area, base, br, col, embed, hr, img, keygen, link, meta, param, source, track, wbr