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://www.jakpsatweb.cz/weblog/yuhu_weblog.xml">.

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

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

Rel

Atribut rel vyjadřuje typ vztahu. V praxi se používá pouze zápis rel="stylesheet". Znám 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.

HTML tag <link rel="prefetch" href="stranka.html"> způsobí v prohlížečích typu Gecko (Mozilla, Firefox apod.) přednačtení uvedeného souboru (nejčastěji stránky). Stránka se načítá neviditelně, používá se to v případech, kdy je téměř jisté, na co uživatel klikne, aby to pak už měl v keši. Podobné přednačítání možná způsobuje <link rel="next"...>, který normálně vyjadřuje v pořadí další stránku (a normálně to nic nedělá).

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.