1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: Semantyka
slug: Glossary/Semantyka
translation_of: Glossary/Semantics
---
<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>
|
