Znaczniki i metadata HTML
Wykaz wszystkich znaczników: strona 1-2 i strona 3-4 (elementy liniowe, blokowe, zastępowalne, tabeli itd.).
Przydatne linki
- Dokumentacja HTML5
A vocabulary and associated APIs for HTML and XHTML
- Semantyka i dostępność stron HTML5 po polsku
Informacje na temat: HMTL5, WAI-ARIA, Dublin Core
- Generator Favicon
Elementy strukturalne i blokowe
Elementy strukturalne
main
header
nav
article
section
aside
footer
+ stare html
head
body
div
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="pl" dir="ltr" itemscope itemtype="http://schema.org/WebPage"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="pl" dir="ltr" itemscope itemtype="http://schema.org/WebPage"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="pl" dir="ltr" itemscope itemtype="http://schema.org/WebPage"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pl" dir="ltr" itemscope itemtype="http://schema.org/WebPage">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- *** -->
<!-- opis, słowa kluczowe -->
<title itemprop="name">Super hiper ważny wpis | Example.net - fajowy blog, na którym bloguję</title>
<meta name="description" content="Super hiper wpis na temat czegokolwiek">
<meta name="dcterms.description" lang="pl" content="Super hiper wpis na temat czegokolwiek">
<meta name="keywords" content="Bardzo ważne słowa kluczowe">
<meta name="dcterms.subject" lang="pl" content="Bardzo ważne słowa kluczowe; rozdzielone średnikiem">
<!-- *** -->
<!-- relacje -->
<meta name="author" content="Mateusz Roth <mateusz.roth@gmail.com> (http://mateuszroth.pl)">
<link rel="alternate" type="application/rss+xml" title="Wpisy na RSS" href="http://example.net/feed">
<link rel="alternate" type="application/atom+xml" title="Wpisy na ATOM" href="http://example.net/atom">
<link rel="index" title="Strona główna" href="http://example.net">
<link rel="prev" title="Jakiś hiper poprzedni wpis" href="//example.net/Jakis-hiper-poprzedni-wpis">
<link rel="next" title="Jakiś super następny wpis" href="//example.net/Jakis-super-nastepny-wpis">
<link rel="canonical" itemprop="url" href="//example.net/Super-hiper-wazny-wpis">
<link rel="pingback" href="//example.net/xmlrpc.php">
<!-- *** -->
<!-- opis strony Facebook OG-->
<meta property="og:title" content="GET YOUR QUEST!">
<meta property="og:site_name" content="Qapp">
<meta property="og:url" content="https://getqapp.com/">
<meta property="og:description" content="Dzięki Qapp wykonanie każdego zadania stanie się niezapomnianą przygodą! Wyobraź sobie, że otrzymujesz odznaki za nauczenie się nowej rzeczy, grasz w gry w trakcie dowolnego wydarzenia i wymieniasz zdobyte punkty na nagrody lub zapraszasz do rywalizacji znajomych, by wspólnie pobić dowolny rekord. Zamieniasz codzienne czynności w zabawę i przyjemność. Tym właśnie jest Qapp. Aplikacją zamieniającą zadania w gry i nagradzającą Użytkowników odznakami.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://qapp.pl/Facebook_Share_1200x630.png" />
<meta property="og:image" content="https://qapp.pl/Facebook_Share_630x315.png" />
<!-- *** -->
<!-- aplikacja ms -->
<meta name="application-name" content="Super hiper blog">
<meta name="msapplication-tooltip" content="Niesamowity blog o niesamowitych sprawach">
<meta name="msapplication-starturl" content="http://example.net">
<meta name="msapplication-window" content="width=1024;height=768">
<!-- *** -->
<!-- ikony i kolory -->
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#006991">
<!-- Windows, Windows Phone -->
<meta name="msapplication-navbutton-color" content="#006991">
<meta name="msapplication-TileColor" content="#006991">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-status-bar-style" content="#006991">
<!-- icons -->
<link rel="apple-touch-startup-image" href="/startup.png">
<!-- apple-touch-startup-image: the image must be 320 x 480 pixels and in portrait orientation -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<!-- apple-touch-icon: if no sizes attribute is set, the element’s size defaults to 60 x 60 -->
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<!-- CDN HTML5Shiv -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!-- *** -->
<!-- style i skrypty -->
<link rel="stylesheet" href="//example.net/css/style.css">
</head>
Plik manifest.json
:
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Obrazy
picture
Biblioteka picturefill.js jest dostępna pod adresem: https://github.com/scottjehl/picturefill.
Biblioteka do automatycznego tworzenia obrazów w odpowiednich rozmiarach dla poszczególnych urządzeń: http://adaptive-images.com/.
<script>
document.createElement("picture");
</script>
<script src="picturefill.js" async></script>
// The async attribute makes the script non-blocking, allowing the rest of the page to load while it works.
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="runner-wide.jpg" media="(min-width: 1000px)">
<source srcset="runner-narrow.jpg" media="(min-width: 500px)">
<!--[if IE 9]></video><![endif]-->
<img src="runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of a man running along a pier at night, with a harbour in the background">
</picture>
figure
i figcaption
Służą do umieszczania na stronie obrazków z podpisami.
<figure>
<img src="zrodlo" alt="podpis" />
<figcaption>podpis</figcaption>
</figure>
img
Zalecane atrybuty to: src, alt, title, width, height
.
alt
Wszelkie obrazy muszą mieć zdefiniwany atrybut alt
, np. alt="Zdjęcie mamy"
. Warto też dodać atrybuty title, width, height
.
base64
Obrazy warto zamieszczać w kodowaniu base64, ponieważ są wczytywane one wraz z całym dokumentem, np. <img src="data: image/jpeg;base64, A....pAAAB" alt="" />
float
- CSS
Do opływania tekstu wokół obrazu służy atrybut CSS float
, np. float: left;
Inne elementy blokowe
Audio
<audio controls="controls">
<source src=" " type="audio/wav" />
<source src=" " type="audio/mpeg" />
Brak obsługi
</audio>
Wideo
Atrybuty: src, controls, height, width, loop, autoplay
<object type="application/x-shockwave-flash" data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
</object>
Listy nieuporządkowane
<ul><li></li></ul>
Listy uporządkowane
<ol><li></li></ol>
Listy definicji
<dl><dt></dt><dd></dd></dl>
Cytowany długi fragment
<blockquote></blockquote>
Tekst preformatowany
<pre></pre>
Elementy liniowe
Cytowany krótki fragment
<q></q>
Źródło cytatu
<cite></cite>
Skrót
<p><abbr title="magister">mgr</abbr> Jan Kowalski</p>
Definicja
<dfn>
Kombinacja klawiszy
<kbd>
Pogrubienie/wyróżnienie
<strong>
Pochylenie tekstu
<em>