Kluczowe elementy

Element to wszytko pomiędzy tagami <[nazwa]> i <[/nazwa]> wraz z nimi, jeżeli istnieją. Wielkość znaków w tagach nie ma znaczenia, w przeciwieństwie do XHTML.
Najważniejsze z nich to:

<!DOCTYPE html> — deklaracja, że dokument jest w standardzie HTML5
<html>...</html> — w tym przedziale zawiera się cały dokument
<head>...</head> — tutaj znajdują się metadane
<title>...</title> — nazwa dokumentu
<body>...</body> — zawartość dokumentu

Obecnie w wersji HTML4 i HTML5 łącznie istnieje 119 tagów, przynajmniej tyle podaje w3.org.
Do każdego elementu HTML możliwe jest dodanie atrybutów — cech elementu. Dodanie atrybutu (cechy elementu) wygląda następująco:
<[nazwa] [atrybut]=[wartość_atrybutu]>

w3.org podaje 168 atrybutów w HTML4 i HTML5 łącznie. Globalne atrybuty mogą być nadane każdemu elementowi w HTML. W HTML4 powstała aktualna grupa atrybutów zdarzeniowych. W tym artykule nie znajdą się opisy atrybutów, które w HTML5 wyszły z użycia.
Istnieją atrybuty, które funkcjonują bez żadnych wartości, tzn. samo ich zapisanie wystarcza. Jeśli przy atrybucie znajduje się znak "*", to nie trzeba podawać żadnej wartości. Co prawda, możliwe jest nadanie wartości o takiej samej nazwie co atrybut i jest to wymagane w XHTML, ale to jest poradnik HTML!

Paragraf

Paragraf tekstu opisany jest przedziałem <p>...</p>.
Wewnątrz znajdować się może przerwa — nowa linia (ang. line break) <br>.
W HTML można znaleźć <wbr> (ang. Word Break Opportunity), które dzieli tekst tylko wtedy, jeżeli nie mieści się w jednej linii.

Nagłówki

Nagłówek (ang. header) opisany jest przedziałami:

<h1>...</h1>
...
<h6>...</h6>

h1 jest domyślnie najbardziej wyróżniony. h4 ma wielkość znaków jak zwykły tekst.
Przykłady (narzuciłem domyślną wartość font-size):

To jest nagłówek h1

To jest nagłówek h2

To jest nagłówek h3

To jest nagłówek h4

To jest nagłówek h5

To jest nagłówek h6

Styl

Styl w HTML to atrybut danego elementu informujący, w jaki sposób element ma być wyświetlany. Styl można określić na trzy sposoby, używając:

atrybutu style
definicji stylu w <head>
pliku CSS

Atrybut stylu może posiadać więcej niż jedną właściwość, które oddzielane są średnikiem. Przykład kodu dodania do paragrafu atrybutu style, który sprawi, że wyświetlany tekst będzie w kolorze niebieskim i czcionce Courier New:
<p style="color:rgb(0,0,255);font-family:'Courier New';">

Te same formatowanie można uzyskać za pomocą <style> w <head>:

<style>
 p {color:blue; font-family:'Courier New';   }
</style>

Właściwości stylu będą omawiane powierzchownie, napisałem osobny artykuł o formatowaniu CSS, w którym wszystkie właściwości są opisane. W HTML4 możliwe jest używanie niektórych elementów stylu jako osobnych atrybutów, jednak w HTML5 nie jest to już wspierane.
Przykład kodu:


<!-- HTML4 -->
<p align="center" style="color:rgb(255,25,2);">...</p>
<!-- HTML5 -->
<p style="align:center; color:rgb(255,25,2);">...</p>

Formatowanie

Oprócz definiowania stylów możliwe jest formatowanie tekstu wewnątrz elementów. Tak sformatowany tekst jest traktowany jako osobny element

<b>...</b> — pogrubienie tekstu; podatrybut stylu font-weight równy bold
<strong>...</strong> — wyróżnienie tekstu; podatrybut stylu font-weight równy bold
<i>...</i> — pochylenie tekstu; podatrybut stylu font-style równy italic
<em>...</em> — wyeksponowanie tekstu; podatrybut stylu font-style równy italic
<cite>...</cite> — pochylenie tekstu, powinno zawierać tytuł jakiegoś dzieła; podatrybut stylu font-style równy italic
<address>...</address> — pochylenie tekstu, powinno zawierać informacje o autorze; podatrybut stylu font-style równy italic i display równy block
<mark>...</mark> — zaznaczenie tekstu; podatrybut stylu color równy black i background—color równy yellow
<small>...</small> — pomniejszenie tekstu; podatrybut stylu font-size równy smaller
<sub>...</sub> — indeksowanie dolne tekstu; podatrybut stylu font-size równy smaller i vertical-align równy sub
<sup>...</sup> — indeksowanie górne tekstu; podatrybut stylu font-size równy smaller i vertical-align równy super
<del>...</del> — przekreślenie tekstu, można dodać atrybuty: cite zawierający powód usunięcia tekstu; datetime z czasem usunięcia; podatrybut stylu text-decoration równy line-through
<ins>...</ins> — podkreślenie tekstu, można dodać atrybuty; podatrybut stylu text-decoration równy underline cite zawierający powód zmiany/dodania tekstu; datetime z czasem dodania
<bdo dir=["ltr"|"rtl"]>...</bdo> — zmiana kierunku wyświetlania tekstu
<abr title=[nazwa]>...</abr> — (skrót od abbreviation) pomaga wyszukiwarkom, kiedy ktoś szuka informacji, wpisując pełną nazwę akronimu zawartego w tym elemencie
<time datetime=[data czas]>...</time> — pomaga wyszukiwarkom i jest często używane do kodowania informacji w tekście, by później użyć jej w skrypcie
<ruby>...</ruby> — wydziela mały dodatkowy obszar tekstu, by móc opisać znaczenie lub wymowe użytych znaków. Opis/wymowa powinna być zawarta w <rt>...</rt> i wtedy będzie wyświetlana nad znakiem. Jeżeli <ruby> nie jest obsługiwana, znaki pojawią się po kolei i wtedy tekst zawarty w <rp>...</rp> będzie wyświetlany, często używa się tego jako zastępczych nawiasów (jeżeli brzmi skomplikowanie, zobacz przykład)
<dialog [open]>...</dialog> — wyświetla komunikat, domyślnie na środku linii tekstu, ale tylko wtedy gdy posiada właściwość open

Istnieje specjalne formatowanie, które powstało do oznaczenia tekstu jako kod, formuła matematyczna etc.

<code>...</code> — kod (programu); tekst z czcionką o stałej szerokości znaków (zazwyczaj czcionka Courier New); nie zachowuje białych znaków
<kbd>...</kbd> — dane wejściowe (dla programu); tekst z czcionką o stałej szerokości znaków
<samp>...</samp> — dane wyjściowe (generowane przez program); tekst z czcionką o stałej szerokości znaków
<var>...</var> — zmienna; podatrybut style font-style równy italic

Przykłady:

