Repozytorium Web Developera

Znaczniki i metadata HTML

Wykaz wszystkich znaczników: strona 1-2 i strona 3-4 (elementy liniowe, blokowe, zastępowalne, tabeli itd.).

Przydatne linki

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>