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> |
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.
Základní umístění nebo zacílení. Nepárový tag. Vyskytuje se pouze v hlavičce.
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).
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.
Atribut | Význam | Hodnoty |
---|---|---|
rel | vztah k linkovanému souboru | stylesheet | teoreticky i další |
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/">
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á).
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).
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.
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 |
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. | ||||||||||||
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"> |
<!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
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.