<b>:
Pogrubienie tekstu
<b>Pogrubienie tekstu</b>
<strong>:
Wzmocnienie tekstu
<strong>Wzmocnienie tekstu</strong>
<i>:
Pochylenie tekstu
<i>Pochylenie tekstu</i>
<em>:
Wyeksponowanie tekstu
<em>Wyeksponowanie tekstu</em>
<cite>:
Clonk Rage
<cite>Clonk Rage</cite>
<address>:

Redagował Morgl.
Więcej na:
sea.RwlRwlRwl.fish
Khaz Modan, Menethil Harbor
Azeroth
<address> Redagował <a href="https://wow.gamepedia.com/Morgl_the_Oracle" rel="external noopener"> Morgl</a>.<br> Więcej na:<br> sea.RwlRwlRwl.fish<br> Khaz Modan, Menethil Harbor<br> Azeroth </address>
<mark>:
Zaznaczenie tekstu
<mark>Zaznaczenie tekstu</mark>
<small>:
Pomniejszenie tekstu
<small>Pomniejszenie tekstu</small>
<sub>:
_{Indeks dolny}
<sub>Indeks dolny</sub>
<sup>:
^{Indeks górny}
<sup>Indeks górny</sup>
<del>:
~~Usunięty tekst~~
<del>Usunięty tekst</del>
<ins>:
Wstawiony tekst
<ins>Wstawiony tekst</ins>
Tekst pisany od prawej do lewej
<bdo dir="rtl">Tekst pisany od prawej do lewej</bdo>
Przykład skrótowca: RWLRWLRWLRWL!
Przykład skrótowca: <abr title="The more, the merrier!">RWLRWLRWLRWL!</abr>
Ten tekst zawiera informacje o czasie, kiedy został napisany
Ten tekst zawiera informacje o <time datetime="2019-05-30 13:16">czasie</time>, kiedy został napisany
漢(ㄏㄢˋ)
<li><ruby>漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby></li>
BEZ UWAGI! TO NIE JEST WAŻNY KOMUNIKAT

<dialog open>BEZ UWAGI! TO NIE JEST WAŻNY KOMUNIKAT</dialog>
<code>:
#include <iostream> using namespace std; int main() { cout << "Hello HTML!" << endl; return 0; }
<code> #include <iostream><br> using namespace std;<br> int main()<br> {<br> cout << "Hello HTML!" << endl;<br> return 0;<br> } </code>
53, 52, 94, 93, ry, ba
<kbd>53, 52, 94, 93, ry, ba</kbd>
55, 54, 96, 95, śź, ćb
<samp>55, 54, 96, 95, śź, ćb</samp>
liczba_złowionych_rybek
<var>liczba_złowionych_rybek</var>

Cytowanie

Nie wiem dokładnie po co jest cytowanie, oprócz czasem zmienionego formatowania, być może pomaga wyszukiwarkom prowadzić dokładniejsze wyszukiwania ^__-(o_o)-_^_
Na stronie w3.org można wyczytać taką informację o atrybucie cite:

User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g: by server-side scripts collecting statistics about a site's edits), not for readers.

<q>...<q> — cytowanie krótkie
<blockquote>...</blockquote> — cytowanie blokowe

Cytowanie krótkie otacza tekst cudzysłowem, którego użytkownik nie może skopiować.
Cytowanie blokowe umieszcza tekst w bloku z własnym marginesem.

Do elementów:

<blockquote>
<q>

możliwe jest dodanie atrybutu cite, który w założeniu ma posiadać informacje o źródle cytatu
Przykład:

Master Yoda, during his teaching, raises fallen X-wing from the Dagobah swamp using force.

Luke: I don't believe it.
Yoda: That is why you fail.

Komentarze

W HTML-u komentarze, czyli nieaktywny/niewyświetlany tekst/element zapisuję się tak:

Wg. mnie bardzo niewygodny sposób.

Kolory

W atrybucie stylu, dla każdego elementu HTML można podać kolory:

tekstu, za pomocą color
tła, za pomocą background-color
obramowania, w trakcie definiowania border

Przykłady:

<i style="color:Blue;">...</i>
<body style="background-color:rgb(50,48,47);">...</body>
<h1 style="border:10px solid hsla(60,30%,60%, 0.4);">...</h1>

W HTML istnieje 140 zdefiniowanych kolorów, oprócz nich można wybrać własne, mając do dyspozycji łącznie zazwyczaj 16777216 kolorów za pomocą funkcji rgb, rgba, hsl, hsla.

rgb(r,g,b) — r, red: 0-255; g, green: 0-255; b, blue: 0-255;
rgba(r,g,b,a) — r, red: 0-255; g, green: 0-255; b, blue: 0-255; a, alpha: 0-1 (zmiennoprzecinkowe);

hsl(h,s,l) — h, hue: 0-360; saturation: 0-100; l, lightness: 0-100;
hsla(h,s,l,a) — h, hue: 0-360; saturation: 0-100; l, lightness: 0-100; a, alpha: 0-1 (zmiennoprzecinkowe)

Komputery mogą wyświetlać kolory, będące mieszanką czerwonego (red), zielonego (green) i niebieskiego (blue) koloru, w formacie rgb — gdzie rgb(0,0,0) to brak (kolor monitora, czarny) koloru, a rgb(255,255,255) tworzy barwę białą.
Bardziej przyjazny format dla człowieka to hsl. hsl(30, 50, 50), kolor znajduje się 30° na palecie barw, jest w 50% nasycony i w 50% jasny. Hsl jest konwertowany na rgb przez maszynę i dopiero wyświetlany.
Do obu formatów możliwe jest dodanie kanału przezroczystości — alfa, który jest liczbą zmiennoprzecinkową w zakresie od 0 do 1.

Hiperłącza

Poprzednik HTML, ENQUIRE, miał jedną kluczową wadę: istniejące w nim linki, łączenia dokumentów, po naciśnięciu których byliśmy przekierowani do innego dokumentu (zwanego "kartą" w ENQUIRE), musiały być uaktualniane z każdą zmianą owego dokumentu. Obecnie możliwe jest tworzenie niezależnych dokumentów, do których można załączać linki do stron rozrzuconych po całym Internecie, bez martwienia się o to, czy pojutrze link będzie nieważny.

<a href="[złącze]">...</a> — link do strony podanej w [złącze]. Jeżeli złącze wskazuje jedynie podfolder, warto na jego zakończeniu dodać znak /, w przeciwnym razie (zazwyczaj) zostaną wygenerowane dwa zapytania do serwera. Pierwszy dodaje ten znak, który po angielsku nazywany jest trailing slash, a dopiero drugi, właściwy zapyta serwer o dostęp do pliku o domyślnej nazwie w tym podfolderze.

Linki mogą znajdować się na prawie każdym elemencie w pliku HTML, mogą przekierowywać do plików lokalnych, nazwanych elementów w obecnym dokumencie albo innych plików w sieci.
Przykłady:
Ten link otworzy domyślny plik na stronie https://wow.gamepedia.com w podfolderze Murloc

Ten link otworzy podany w złączu konkretny plik

Ten link otworzy plik o podanej nazwie w obecnym folderze

