Hlavička

Tagy, které patří do hlavičky dokumentu (mezi značky <head> a </head>). Teoreticky by sem měl patřit ještě <bgsound> a !doctype.

Tag	Význam	Párový	Výskyt
title	titulek stránky	ano	<head>
base	základ odkazů	ne	<head>
link	nezobrazované propojení	ne	<head>
meta	informace o dokumentu	ne	<head>

title

Titulek stránky. Párový tag. Mezi značkami <title> a </title> je text, který bude chápán jako titulek. Titulek má několik málo známých funkcí, například:

zobrazuje se v záhlaví okna a na hlavním panelu jako nadpis aplikace
zobrazuje se jako nadpis ve vyhledávačích
je prioritní při indexování stránky vyhledávacími roboty
mnoho softwaru ho používá jako nativní odkaz

Obsahem elementu může být pouze obyčejný text bez tagů. Více informací o titulku stránky.

Tag <title> nemá nic společného s obecným atributem title.

base

Základní umístění nebo zacílení. Nepárový tag. Vyskytuje se pouze v hlavičce.

Atributy tagu <base>
Atribut	Význam	Hodnoty
href	základní umístění, od kterého se odvozují všechny relativní odkazy	URL složky
target	jméno rámu, ve kterém se zobrazují odkazy (pokud u nich není stanoveno jinak)	jméno rámu \| _blank \| _top \| _parent \| _self

Tag <base> se využívá málo, hlavně slouží pro ulehčení práce. Obvykle se pracuje pouze s jedním z atributů.

Internet explorer do verze 6 dovoluje nestandardní víceré použití tagu <base> v jedné stránce (uvnitř tagu <body>). Base uvedená v dokumentu později přehlušuje původní base. Když například máte na stránce oddíl odkazů, které potřebujete všechny otevírat do nového okna, hodíte před ně tag <base target="_blank">. Potom, má-li pokračovat stránka s normálními odkazy, stačí opět použít <base target="_self">. Celou tuto konstrukci nedoporučuji používat, protože je nestandardní (tedy nevypočitatelná), funguje jenom v Exploreru a v Exploreru 7 prý už fungovat nebude.

Osobně tag base používám ve chvíli ladění, když si z webu stáhnu nějakou stránku s relativními odkazy, u kterých potřebuju, aby při ladění fungovaly, ale nechci je všechny přepisovat.

Tag <base> je potřeba ve zdrojáku uvést před všemi relativními odkazy, které má ovlivnit (tedy třeba i před odkazem na stylopis nebo skripty).

link

Spojitost s jiným souborem, neviditelný vztah. Nejčastěji se užívá pro propojení s externím CSS stylem. Nepárový tag, vyskytuje se pouze v hlavičce.

Atributy tagu <link>
Atribut	Význam	Hodnoty
rel	vztah k linkovanému souboru	stylesheet \| teoreticky i další
~~rev~~	~~zpětný vztah~~, prakticky nefunguje
href	cesta k linkovanému souboru	URL
type	MIME typ souboru (nepovinné)	MIME specifikace (např. "text/css")
media	omezení na typ výstupu	all \| screen \| print \| a další
disabled	zrušení platnosti (kvůli skriptům)	bez hodnoty

Link prošel celkem dramatickým vývojem, dnes se využívá pouze v několika málo případech.

Příklad připojení CSS stylu:

Příklad připojení oblíbené ikony, v praxi je to pak složitější:

Příklad informace o rss kanálu:

Příklad odkazu na jinou jazykovou verzi téhož dokumentu (zde na en, tedy anglickou).

Problematika hreflang je dost složitá, ještě jsem ji nestihnul sepsat, ale už s tím experimentuju.

Příklad určení statické kanonické adresy dokumentu pro vyhledávače:

Jiným druhem kanonizace pro Google je určení, co je předchozí a další stránka téhož výpisu. Google by se k obsahu těchto "stránkovaných" stránek měl chovat jako k jendnomu dokumentu:

Stránku lze odkázat také na mobilní aplikaci, pokud ji má. Příklad napojení stránky windy.com na její mobilní aplikace:

Různé metody přednačtení

Příklad přednačtení objektu, který bude potřeba při pozdější navigaci. Stahuje se až poté, co se stránka vykreslí, a ukládá se do keše:

Podporu má prefetch slušnou, všude krom Edge.

Podobně se může použít link, který pouze nechává prohlížeč, aby si zjistil IP adresu nějakého serveru, protože očekává, že na něj uživatel přejde. V tomto příkladu se přes DNS zjišťuje IP adresa serveru jakpsatweb.cz, což způsobí, že po kliknutí na odkaz nebo formulář už bude rychlejší navigace.

Rel="preload" se měl používat pro objekty, které se pravděpodobně objeví na stránce a je potřeba začít je načítat co nejdříve s vysokou prioritou. Zapisuje se to takto:

