---
title: Semantyka
slug: Glossary/Semantics
translation_of: Glossary/Semantics
original_slug: Glossary/Semantyka
---
<p><span class="seoSummary">W programowaniu <strong>Semantyka </strong>oznacza <em>znaczenie</em> kawałka kodu — na przykład: "Jaki efekt da ta linia kodu w JavaScripcie?" lub "Jaki cel lub rolę odgrywa ten element HTML?" (ale nie "Jak to wygląda?").</span></p>

<h2 id="Semantyka_w_języku_JavaScript">Semantyka w języku JavaScript</h2>

<p>Załóżmy, że chcemy stworzyć funkcję, która przyjmuje string jako parametr i zwraca element {{htmlelement("li")}} z tym napisem jako jego <code>textContent</code>. Zwróć uwagę na to, czy potrzebowałbyć przeczytać kod, by dowiedzieć się co dokładnie robi ta funkcja, gdyby była nazwana <code>build('Peach')</code> lub <code>createLiWithContent('Peach')</code>.</p>

<h2 id="Semantyka_w_języku_CSS">Semantyka w języku CSS</h2>

<p>Załóżmy, że chcesz ostylować listę <code>li</code> elementów reprezentującą różne owoce. Zwróć uwagę na to, czy wiedziałbyć do której części DOM jest odnosi się selektor <code>div &gt; ul &gt; li</code> lub <code>.fruits__item</code>.</p>

<h2 id="Semantyka_w_języku_HTML">Semantyka w języku HTML</h2>

<p>W języku HTML, element semantyczny {{htmlelement("h1")}}, nadaje rolę (lub znaczenie) napisowi pomiędzy znacznikami: "najważniejszy nagłówek na twojej stronie"</p>

<pre class="brush: html notranslate">&lt;h1&gt;To jest najważniejszy nagłówek&lt;/h1&gt;</pre>

<p>Domyślnie, większość przeglądarek <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">ostylowuje</a> element {{htmlelement("h1")}} dużą czcionką by <em>wyglądał </em>jak nagłówek (jednak możesz go ostylować jak chcesz).</p>

<p>Z drugiej strony, możesz dowolny element możesz ostylować tak by <em>wyglądał </em>jak nagłówek. Tak jak poniżej:</p>

<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Czy to jest najważniejszy nagłówek?&lt;/span&gt;</pre>

<p>Powyższy element będzie wyglał jak najważniejszy nagłówek, nie ma wartości semantycznej. Dlatego najlepiej używać elementów HTML zgodnie z ich przeznaczeniem.</p>

<p>Kod HTML powinien reprezentować <em>dane </em>i nie być oparty na domyślnym stylowaniu. Prezentacja (czyli jak powinny one wyglądać) to zadanie wyłącznie języka <a href="/en-US/docs/Web/CSS">CSS</a>.</p>

<p>Poniżej przedstawiono niektóre zalety poprawnego stosowania semantycznych znaczników:</p>

<ul>
 <li>Wyszukiwarki będą rozpoznawały zawartość jako ważne słowa kluczowe co wpłynie na ranking stron i zasięg strony (zobacz {{glossary("SEO")}})</li>
 <li>Czytniki będą mogły używać ich jako wskazówek pomagając osobom z pewnymi niepełnosprawnościami wzrokowymi poruszać się po stronie</li>
 <li>Poruszanie po kodzie z wymownymi nazwami znaczników będzie znacznie łatwiejsze</li>
 <li>Sugeruje typ zawartości, która ma się znaleźć między znacznikami</li>
</ul>

<p>Gdy zastanawiasz się, który znacznik należy użyć, zapytaj się, "Który element najlepiej określa/reprezentuje zawartość, którą chcę podać?". Na przykład: Czy to lista ponumerowana czy nie? Czy to artykuł podzielony na sekcję i częścią boczną? Czy to lista definicji? Czy to powinno mieć własny nagłówek? Czy ten obrazek potrzebuje podpisu? itp.</p>

<h2 id="Elementy_semantyczne">Elementy semantyczne</h2>

<p>Oto <em>niektóre </em>z około 100 <a href="/en-US/docs/Web/HTML/Element">elementów</a> semantycznych:</p>

<ul>
 <li>{{htmlelement("article")}}</li>
 <li>{{htmlelement("aside")}}</li>
 <li>{{htmlelement("details")}}</li>
 <li>{{htmlelement("figcaption")}}</li>
 <li>{{htmlelement("figure")}}</li>
 <li>{{htmlelement("footer")}}</li>
 <li>{{htmlelement("header")}}</li>
 <li>{{htmlelement("main")}}</li>
 <li>{{htmlelement("mark")}}</li>
 <li>{{htmlelement("nav")}}</li>
 <li>{{htmlelement("section")}}</li>
 <li>{{htmlelement("summary")}}</li>
 <li>{{htmlelement("time")}}</li>
</ul>

<h2 id="Zobacz_także">Zobacz także</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">HTML element reference</a> on MDN</li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">Using HTML sections and outlines</a> on MDN</li>
 <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
</ul>

<section id="Quick_links">
<ul>
 <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>

  <ul>
   <li>{{Glossary("SEO")}}</li>
  </ul>
 </li>
 <li>Some of semantic elements in HTML
  <ul>
   <li>{{htmlelement("article")}}</li>
   <li>{{htmlelement("aside")}}</li>
   <li>{{htmlelement("details")}}</li>
   <li>{{htmlelement("figcaption")}}</li>
   <li>{{htmlelement("figure")}}</li>
   <li>{{htmlelement("footer")}}</li>
   <li>{{htmlelement("header")}}</li>
   <li>{{htmlelement("main")}}</li>
   <li>{{htmlelement("mark")}}</li>
   <li>{{htmlelement("nav")}}</li>
   <li>{{htmlelement("section")}}</li>
   <li>{{htmlelement("summary")}}</li>
   <li>{{htmlelement("time")}}</li>
  </ul>
 </li>
</ul>
</section>