Ten link otworzy plik o podanej nazwie w podfolderze o nazwie "WeirdMurlocs" obecnego folderu

Ten link otworzy plik o podanej nazwie w podfolderze o nazwie "WeirdMurlocs" w głównym folderze

Ten link otworzy plik o podanej nazwie w podfolderze o nazwie "WeirdMurlocs" w folderze dwa foldery wyżej od obecnego

Ten link przekierowuje do elementu nazwanego "Cool_Murlocs" w obecnym dokumencie

Nazywanie elementu to dodanie unikalnego atrybutu id do niego.
Przykład:
<p id="Cool_Murlocs">

Linki posiadają 4 stany:

link — domyślny stan linku
visited — gdy link był już odwiedzony choć raz
hover — gdy kursor myszki najeżdża na link
active — gdy kursor myszki najeżdża na link i wciśnięty jest lewy przycisk myszy

Możliwe jest zmienienie stylu poszczególnego stanu linku w <style>:
a:[stan] { ... }
Przykład:

<head>
 <style>
 a:visited   {
 color:rgb(255,0,0);
  }
 </style>
</head>

Linki mogą posiadać atrybuty:

download — naciśnięcie linku pobierze plik pod nazwą będącą wartością tego atrybutu
hreflang — wartością jest dwuznakowy kod języka, w którym zostanie otworzony dokument
ping — pinguje serwery, których złącza oddzielone spacjami są wartością atrybutu. Pingowanie to wysyłanie (prawie) pustego pakietu do serwera, chcąc sprawdzić, czy odpowiedź od serwera uzyskamy i w jakim czasie. Często używane do rejestrowania adresów IP.
rel — opisuje relację między obecnym dokumentem i plikiem w linku, możliwe wartości:
- alternate — alternatywna reprezentacja tego dokumentu
- author — złącze do autora tego dokumentu
- bookmark — zaznacza, że link odnosi się do elementu o unikalnym identyfikatorze w obecnym dokumencie i w zamyśle jest niezmienny
- external — plik w złączu nie jest częścią obecnej strony internetowej
- help — dokumentacja służąca pomocą
- license — plik informujący o prawach autorskich obecnego dokumentu
- next — następny dokument w serii
- nofollow — strona nie zostanie uwzględniona w ocenie jakości, jaką prowadzą wyszukiwarki
- noreferrer — zabrania przesyłu adresu obecnego dokumentu, na polski: strona docelowa nie wie, skąd przybyliśmy
- noopener — uniemożliwia stronie modyfikację obecnego dokumentu za pomocą skryptu, bardzo często stosowane, gdy atrybut target jest różny od _self
- prev — poprzedni dokument w serii
- search — narzędzie do wyszukiwania w obecnym dokumencie
- tag — link jest oznaczeniem danej części dokumentu

Do linków możliwe jest dodanie atrybutu target, który mówi, gdzie zostanie otworzony link. Możliwe wartości tego atrybutu:

_self — otwiera link w obecnym oknie/karcie (domyślne ustawienie)
_blank — otwiera link w nowym oknie/karcie
_parent — otwiera link w ramce, w której się zawiera
_top — otwiera link w <body> obecnego dokumentu
[nazwaramki] — otwiera link w ramce o podanej nazwie

Obrazy

HTML pozwala wyświetlać statyczne i animowane obrazy zawarte w złączach, które można podać na takich samych zasadach jak w linkach, z wyjątkiem przekierowywania do nazwanych elementów. Obrazy nie posiadaja końcowego tagu (NIE pisze się </img>)

<img src=[złącze] alt=[text]> — wyświetla obraz po wczytaniu go z linku z atrybutu src, jeżeli to niemożliwe — wyświetla text zawarty w alt.
O ma gawd - it's a goblin! Najprzydatniejsze formatowania stylu obrazów to definiowanie szerokości width, wysokości height i przylegania float. To ostatnie może posiadać (funkcjonalną) wartość right lub left. Ciekawa funkcja w HTML to mapy, czyli linki wewnątrz obrazu. Obraz goblina przekieruje do dwóch różnych stron, jeżeli naciśniesz na jego głowę lub na maczugę. Kod HTML goblina i mapy (która może być zdefiniowana w dowolnym miejscu) to:
<img src="https://vignette.wikia.nocookie.net/gothic/images/a/a1/Goblin_G1_%28by_Wojciech_Wawrzy%C5%84czak%29.png/revision/latest/?cb=20170521204714&path-prefix=pl" alt="O ma gawd - it's a goblin!" style="width:177px;height:218px;float:left;" usemap="#goblin"> <map name ="goblin"> <area shape="circle" coords="56,27,23" href="https://gothic-pl.gamepedia.com/Goblin"> <area shape="poly" coords="28,132, 37,142, 162,39, 175,11, 159,1, 129,18" href="https://gothic-pl.gamepedia.com/Laga"> </map>
HTML5 pozwala na grupowanie elementów graficznych i estetycznych w <figure>...</figure> oraz dodawanie im opisu za pomocą <figcaption>...</figcaption>, który można wstawić w dowolnym miejscu pomiędzy <figure> a </figure>. Przykład:

Tablice

Aby stworzyć tablicę w HTML, należy użyć:

<table>...</table> — do definicji tabeli
<tr>...</tr> — do definicji wiersza w tabeli
<td>...</td> — do definicji komórki we wierszu tabeli

Przykład:

Class	Money	Inventory
Slayer	120gp

<caption>...</caption> — nadaje tytuł tablicy, który będzie wyświetlany nad nią; ten element musi znajdować się zaraz po definicji tablicy, by być aktywnym

Nagłówek w tablicy można utworzyć na dwa sposoby, jest on domyślnie pogrubiony i wyśrodkowany.

<th>...</th> — działa tak samo, jak td, tylko że tekst wewnątrz jest traktowany jako nagłówek
<thead>...</thead> — w tym przedziale znajdują się elementy tablicy, które są traktowane jako nagłówek

Drugą metodę powinno stosować się wraz z:

<tbody>...</tbody> — wnętrze tablicy
<tfoot>...</tfoot> — stopka tablicy

Do komórek tablicy można dodać atrybuty:

colspan — komórka zajmuje więcej niż jedną kolumnę
rowspan — komórka zajmuje więcej niż jeden wiersz

Często formatowanie stylu tablic uwzględnia właściwości:

border — obramówka
border-collapse — możliwość sprawienia, że obramówki dwóch elementów będą nachodzić na siebie i pokrywać
border-spacing — odstęp pomiędzy komórkami tablicy (dodatkowy, licząc od krawędzi obramowania)
padding — wielkość zawartości komórki

Przykład zacnie poformatowanej tablicy:

Karta postaci
Nazwa gracza: Goblin
Inwentarz	Kasa	2gp
Inwentarz	Broń	Laga

Listy

W HTML możliwe jest tworzenie list elementów występujących jeden po drugim z możliwością automatycznego indeksowania. Listy w HTML domyślnie są lekko przesunięte w stronę czytania tekstu.