Pokud nepoužijete atribut "as", tak se to nenačte. Podpora slušná, kromě Firefoxu, ve kterém je to vypnuté prý z bezpečnostních důvodů.

Velmi často se uvádí také link na prerender, který by teoreticky měl do paměti vyrenderovat celou stránku, ale taky mi v žádném prohlížeči nefungoval (testován Chrome 70, Opera 57, Firefox a Edge). Každopádně požadavky nejsou vidět v Dev tools, ale něco se děje v chrome://net-internals/#prerender . Řekl bych, že to nic nedělá, ale těžko říct. Takhle se to zapisuje:

odkaz na příklad přednačítání. Též si na preload a preconnect zkuste nastudovat http odpověď 103 Early Hints.

Rel

Atribut rel vyjadřuje typ vztahu. Většinu použití už jsem uvedl v příkladech výše. V praxi se používá nejvíce zápis rel="stylesheet". Další časté je ještě rel="shortcut icon" pro připojení ikony k dokumentu (jde o nestandardní, ale funkční hodnotu).

Všechna další původně proklamovaná využití (next, content, prev, atribut rev) fungují velmi omezeně. Měla by vyjadřovat navigační vztahy k dalším stránkám webu. Problémem je, že třeba v Internet Exploreru nic z toho nijak nefunguje (srovnej rel u odkazu). Opera dokáže u stránek s uvedenými navigačními linky (myšleno tagy link) vykreslit panel s odkazy na uvedené stránky. Hodnot next a prev by si měl všímat Google při kanonizaci.

meta

Informace o dokumentu. Nepárový tag vyskytující se v hlavičce. Slouží třeba k informaci o klíčových slovech nebo použitém kódování. Běžná internetová stránka má v hlavičce kolem čtyř různých tagů <meta>. V praxi je čtou a používají pouze programy (vyhledávače, parsery a editory).

Atributy tagu meta
Atribut	Význam	Hodnota
name	druh uživatelské informace	keywords \| description \| author \| generator \| a spousta dalších
http-equiv	ekvivalent http hlavičky	content-type \| refresh \| mnoho dalších (jakýkoli http údaj)
content	obsah, vlastní informace	podle typu informace
charset	kódování souboru	utf-8 \| windows-1250 \| iso-8859-2
property	něco jako name	jakákoli, u facebooku např. fb:admins

Každý meta tag obsahuje buď atribut name, nebo http-equiv. Oba najednou být nemohou. (Případně property nebo charset.) Obsah atributu content potom vyjadřuje hodnotu toho, co je zmíněno v name nebo v http-equiv.

Tag <meta>, atribut name
name=	Význam	content=
viewport	v responzivním designu zakáže mobilům předstírat větší šířku, než mají	width=device-width,initial-scale=1
keywords	v minulosti klíčová slova pro vyhledávací stroje, dnes bezcené	slovo, slovo, slovo
description	popis stránky, většinou pro vyhledávací stroje	stručný popis obsahu stránky
referrer	udává, jestli a případně jak se má při prokliku ze stránky použít referrer	[no-referrer \| origin \| no-referrer-when-downgrade \| origin-when-crossorigin \| unsafe-URL ]
robots	zakázání robotů indexovat nebo sledovat odkazy	[index \| noindex ], [ follow \| nofolow]
a další milión hodnot, které si přidává nějaký software nebo se hodí pro cosi záhadného

Tag <meta>, atribut http-equiv

http-equiv=

Význam

content=

content-type

MIME specifikace + informace o kódování. V HTML 5 nahrazeno atributem charset. Viz češtinu.

text/html; charset=iso-8859-2 |
text/html; charset=windows-1250 |
a další kódování

content-language

Info o jazyce dokumentu

cs | sk | de | en-us | en-gb | a stovka dalších jazyků

refresh

přesměrování na adresu po určitém čase

sekundy;URL=URL
např.
"6;URL=http://www.nekam.cz/cokoliv"

a spousta dalších ekvivalentů HTTP hlaviček. Některé z nich jsou používány jen některými klienty, takže mi nepřipadá moudré zmiňovat je. Ne všechny http hlavičky lze převést do meta tagů, aby fungovaly.

Tag <meta>, atribut charset
charset=	Význam
utf-8	stránka je kódována v UTF-8
windows-1250	stránka je kódována ve Windows-1250
iso-8859-2	stránka je kódována v iso-8859-2
jiná hodnota	jiná, cizí kódování. Pro češtinu typicky nevhodná.

Příklady:

Další příklady meta tagů s výkladem.

Příklad hlavičky

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=windows-1250">
    <title>Titulek stránky</title>
    <link rel="stylesheet" href="styly/muj-styl.css" type="text/css">
</head>
<body>
... zde pokračuje dokument

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně