Uvozovky v HTML, CSS, JS, PHP, SQL

HTML atributy

V HTML se uvozovky používají pro obalení hodnot atributů.

V řadě (většině) případů se u HTML atributů používají uvozovky zbytečně, ale považuje se to za dobrý zvyk. Někomu se to tak víc líbí, někomu může ouvozovkované hodnoty lépe zvýrazňovat HTML editor:

Někomu může vyhovovat, že nemusí přemýšlet nad případy, kde je možné uvozovky vynechat.

Třeba odkaz na jecas.cz jde zapsat následovně:

<a href=http://jecas.cz>
  Je čas
</a>

Formulářový prvek <input> může bez problémů vypadat následovně:

<input type=checkbox>

V podstatě může být v hodnotě atributu bez uvozovek cokoliv kromě:

• Mezery – ukončila by hodnotu atributu. A zbytek by se bral jako další atribut:

  <div class=prvni druha>

• Znaku > – ukončil by HTML značku, čímž by se ukončila i hodnota atributu. Zbytek by se tak stal obsahem značky:

  <div class=prvni>druha>

W3C doporučení uvádí pro hodnoty atributů bez uvozovek následující:

CSS

V CSS se uvozovky používají nejčastěji:

1. Ve funkci url pro nastavování např. obrázkového pozadí:

   background: url("obrazek.png");

2. Ve funkci content pro nastavování obsahu:

   div:before {
     content: "Text";
   }

3. V názvech fontů za font-family.

   div {
     font-family: "New York CE", …;
   }

4. U atributových selektorů:

   div[class="modra"] {
     …
   }

I tady platí, že uvozovky jsou často zbytečné. Vždy nutné je použít uvozovky u vlastnosti content. Mezi dvojitými a jednoduchými nejspíš není rozdíl.

Při používání standardních názvů souborů jde uvozovky bezpečně vynechat u url. Názvy fontů vyžadují uvozovky jen v případě, že obsahují čísla a speciální symboly.

CSS selektory potřebují obalit hodnotu selektoru do uvozovek opět jen v případě, že obsahuje nestandardní znaky, které mají zvláštní význam v CSS, například zaměření políčka s názvem „pole[]“ by bez uvozovek nešlo:

input[name="pole[]"] {
}

Většina lidí uvozovky používá ve všech případech, protože si nechtějí nebo nedokáží zapamatovat, kde jsou uvozovky potřebné, nebo se jim zápis s uvozovkami zkrátka líbí nebo jde opět o pomoc editoru pro zvýrazňování syntaxe.

Uvozovky v JavaScriptu

JavaScript vyžaduje uvozovky kolem řetězců. Jestli jsou uvozovky dvojité " nebo jednoduché ', nemá na funkci vliv.

var promenna = "Text";
window.location = 'index.html';

Možnost volit typ uvozovek se hodí při výpisu HTML s atributy. Není potom nutné uvozovky v HTML escapovat.

var html = '<div class="a"></div>';

Novější prohlížeče podporující EcmaScript 6 znají ještě jeden typ uvozovek – zpětnou uvozovku – pro víceřádkové řetězce.

var obsah = `Řetězec 
se zalomením
řádku`;

Znak `

Znak ` se v programování nazývá jako zpětná uvozovka (anglicky backquote nebo backtick). V řadě jazyků se tento znak používá jako diakritická značka.

Na české klávesnici jde zapsat klávesovou zkratkou Pravý Alt + ý.

JSON

Drobný rozdíl je v JSONu, kde jsou vyžadovány dvojité uvozovky. Klíče nebo hodnoty obalené do jednoduchých uvozovek zde nejsou validní. Následující kód proto není validní JSON:

{
  "klic" : 'hodnota'
}

Uvozovky v PHP

V PHP je většinou jedno, který typ uvozovek (jednoduché/dvojité) se použije.

Zásadní rozdíl je ale v tom, že v řetězci s dvojitými uvozovkami dojde k automatickému nahrazení proměnné její hodnotou:

$a = 1;
echo "Výsledek: $a"; // Výsledek: 1

V případě jednoduchých uvozovek se proměnná nenahradí:

$a = 1;
echo 'Výsledek: $a'; // Výsledek: $a

Pro lepší přehlednost zápisu s dvojitými uvozovkami se někdy ještě používají složené závorky:

echo "Výsledek: {$a}";

Hodně lidí ale tuto funkci nevyužívá a řetězce s proměnnými raději spojuje tečkou:

echo "Výsledek: " . $a;

V některých editorech to má vliv na obarvení:

Pro řetězec o více řádcích není v PHP problém použít odřádkování:

$obsah = "Řetězec 
se zalomením
řádku";

Heredoc

Někdy se ještě používá pro označení řetězců heredoc:

$obsah = <<<EOT
Řetězec 
se zalomením
řádku
EOT;

Výhoda oproti uvozovkám je v tom, že případné další uvozovky uvnitř není nutné escapovat. Tento postup se proto používá třeba k výpisu HTML kódu uvnitř PHP.

Zpětné uvozovky `` mají v PHP zcela odlišný význam než v JavaScriptu. Slouží k zavolání funkce shell_exec.

Uvozovky v MySQL

V MySQL se jednoduché uvozovky používají pro obalení řetězců v podmínkách:

SELECT FROM tabulka WHERE sloupec = 'něco'

Případně:

SELECT FROM tabulka WHERE sloupec LIKE '%něco%'

Pro obalení názvů sloupců nebo tabulek jde použít zpětné uvozovky ``:

SELECT FROM `tabulka` WHERE `sloupec` = 'něco'

Zpětné uvozovky se hodí pro případy, kdy identifikátory tabulek či sloupců obsahují zvláštní znaky nebo reservovaná klíčová slova.

Pokud by se třeba sloupec jmenoval key, následující dotaz by selhal:

SELECT key FROM tabulka

Lepší je nejspíš se těmto názvům raději vyhnout.

Jednoduché nebo dvojité

Dvojité uvozovky se v MySQL většinou chovají stejně jako jednoduché. Problém ale může nastat u jiných SQL databasí nebo při změně nastavení ANSI_QUOTES režimu. Dvojité uvozovky se potom mohou začít chovat jako zpětné uvozovky `.

Nabízí se proto používat raději jednoduché.

Míchání uvozovek

Pořádná zábava začne v momentě, kdy je potřeba nakombinovat více typů uvozovek kvůli používání různých programovacích jazyků.

Řešení číslo 1: Nemíchat mezi sebou kód z různých jazyků.

Při jeho nedodržení je nutné dělat následující:

Uvozovky v HTML a JavaScriptu

Vypsání alertu po kliknutí. Uvnitř dvojitých uvozovek jde použít jednoduché:

<button onclick="alert('Hláška')">
  Tlačítko
</button>

Co ale v případě, že se po kliknutí na tlačítko má vypsat nějaký HTML kód? Třeba odkaz

<div id="vypis"></div>
<button onclick="vypis.innerHTML = '<a href=???>Odkaz</a>'">
  Tlačítko
</button>

Najednou pro jeho atribut href už nezbývají volné uvozovky.

1. Escapování – pomocí zpětného lomítka \ (lze zapsat zkratkou Pravý Alt + Q) jde uvozovky tzv. escapovat.

   Escapovat uvozovku kolem hodnoty atributu zpětným lomítkem nejde v rámci HTML, tam k tomu slouží entity pro uvozovky – " a '.

   Na následující ukázce by se hodnota atributu ukončila ihned druhou dvojitou uvozovkou a vznikl by tak nevalidní kód.

   <button onclick="alert(\"Hláška\")">

   Jiný typ uvozovky, než se používá pro obalení HTML atributu, ale už escapovat jde:

   <div id="vypis"></div>
   <button onclick="vypis.innerHTML = '<a href=\'cil.html\'>Odkaz</a>'">
     Tlačítko
   </button>

2. Entity – vyplácá-li se druhý typ uvozovek i jeho escapovaná podoba, další možnost je použít entity:

   <div id="vypis"></div>
   <button onclick="vypis.innerHTML = '<b title=\'Titulek &quot;textu&quot;\'>Text</b>'">
     Tlačítko
   </button>

   Živá ukázka – zanoření více uvozovek

PHP a HTML + JS

Měl-li by se HTML kód s JavaScriptem v uvozovkách vypisovat pomocí PHP, bude nedostatek uvozovek ještě větší.

Na druhou stranu jde escapovat i uvozovku, která obaluje řetězec:

echo "<button onclick=\"vypis.innerHTML = '<b title=\'Titulek &quot;textu&quot;\'>Text</b>'\">";

Vyhnout se nutnosti escapování HTML/JS kódu v PHP jde již zmíněným heredocem. Nebo přerušením PHP bloku:

<?php … ?>
<button>
  HTML obsah
</button>
<?php … ?>

Oddělení různých jazyků

Jak je vidět na ukázkách, zanořování různých uvozovek není moc přehledné.

V případě JavaScriptu je řešení vyčlenit událost po kliknutí do zvláštní funkce a tu potom připojit:

Zbavit se nutnosti zanořovat uvozovky jde i vytvářením HTML kódu metodami createElement a nastavování atributů pomocí JS vlastností:

var element = document.createElement("div");
element.className = "prvni druha";
element.onclick = funkce;

V PHP je potom řešení použít heredoc, přerušení PHP bloku nebo využití nějakého šablonovacího systému a mít tak HTML kód kompletně oddělený od PHP.

České uvozovky

Nakonec se na webu vyskytují ještě „české uvozovky“ – vypadají visuálně lépe než " nebo '. Zapsat jdou entitami „ a “.

Pro ‚jednoduché české uvozovky‘ slouží entity ‚ a ‘

Ve Windows pro ně ale žádná jednoduchá klávesová zkratka neexistuje.