<li>...</li> — element listy, można wrzucić sobie tutaj wszystko, co się chce
<ul>...</ul> — (nieuporządkowana, ang. unordered) lista, która może posiadać specjalną właściwość w atrybucie stylu list-style-type o wartościach:
- disc — obok elementów pojawi się zapełnione kółko (domyślnie, wygląd jak tutaj)
- circle — obok elementów pojawi się kółko
- square — obok elementów pojawi się zapełniony kwadrat
- none — obok elementów nic się nie pojawi
<ol>...</ol> — (uporządkowana, ang. ordered) lista, która automatycznie numeruje elementy

Numerowanie elementów może być nie tylko przy użyciu cyfr arabskich, zmiana atrybutu type=[wartość] zmienia metodę numeracji, w zależności od [wartość]:

"1" — cyfry arabskie (domyślnie, wygląd jak tutaj)
"A" — alfabetycznie (wielkie litery)
"a" — alfabetycznie (małe litery)
"I" — cyfry rzymskie (wielkie litery)
"i" — cyfry rzymskie (małe litery)

Znak, od którego zaczyna się numeracja, można zmienić atrybutem start="[znak]"
Przykład nieuporządkowanej listy:

1/2 litra wody
4 łyżki domowego (albo gotowego) soku z dowolnych owoców
2 płaskie łyżki cukru
2-3 łyżki mąki ziemniaczanej

Przykład listy uporządkowanej:

2/3 wody zagotuj. Pozostałą wodę wymieszaj z sokiem, cukrem i mąką ziemniaczaną.
Wlej syrop do gotującej się wody – zmniejsz płomień pod garnkiem i mieszając (żeby nie było grudek), zagotuj. Gotuj 2-3 minuty – wystudź kisiel i zjedz ze smakiem.

Bloki

W HTML-u większość elementów jest wyświetlana jako blok zaczynający się na nowej linii, który swoją szerokością zajmuje całą stronę, a wysokość wyświetlanej zawartości determinuje wysokość bloku lub jako zawartość bloku.
Możliwe jest stworzenie sekcji blokowych lub zawartościowych, których zawartość może być dowolna.

<div>...</div> — sekcja blokowa
<span>...</span> — sekcja zawartościowa

Klasy

Klasy to specjalny atrybut, który może zostać wykorzystany przy porgramowaniu w JavaScript lub do tworzenia szablonów stylu, które definiuje się w sekcji <style> w <head> albo pliku CSS:
.[nazwa_klasy] {[właściwość_1];...[właściwość_n];}

Dodanie klas do elementu możliwe jest za pomocą atrybutu class="[klasa_1][spacja]...[klasa_n]".

Przykład definicji klasy i jej użycia:
 <head> <style> .code {color:rgb(73,234,252); font-family:"Iosevka Light"; font-size:18px; line-height:1.25; white-space:pre-wrap; margin:0 0 0 0;} </style> </head>  <body> <div class="code">Hello "code" class element</div> </body>

Podobnie można formatować unikalne elementy (z unikalnym atrybutem [id]) w <style> w <head>: #[id] {[właściwość_1];...[właściwość_n];}
Istnieje więcej możliwości wybierania elementów i ich formatowania, więcej w osobym artykule CSS.

Ramki

Ramka służy do wyświetlania zawartości innych stron.

<iframe src="[złącze]">...</iframe> — odpala dokument podany w [złącze] w ramce. Wygląda to tak:
Tutaj powinna być ramka

Ramka musi się kończyć zamykającym tagiem </iframe>, zawartość pomiędzy tymi tagami będzie wyświetlana w przypadku, gdy przeglądarka nie jest w stanie obsługiwać ramek.
Ramka, oprócz src i name, może posiadać atrybuty:

srcdic - zamiast URL w src można podać kod HTML strony w tym atrybucie
sandbox* - ogranicza interakcje w ramce, domyślnie nie posiada wartości i wtedy blokuje:
1. Wysyłanie formularzy
2. API
3. Wyskakujące okna
4. Dostęp do danych ze strony, z której jest ramka; ramka posiada inne pochodznie
5. JavaScript
6. Nawigację oknem czytającym stronę, w której zawiera się ramka
Atrybut sandbox może posiadać wartości oddzielone spacją, które znoszą restrykcje opisane powyżej, te wartości to (kolejność wartości odpowiada kolejności ograniczeń):
1. allow-forms
2. allow-pointer-lock
3. allow-popups
4. allow-same-origin
5. allow-scripts
6. allow-top-navigation

Skrypty

Skrypt to kod, który umożliwia manipulację dokumentem. Javascript, powszechnie używany język skryptu jest bardzo rozbudowany, napisałem o nim osobny artykuł.

<script src="[złącze]">...</script> — pomiędzy tagami znajduje się skrypt w JavaScript, alternatywnie można podać w [złącze] link do pliku ze skryptem.
np.:
Dodaj onomatopeje ryku nosorożca:

<noscript>...</noscript> — jeżeli przeglądarka nie obsługuje Javascript, zawartość między tymi tagami zostanie wyświetlona

Metadane

Metadane definuje się w sekcji <head> i są to elementy:

<title>...</title> — pomiędzy tagami powinien zawierać się czysty tekst, który zostanie wyświetlony jako tytuł zakładki, nazwa w ulubionych lub w wynikach wyszukiwania
<style>...</style> — odwołuję do rozdziału style
<script>...</script> — działa identycznie jak element <script> opisany w rozdziale skrypty
<base> — w atrybucie href ustawia adres obecnego folderu, domyślnie folderu, w którym znajduje się obecny dokument. Atrybut target ustawia wartość tego samego atrybutu we wszystkich linkach na podaną. Oczywiście możliwe jest nadpisanie
<link rel="[relacja]" href="[złącze] ">...</link> — łączy obecny dokument z plikiem podanym w [złącze] relacją zapisaną w [relacja]
<meta>...</meta> — zawiera różnorakie metadane, może posiadać atrybuty:
- charset — kodowanie znaków; atrybut nie powinien być użyty wraz z innymi atrybutami
- content — wartość metadanych o typie opisanym w http-equiv lub name
- http-equiv — ustawienie tego atrybutu oznacza, że ta metadana zapewnia informacje uwzględnione w nagłówku HTTP. Użycie tego atrybutu wyklucza name i wymaga content. Możliwe wartości:
  - content-type — nadal wspierany sposób na ustawienie kodowania znaków
  - default-style — domyślny wczytany plik CSS
  - refresh — wpisana liczba informuje, co ile sekund strona ma być odświeżana
- name — Określa typ metadanej. Użycie tego atrybutu wyklucza http-equiv i wymaga content. Możliwe wartości:
  - application-name — nazwa aplikacji, której częścią jest dokument
  - author — określa autora dokumentu
  - description — opis dokumentu, używany przez wyszukiwarki
  - generator — mówi, jaka aplikacja została użyta do wygenerowania dokumentu
  - keywords — słowa kluczowe informujące wyszukiwarkę jaką zawartość można znaleźć na tej stronie. Słowa oddziela się znakiem ","
  - viewport — content może zawierać takie właściwości oddzielone ",":
    - width — wyświetlana szerokość, może posiadać specjalną wartość device-width, będącą szerokością ekranu urządzenia wyświetlającego stronę
    - height — wyświetlana wysokość, może posiadać specjalną wartość device-height, będącą wysokością ekranu urządzenia wyświetlającego stronę
    - initial-scale — domyślna skala wyświetlania (zbliżenia)
    - minimum-scale — minimalna skala wyświetlania (zbliżenia)
    - maximum-scale — maksymalna skala wyświetlania (zbliżenia)
    - user-scalable — posiada wartość yes, gdy użytkownik może zbliżać lub oddalać albo no, gdy jest to zabronione; praktyka uniemożliwiania użytkownikowi zbliżania nie jest zalecana

Układ

Żeby ułatwić sobie formatowanie strony w CSS warto użyć elementów układu:

<header>...</header> — nagłówek
<nav>...</nav> — sekcja nawigacyjna
<section>...</section> — sekcja
<article>...</article> — osobny artykuł
<aside>...</aside> — zawartość poza zawartością (niezwiązane ze sobą, suwaki, etc.)
<footer>...</footer> — stopka
<details>...</details> — dodatkowe szczegóły
<summary>...</summary> — nagłówek dla szczegółów

Literały

