HTML tag <main>


Příklad

Upřesněte hlavní obsah dokumentu:

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

Další příklady „Vyzkoušejte si to sami“ níže.


Definice a použití

Značka <main>určuje hlavní obsah dokumentu.

Obsah uvnitř <main>prvku by měl být pro dokument jedinečný. Neměl by obsahovat žádný obsah, který se v dokumentech opakuje, jako jsou postranní panely, navigační odkazy, informace o autorských právech, loga stránek a vyhledávací formuláře.

Poznámka: V dokumentu nesmí být více než jeden <main>prvek. Prvek <main>NESMÍ být potomkem prvku <article>, <aside>, <footer>, <header> nebo <nav>.


Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která prvek plně podporuje.

Element
<main> 26.0 12.0 21.0 7.0 16.0

Globální atributy

Značka <main>také podporuje globální atributy v HTML .


Atributy události

Značka <main>také podporuje atributy událostí v HTML .



Další příklady

Příklad

Ke stylování prvku <main> použijte CSS:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

</body>
</html>