diff options
Diffstat (limited to 'files/pl/glossary/semantics/index.html')
| -rw-r--r-- | files/pl/glossary/semantics/index.html | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/files/pl/glossary/semantics/index.html b/files/pl/glossary/semantics/index.html new file mode 100644 index 0000000000..72cd9321d4 --- /dev/null +++ b/files/pl/glossary/semantics/index.html @@ -0,0 +1,98 @@ +--- +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 > ul > 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"><h1>To jest najważniejszy nagłówek</h1></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"><span style="font-size: 32px; margin: 21px 0;">Czy to jest najważniejszy nagłówek?</span></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 class="Quick_links" 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> |