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:

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í stylu:

<link rel="stylesheet" type="text/css" href="soubor.css">

Příklad připojení oblíbené ikony:

<link rel="shortcut icon" href="favicon.ico">

Příklad informace o rss kanálu:

<link rel="alternate" type="application/rss+xml" href="http://weblog.jakpsatweb.cz/yuhu_weblog.xml">.

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

<link rel="canonical" href="http://www.jakpsatweb.cz/">

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:

<link rel="prev" href="?page=3">
<link rel="next" href="?page=5">

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:

<link rel="prefetch" href="dalsi.html">

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.

<link rel="dns-prefetch" href="https://www.jakpsatweb.cz/">

Chrome umí objekt přednačíst s vysokou prioritou. Rel="preload" se používá 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.

<link rel="preload" href="skript.js">

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
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. 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:

<meta name="description" content="popisek pro vyhledávače">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

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

Příklad hlavičky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.