Nie wszystkie znaki Unicode można zapisać w dokumencie, jeżeli jest innego formatu. Niektórych znaków nie da się użyć, ponieważ mają one znaczenie w HTML. Nie wszystkie znaki niedrukowalne jesteśmy w stanie wykorzystać w tekście.
Dla przykładu znaku "<" nie wolno zastosować, gdyż dla HTML jest to początek tagu. Znaku """ nie można zapisać w wartościach atrybutów, nie da się nigdzie wstawić twardej spacji.

W takiej sytuacji stosuje się literały, czyli sekwencję znaków w kodzie, które reprezentują żądany znak w tekście.
Schemat zapisu literałów:

&[nazwa_znaku]; — zapis literału za pomocą nazwy. Nie jest zagwarantowane, że przeglądarka będzie obsługiwać ten zapis
&#[numer_znaku]; — zapis literału za pomocą liczby
&#x[numer_znaku_hexadecimal]; — zapis literału za pomocą liczby w systemie szesnastkowym

Możliwe literały można znaleźć na stronie www.freeformatter.com

Przykłady:

¼, <, ♥
¼, <, ♥
¼, <, ♥

Formularze

W HTML możliwe jest utworzenie formularzy, czyli interaktywnej sekcji elementów. Dane użytkownika są przesyłane do serwera i przekierowane do skryptu PHP, napisałem o tym osobny artykuł. Atrybuty będą często się powtarzać, znak "%" oznacza, że wystąpił wcześniej, a sam znak jest linkiem do wcześniejszego opisu. Wszystkie elementy interaktywne mogą posiadać atrybuty zdarzeniowe. Warto powierzchownie wiedzieć, jakie możliwości mają formularze, ale przy pracy z nimi polecam używać tego lub innego poradnika, niżli je zapamiętywać. Lista tych elementów:

<form>...</form> — zawiera elementy interaktywne (wszystkie poniżej), bez zawarcia ich w <form>, nie będą (poprawnie) działać; dostępne atrybuty:
- accept-charset — określa dozwoloną czcionkę w formularzu
- action — URL, do którego zostaną wysłane dane
- autocomple — autouzupełnianie, czyli po ponownym wpisywaniu danych mogą zostać uzupełnione wpisywanymi wcześniej; posiada wartość on lub off
- method — metoda przesyłu danych, domyślną wartością jest get, dane są zapisywane w URL strony (które może mieć tylko 3000 znaków!). Pozwala to na zapisanie linku z od razu przesłanymi danymi (zapis dokonanego postępu), lecz z powodu łatwej dostępności nie wolno przekazywać tam poufnych informacji, do tego służy wartość post, wysyłająca zapytanie HTTP do serwera
- enctype — typ kodowania znaków w zapytaniu wygenerowanym, gdy używamy metody post; możliwe wartości:
  - multipart/form-data — brak kodowania
  - text/plain — spacje zostają zamienione na +
  - application/x-www-form-urlencoded — spacje zostają zamienione na +, a specjalne znaki zostają zapisane w postaci szesnastkowej
- name — nadaje nazwe elementowi; używane gdy potrzeba jest odniesieść się np. w JavaScriptcie
- novalidate - pojawienie się tego atrybutu w definicji formularza sprawi, że puste wartości będą dopuszczalne i istniejące atrybuty pattern, w elementach interaktywnych, zostaną zignorowane. W innych definicjach sprawi, że ta funkcja będzie dotyczyć tylko tego elementu
- target — miejsce, gdzie zostanie otworzony dokument z rezultatem przesłania danych, może posiadać wartości standardowe
<input>...</input> — do tego elementu można wpisywać dane; możliwe atrybuty:
- type — określa jakim elementem jest <input>, możliwe wartości ( nie wszystkie są wspierane):
  - button — przycisk
  - checkbox — okienko, które możne zaznaczyć
  - color — okienko ze zmienialnym kolorem
  - date — okienko, w którym można wybrać date
  - datetime-local — okienko, w którym można wybrać date i coś w stylu strefy czasowej, tylko że wpisuje się ją ręcznie w godzinach i minutach
  - email — okienko, w które można wpisać e-mail
  - file — przycisk, po naciśnięciu otwiera komunikat proszący o wybranie pliku
  - hidden — przechowuje dane, może być edytowane, ale nie przez użytkownika
  - month — okienko, w którym można wybrać rok i miesiąc
  - number — okienko, w które można wpisać liczbę
  - password — okienko, wpisane znaki są ukryte
  - radio — checkbox, w którym wybranie jeden opcji wyklucza resztę (o ile istnieją)
  - range — suwak horyzontalny
  - reset — przycisk, resetuje wszystkie inne <input> do wartości domyślnych
  - search — okienko, w które można wpisać szukany ciąg znaków
  - submit — przycisk, który przesyła wszystkie zapisane dane w formularzu
  - image — obrazek-przycisk, który przesyła dane tak samo, jak submit
  - tel — okienko, w którym można podać numer telefonu
  - text — domyślny typ, okno w które można wpisać jedną linię tekstu
  - time — okienko, w którym można wybrać czas
  - url — okienko, w które można wpisać adres URL
  - week — okienko, w którym można wybrać rok i tydzień
- %name
- value — (ang. wartość) ma różne znaczenia w zależności od typu:
  - dla typów button, reset, submit jest tekstem na przycisku
  - dla typów checkbox, radio, image wysyłane wartości, gdy elementy są aktywne
  - dla pozostałych typów jest to po prostu przechowywana obecnie wartość, czyli podanie jej w definicji elementu jest wartością domyślną
- accept — rozdzielone znakiem | rozszerzenie akceptowanych plików, gdy atrybut type posiada wartość file. Mogą to też być wartości specjalne:
  - audio/* — wszystkie pliki dźwiękowe
  - video/* — wszystkie pliki wideo
  - image/* — wszystkie obrazy
  - [typ_mediów] — typy, które można znaleźć na stronie www.iana.org (nagłówki, bez parametrów podanych niżej)
- alt — dla type równego image zachowuje się tak samo, jak dla obrazów
- %autocomplete
- autofocus* — w momencie załadowania formularzu, posiada focus
- checked* — dla typów checkbox, radio ten atrybut sprawia, że przy załadowaniu formularzu ten element jest zaznaczony
- dirname — wartość tego atrybutu musi być równa name.dir, wtedy wraz z tekstem zostanie przesłany kierunek pisania
- disabled* — ten atrybut sprawia, że element jest wyłączony — widoczny, ale nieinteraktywny
- form — możliwe jest zdefiniowanie tego elementu poza <form>, lecz żeby można było przesłać z niego dane, musi on należeć do jakiegoś formularza, którego id podaje się w tym atrybucie
- formaction — dla typów submit, image zawiera URL do pliku, który jednorazowo przetworzy odebrane dane, odpowiednik action w <form>
- formenctype — dla typów submit, image jednorazowo zmienia kodowanie. Odpowiednik enctype w <form>. Posiada standardowe możliwe wartości:
  - multipart/form-data — brak kodowania
  - text/plain — spacje zostają zamienione na +
  - application/x-www-form-urlencoded — spacje zostają zamienione na +, a specjalne znaki zostają zapisane w postaci szesnastkowej
- formmethod — dla typów submit, image jednorazowo narzuca metodę przesyłu danych, odpowiednik method w <form>
- formnovalidate* — dla typów submit, image, użycie tego elementu jednorazowo nada formularzowi atrybut novalidate, który działa identycznie, jak ten wpisywany przy definicji
- formtarget — dla typów submit, image jednorazowo zmienia miejsce docelowe wyświetlenia wyniku przetworzenia przesłanych danych, odpowiednik target w <form>
- height — dla typu image określa wysokość obrazka
- list — w synergii z elementem <datalist> tworzy okienko, do którego można wpisywać dane, z możliwością wybrania jednej z podpowiedzi
- max — dla typów przechowujących liczby lub datę, ten atrybut określa maksymalną wartość
- maxlength — maksymalna liczba znaków
- min — dla typów przechowujących liczby lub datę, ten atrybut określa minimalną wartość
- multiple* — sprawia, że w value można wpisać więcej niż jedną wartość, oddzieloną ",", chyba że typem jest file, wtedy pozwala na wybranie więcej niż jednego pliku
- pattern — posiada regułę w formularzu wyrażenia regularnego, który opisałem w artykule JavaScript, która ogranicza możliwe wpisane dane
- placeholder — szara podpowiedź w oknie, która znika wraz z wprowadzeniem czegokolwiek
- readonly* — można jedynie kopiować tekst z elementu, nie można nic wpisywać
- required — submit nie przekaże danych, jeżeli ten element jest pusty lub reguła wpisywania danych się nie zgadza z wprowadzonymi danymi
- size — szerokość elementu
- src — dla typu image zawiera URL do pliku z obrazkiem
- step — dla typów związanych z czasem number określa o ile zmieni się obecna wartość po naciśnięciu strzałki "w górę" lub "w dół"; dla type równego range określa co ile można
- width — dla typu image określa szerokość obrazu
<textarea>...</textarea> — pomiędzy tagami znajduje się domyślny tekst, który użytkownik może edytować; atrybuty:
- %autofocus*
- cols — szerokość okienka, domyślnie jedna kolumna jest w przybliżeniu równa jednemu znakowi
- %dirname
- %disabled*
- %form
- %maxlength
- %name
- %placeholder
- %readonly*
- %required*
- rows — wysokość okienka, liczba linii tekstu
- wrap — domyślna wartość soft przy wysyłaniu danych nie uwzględnia <span title="Znak jaki tworzy np.
  ", style="text-decoration:underline"> przerw na nową linię</span>, hard takie przerwy przesyła
<label>...</label> — wyświetla tekst obok dopuszczalnego elementu: <button>, <input>, <meter>, <output>, <progress>, <select> lub <textarea>, może posiadać atrybuty:
- for — posiada id elementu, z którym jest związany, nie wpływa na położenie, ale naciśnięcie elementu <label> spowoduje aktywacje tego powiązanego elementu
- %form
<fieldset>...</fieldset> — grupuje ze sobą elementy, rysując prostokąt wokół nich, atrybuty:
- %disabled*
- %form
- %name
<legend>...</legend> — działa tak samo jak <caption> dla <table>, czyli nadaje tytuł <fieldset>
<select>...</select> — pozwala wybrać jedną z opcji z listy; atrybuty:
- %autofocus*
- %disabled*
- multiple* — pozwala wybrać więcej niż jedną opcję
- %form
- %name
- %required*
- size — ilość jednocześnie wyświetlanych elementów
<option>...</option> — używane wewnątrz elementu <select>, jest jedną opcji do wybrania; atrybuty:
- %disabled*
- label — krótsza wersja tekstu wyświetlana po naciśnięciu strzałki obok listy opcji (która pokazuje dłuższą listę wyboru), nie wspierane przez Firefox
- selected* — czy przy załadowaniu ta opcja jest wybrana
- value — wybranie tej opcji przesyła taką wartość serwerowi
<optgroup>...</optgroup> — niewybieralny nagłówek w liście grupujący opcje; atrybuty:
- %disabled*
- label — krótsza wersja tekstu wyświetlana po naciśnięciu strzałki obok listy opcji (która pokazuje dłuższą listę wyboru), nie wspierane przez Firefox
<button>...</button> — przycisk, który może zawierać dowolną wartość; atrybuty:
- %autofocus*
- %disabled*
- %form
- formaction — zawiera URL do pliku, który przetworzy odebrane dane po naciśnięciu tego przycisku, analogicznie do typu button w <input>. Następne 4 atrybuty też działają tak samo, dlatego pozwolę sobie na odniesienie się do nich :).
- %formenctype
- %formmethod
- %formnovalidate*
- %formntype
- %name
- type — typ nadający funkcjonalność przyciskowi; możliwe wartości:
  - button — zazwyczaj domyślny typ, naciśnięcie nie wywołuje nic więcej, niż jest podane w atrybutach zdarzeniowych
  - submit — dodatkowo przesyła dane, analogicznie do <input> o typie submit
  - reset — dodatkowo resetuje wszystkie elementy interaktywne do wartości domyślnych
- value — domyślny tekst wyświetlany na przycisku
<datalist>...</datalist> — lista opcji wyświetlających się przy autouzupełnianiu. Te opcje to osobne elementy <option> zawarte pomiędzy tagami tego elementu.
<output>...</output> — wypisuje wartość zmiennej, która została stworzona w JavaScript, możliwe atrybuty:
- for — oddzielone spacją nazwy elementów, które wpływają na wyświetlany wynik
- %form
- %name

Przykłady <input>:

Przykłady <textarea>:

Tylko do odczytu

Przykłady <label>:

Angliszczański przycisk poniżej

Ten sam szpiegowski przycisk powyżej

Przykłady <fieldset> i <legend>:

Najważniejsze dane w życiu człowieka Imię Psa (Jego Majestatu, Wszechwładcy w Psim Domu), który nim włada:
Nadrasa Psa (Jego Majestatu, Wszechwładcy w Psim Domu), który nim włada:

Dane psiaka Imię psa:
Rasa obszczymura:

Przykłady <select>, <option> i <optgroup>:

Przykłady <button>:

Przykład <datalist>:

Przykład <output>:

Wsparcie HTML5

Za pomocą JavaScript możemy dodawać własne tagi:

<script>document.createElement("goblin")</script> — pozwala na tworzenie elementów za pomocą tagu goblin np.: <goblin>Ryszard</goblin>.

Jeżeli strona ma wspierać starsze przeglądarki, które nie posiadają standardu html5, jednym z rozwiązań jest stworzenie elementów o takiej samej nazwie, jak użyte elementy HTML5, jednak okazuje się, że w wersjach Internet Explorer starszych od wersji 9 niemożliwa jest zmiana stylu tak stworzonych elementów. Prostszym i rozwiązującym ten problem wyjściem jest dołączenie skryptu HTML5Shiv, którego kod źródłowy znajduje się tutaj.

Dynamiczna grafika

Najprostszą formą grafiki są ikony, czyli specjalna forma czcionki, która wyświetla obrazy w zależności od wpisanego tekstu, np.: , którego kod wygląda tak:
<i class="material-icons">cloud</i>.

SVG pozwala nam tworzyć obrazy wektorowo, które opisuję się za pomocą XML.
Wszystkie obrazy SVG zawierają się w <svg>...</svg> i ten element, oprócz atrybutów globalnych może mieć atrybuty width i height.
Za pomocą tego narzędzia można narysować takie figury:

<rect/> - rysuje prostokąt i może mieć atrybuty:
- width - szerokość figury
- height - wysokość figury
- x - pozycja horyzontalna figury
- y - pozycja werykalna figury
- rx - długość półosi elipsy prostopadłej do osi ox, która zastąpi rogi prostokąta (wygładzi)
- ry - długość półosi elipsy prostopadłej do osi oy, która zastąpi rogi prostokąta (wygładzi)
<circle/> - rysuje koło i może mieć atrybuty:
- cx - pozycja horyzontalna środka figury
- cy - pozycja werykalna środka figury
- r - promień figury
<ellipse/> - rysuje elipsę i może mieć atrybuty:
- cx - pozycja horyzontalna środka figury
- cy - pozycja werykalna środka figury
- rx - długość półosi elipsy prostopadłej do osi ox
- ry - długość półosi elipsy prostopadłej do osi oy
<line/> - rysuje linię i może mieć atrybuty:
- x1 - pozycja horyzontalna pierwszego punktu, przez który przechodzi linia
- y1 - pozycja werykalna pierwszego punktu, przez który przechodzi linia
- x2 - pozycja horyzontalna drugiego punktu, przez który przechodzi linia
- y2 - pozycja werykalna drugiego punktu, przez który przechodzi linia
<polyline/> - rysuje krzywą, czyli wiele linii składowych przechodzących przez podane punkty w atrybucie points. Podaje je się w takim formacie x₁,y₁ x₂,y₂ ... x_n-1,y_n-1 x_n,y_n
<polygon/> - rysuje wielokąt, którego wierzchołki podaje się w takim samym formacie, jak punkty kyrzywej, mianowicie x₁,y₁ x₂,y₂ ... x_n-1,y_n-1 x_n,y_n w atrybucie points
<path/> - najbardziej skomplikowany z elementów, który jest głownym powodem, dlaczego warto korzystać z programów do edycji SVG; w atrybucie d znajduje się lista punktów(format jak poprzednio) wraz z specjalnymi, jedno-literowymi oznaczeniami, które nadają poprzedzającym punktom specjalne znaczenie:
- M - porusza wirtualnym kursorem, bez rysowania czegokolwiek
- L - rysuje linię
- H - rysuje linię, lecz nadpisuje drugą współrzędną na obecną wirtualnego kursora, czyli mamy linię poziomą (horyzontalną)
- V - rysuje linię, lecz nadpisuje pierwszą współrzędną na obecną wirtualnego kursora, czyli mamy linię pionową (wertykalną)
- C - rysuje krzywą
- S - rysuje wygładzoną krzywą
- Q - rysuje kwadratową krzywą Béziera
- T - rysuje wygładzoną kwadratową krzywą Béziera
- A - rysuje eliptyczny łuk
- Z - zamyka ścieżkę
Wielkość znaku tych oznaczeń ma znaczenie: jeżeli są to litery małe, podana pozycja jest względna do pozycji wirualnego kursora, czyli ostatniego punktu, gdzie zakończyliśmy rysowanie
<text>...</text> - wewnątrz znajduje się tekst i może posiadać atrybuty <x> i <y>, określające jego pozycję. Resztę (oprócz koloru, który jest definiowany atrybutem fill) formatuje się normalnie np. za pomocą atrybutu style i transform
<tspan>...</tspan> - działa tak samo jak <span> dla <text>
<g>...</g> - pozwala grupować elementy, np. gdy chcemy łatwiej korzystać z nich w JavaScript lub edytować ich styl szbyciej
<a>...</a> - działa jak normalny link, ale posiada atrybuty xml: xlink:href (odpowiednik href z HTML w XML), xlink:actuate, xlink:show.
<clipPath>...</clipPath> - wewnątrz można rysować figury, które bedą wyznaczać obszar, który będzie ograniczać rysowanie innych elementów. Potrzebne są dwa atrybuty: id w tym elemencie oraz clip-path w elemencie, który chcemy ograniczać. Na polski - jeżeli stworzymy <clipPath>, wewnątrz narysujemy kółeczko i nadamy temu jakieś id, załózmy "koło", potem narysujemy sobię inną figurę np. żabę za pomocą <path> i w owym <path> użyjemy atrybutu clip-path="url(#koło)" to każda część żaby, wystająca poza kółko z <clipPath>, nie zostanie narysowana
<use/> - kopiuje element zlinkowany w atrybucie xlink:href="#id_elementu" w wyznaczone miejsce
<defs>...</defs> - elementy, które nie zostaną wyświetlone, przeznaczone do dalszego użycia np. za pomocą <use>
<desc>...</desc> - wewnątrz innych elementów można umieścić ten i pomiędzy jego tagami zapisać niewyświetlany opis w ramach komentarzu, oczywiście wtedy elementów, które chcemy opisać nie zakańczamy wpisując w otwierającym tagu znaki "/"
<image/> - odpowiednik <img> z HTML
<foreignObject>...</foreignObject> - wewnątrz tego elementu można użyć innych, niezwiązanych z SVG (np. HTML)
<stop/> - element, który powinien zawierać się w linearGradient lub radialGradient i mówi o kolorze w atrybucie stop-color, w jaki przechodzi gradient na danym punkcie wektora, wzdłuż którego jest rysowany gradient. Pozycję podaje się względem punktu początkowego w atrybucie offset i np. 50% oznacza, że w podany color przejdzie gradient w połowie wektora. Posiada atrybut stop-opacity i określa przezroczystość koloru
<linearGradient>...</linearGradient> - element, którym można wypełniać inne, może posiadać atrybuty:
- id - identyfikator gradientu
- x1 - pierwsza współrzędna początkowego punktu wektora, wzdłuż którego rysowany jest gradient
- y1 - druga współrzędna początkowego punktu wektora, wzdłuż którego rysowany jest gradient
- x2 - pierwsza współrzędna końcowego punktu wektora, wzdłuż którego rysowany jest gradient
- y2 - druga współrzędna końcowego punktu wektora, wzdłuż którego rysowany jest gradient
- gradientUnits - może posiadać jedną z dwóch wartości: objectBoundingBox(domyślna) lub userSpaceOnUse. Pierwsza wartość oznacza, że podane punkty za pomocą atrybutów x1,y1,x2,y2 są wyznaczone względem położenia obiektu, użycie drugiego - względem obecnego viewBox
- spreadMethod - może posiadać jedną z trzech właściwości: pad, reflect lub repeat, które określają zachowanie się gradientu poza wektorem (gdy użytkownik ustawi, że kończy się wcześniej), wzdłuż którego jest rysowany. Pad nadaje jednolity kolor początkowy części przed początkiem wektora i końcowy kolor obszarowi po końcu wektora. Reflect robi, że gradient jest odbity symetrycznie do prostych prostopadłych do wektor, przechodzących przed punkt początkowy wektora lub końcowy. Tak, jak gdyby powstały nowe wektory będące "przedłużeniem" początkowego (a potem kolejnych, w nieskończoność) o identycznych własnościach, ale ich zwrot był przeciwny. Repeat to w skrócie powtarzasz kolory aka wektory. Tam gdzie sie kończy jeden, zaczyna się drugi. Jeżeli masz problemy ze zrozumieniem: zobacz na przykładach te gradienty najpierw, a potem spróbuj zrozumieć, co tu jest napisane, powinno być w ten sposób o wiele łatwiej.
- gradientTransform - określa transformacje, jakimi poddany jest gradient
- href - obecny element można zlinkować z innym tak, że oddziedziczy on wszystkie (nawet tą, co pozwoli na rekurencyjne wartości od podanego w linku. Oczywiście można je nadpisać, z wyjątkiem gradientTransform, którego użycie powoduje dodanie kolejnej transformacji do już istniejących
<radialGradient>...</radialGradient> - gradient, posiada to samo znaczące atrybuty id, gradientUnits, spreadMethod, gradientTransform, href, jakie ma linearGradient:
- cx - pierwsza współrzędna środka okręgu końcowego gradientu
- cy - druga współrzędna środka okręgu końcowego gradientu
- r - promień środka okręgu końcowego gradientu
- fx - pierwsza współrzędna środka okręgu początkowego gradientu
- fy - druga współrzędna środka okręgu początkowego gradientu
- fr - promień środka okręgu początkowego gradientu
<marker>...</marker> - element podkreślający punkty elementów: <path>, <line>, <polyline>, <polygon>, do których można dodać atrybuty: marker-start, który nałoży marker na punkt początkowy, marker-mid nakłada marker na wszystkie punkty pomiędzy początkowym, a końcowym. marker-end stosuje go na punkt końcowy. Atrybuty markerHeight i markerWidth wyznacza wymiary viewportu. Atrybuty:
- orient - wyznacza kąt obrócenia markera na punktach. Ten atrybut posiada specjalne wartości auto i auto-start-reverse, które ustawiają ten kąt na kąt jaki tworzy odcinek z osią O_x. auto-start-reverse sprawia, że pierwszy marker będzie obrócony dodatkowo o 180^o.
- refX - pierwsza współrzędna punktu, względem którego będą rysowane markery. Np refX="5" przesunie wszystkie pierwsze współrzędne narysowanych markerów o -5.
- refY - druga współrzędna punktu opisanego powyżej
refX i refY mogą mieć specjalne wartości top, center, bottom, jeżeli nie domyślacie się co robią, polecam podszkolić się w języku angielskim. Ta umiejętność jest naprawdę przydatna w obecnym świecie

W wersjach SVG nowszych niż SVG 2 nie ma potrzeby i nie powinno pisać "xlink:" przed nazwami atrybutów z XML, ponieważ te atrybuty zostały zmienione oraz ich poprzednie wersje nie są już wspierane. Dodawanie znaku '/' lub zakańczanie tagów jest wymagane, ponieważ SVG operuje w XML, gdzie panuje zasada zamykania tagów.
Styl tych elementów może być zmieniony właściwościami w atrybucie <style>:

fill - kolor wypełniający figurę
stroke - kolor linii rysującej (kontur figury)
stroke-width - szerokość linii rysującej figury
fill-opacity - przezroczystość wypełnienia figury
stroke-opacity - przezroczystość konturu figury
opacity - przezroczystość figury
stroke-linecap - zakończenie linii, jedno z możliwych:
- butt - zakończenie nie jest rozszerzane
- round - na punktach końcowych znajdują się koła o promieniu równym stroke-width
- square - na zakończeniu znajduje się prostokąt o szerokości połowy stroke-width i wysokości równej stroke-width
stroke-dasharray - atrybut pozwalający na tworzenie przerywanych linii, wartością jest lista punktów, których współrzędna pierwsza odpowiada za długość linni, a druga za przerwę pomiędzy następną. Ta lista jest zapętlona tzn. po przerwie nr.1 wystąpi przerwa nr.2 i, jeżeli jest to ostatnia przerwa w liście, znówi wystąpi przerwa nr.1 itd.

Proponowany format wprowadzania punktów nie jest jednym. Tak naprawdę nie trzeba dzielić na punkty, tylko wprowadzic liczby, ktore potem automatycznie zostana przetworzone na listę punktów. Wprowadzane liczby liczby można oddzielić conajmniej jednym białym znakiem (spacja, tabulator etc.) lub conajmniej jednym przecinkiem. Poniższe zapisy list punktów są równoważne:
x₁,y₁ x₂,y₂ ... x_n-1,y_n-1 x_n,y_n
x₁ y₁ x₂ y₂ ... x_n-1 y_n-1 x_n y_n
x₁,y₁,x₂,y₂,...,x_n-1,y_n-1,x_n,y_n

Każdy rysujący element SVG może mieć wspomniany atrybut clip-path. Przykłady (<svg style="width:100%;height:1700px;">):

Czym jest HTML?

Kluczowe elementy

Paragraf

Nagłówki

To jest nagłówek h1

To jest nagłówek h2

To jest nagłówek h3

To jest nagłówek h4

To jest nagłówek h5

To jest nagłówek h6

Styl

Formatowanie

Cytowanie

Komentarze

Kolory

Hiperłącza

Obrazy

Tablice

Listy

Bloki

Klasy

Ramki

Skrypty

Metadane

Układ

Literały

Formularze

Wsparcie HTML5

Dynamiczna grafika