Průvodce stylem HTML
Konzistentní, čistý a přehledný kód HTML usnadňuje ostatním čtení a pochopení vašeho kódu.
Zde je několik pokynů a tipů pro vytváření dobrého HTML kódu.
Vždy deklarovat typ dokumentu
Typ dokumentu vždy deklarujte jako první řádek v dokumentu.
Správný typ dokumentu pro HTML je:
<!DOCTYPE html>
Používejte názvy prvků malými písmeny
HTML umožňuje míchání velkých a malých písmen v názvech prvků.
Doporučujeme však používat názvy prvků malými písmeny, protože:
- Míchání velkých a malých názvů vypadá špatně
- Vývojáři obvykle používají malá písmena
- Malá písmena vypadají čistěji
- Malá písmena se píší snadněji
Dobrý:
<body>
<p>This is a paragraph.</p>
</body>Špatný:
<BODY>
<P>This is a paragraph.</P>
</BODY>Zavřete všechny prvky HTML
V HTML nemusíte zavírat všechny prvky (například <p>prvek).
Důrazně však doporučujeme zavřít všechny prvky HTML, například takto:
Dobrý:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Špatný:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Používejte názvy atributů malými písmeny
HTML umožňuje míchání velkých a malých písmen v názvech atributů.
Doporučujeme však používat názvy atributů malými písmeny, protože:
- Míchání velkých a malých názvů vypadá špatně
- Vývojáři obvykle používají malá písmena
- Malá písmena vypadají čistěji
- Malá písmena se píší snadněji
Dobrý:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Špatný:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Vždy uvádějte hodnoty atributů
HTML umožňuje hodnoty atributů bez uvozovek.
Doporučujeme však uvádět hodnoty atributů, protože:
- Vývojáři obvykle uvádějí hodnoty atributů
- Hodnoty v uvozovkách jsou snadněji čitelné
- Pokud hodnota obsahuje mezery, MUSÍTE použít uvozovky
Dobrý:
<table
class="striped">Špatný:
<table class=striped>Velmi špatný:
To nebude fungovat, protože hodnota obsahuje mezery:
<table class=table striped>Vždy určete alt, šířku a výšku pro obrázky
Vždy zadejte altatribut pro obrázky. Tento atribut je důležitý, pokud obrázek z nějakého důvodu nelze zobrazit.
Také vždy definujte widtha
heightobrázků. Tím se omezí blikání, protože prohlížeč si může před načtením vyhradit místo pro obrázek.
Dobrý:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Špatný:
<img
src="html5.gif">Mezery a rovná se
HTML povoluje mezery kolem rovnátek. Ale bez mezery je snazší číst a lépe seskupuje entity.
Dobrý:
<link rel="stylesheet" href="styles.css">Špatný:
<link
rel = "stylesheet" href = "styles.css">Vyhněte se dlouhým řádkům kódu
Při používání HTML editoru NENÍ vhodné číst HTML kód rolováním doprava a doleva.
Snažte se vyhnout příliš dlouhým řádkům kódu.
Prázdné řádky a odsazení
Nepřidávejte prázdné řádky, mezery nebo odsazení bez důvodu.
Kvůli čitelnosti přidejte prázdné řádky k oddělení velkých nebo logických bloků kódu.
Pro čitelnost přidejte dvě mezery odsazení. Nepoužívejte klávesu tabulátoru.
Dobrý:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Špatný:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Příklad dobré tabulky:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Příklad dobrého seznamu:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Nikdy nevynechávejte prvek <title>
Prvek <title>je vyžadován v HTML.
Obsah názvu stránky je velmi důležitý pro optimalizaci pro vyhledávače (SEO)! Název stránky používají algoritmy vyhledávačů k rozhodování o pořadí při uvádění stránek ve výsledcích vyhledávání.
<title>prvek :
- definuje titulek na liště prohlížeče
- poskytuje název stránky, když je přidána do oblíbených
- zobrazí název stránky ve výsledcích vyhledávače
Pokuste se tedy, aby byl nadpis co nejpřesnější a nejsmysluplnější:
<title>HTML
Style Guide and Coding Conventions</title>
Vynechat <html> a <body>?
Stránka HTML se ověří bez značek <html>a
:<body>
Příklad
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Důrazně však doporučujeme vždy přidat značky <html>a
<body>!
Vynechání <body>může způsobit chyby ve starších prohlížečích.
Vynechání <html>a <body>
může také dojít k selhání softwaru DOM a XML.
Vynechat <head>?
HTML tag <head> lze také vynechat.
Prohlížeče přidají všechny prvky před <body>, do výchozího <head>
prvku.
Příklad
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Doporučujeme však použít <head>značku.
Zavřít prázdné prvky HTML?
V HTML je volitelné uzavření prázdných prvků.
Povoleno:
<meta
charset="utf-8">
Povoleno také:
<meta charset="utf-8" />
Pokud očekáváte, že na vaši stránku bude mít přístup software XML/XHTML, ponechte koncové lomítko (/), protože je vyžadováno v XML a XHTML.
Přidejte atribut lang
langAtribut byste měli vždy zahrnout do <html>značky, abyste deklarovali jazyk webové stránky. To má pomoci vyhledávačům a prohlížečům.
Příklad
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metadata
Aby byla zajištěna správná interpretace a správné indexování vyhledávačem, měly by být jazyk i kódování znaků definovány v dokumentu HTML co nejdříve:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Nastavení Výřezu
Viewport je uživatelova viditelná oblast webové stránky. Liší se podle zařízení – na mobilu bude menší než na obrazovce počítače.
Na všechny své webové stránky byste měli zahrnout následující <meta>prvek:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To dává prohlížeči pokyny, jak ovládat rozměry a měřítko stránky.
Část width=device-widthnastavuje šířku stránky tak, aby odpovídala šířce obrazovky zařízení (která se bude lišit v závislosti na zařízení).
Část initial-scale=1.0nastavuje počáteční úroveň přiblížení při prvním načtení stránky prohlížečem.
Zde je příklad webové stránky bez metaznačky viewport a stejné webové stránky s metaznačkou viewport:
Tip: Pokud si tuto stránku prohlížíte pomocí telefonu nebo tabletu, můžete kliknutím na dva odkazy níže vidět rozdíl.
HTML komentáře
Krátké komentáře by měly být napsány na jeden řádek, takto:
<!-- This is a comment -->
Komentáře, které zabírají více než jeden řádek, by měly být napsány takto:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Dlouhé komentáře se snáze sledují, pokud jsou odsazeny dvěma mezerami.
Používání šablon stylů
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.