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
98
99
|
---
title: Semantics
slug: Glossary/Semantics
translation_of: Glossary/Semantics
original_slug: Глоссарий/Semantics
---
<p><span class="seoSummary">В программировании, <strong>Семантика</strong> означает <em>значение</em> фрагмента кода - например, «к какому результату приведёт выполнение этой строки JavaScript?», или «каково предназначение или какая роль у этого элемента HTML» (а не «как он выглядит ?».)</span></p>
<h2 id="Семантика_в_JavaScript">Семантика в JavaScript</h2>
<p>Для JavaScript, рассмотрим функцию, которая принимает строку в качестве параметра, и возвращает элемент {{htmlelement("li")}} с этой строкой в качестве свойства <code>textContent</code>. Нужно ли вам смотреть на код, чтобы понять, что делает функция <code>build('Peach')</code>, или <code>createLiWithContent('Peach')</code>?</p>
<h2 id="Семантика_в_CSS">Семантика в CSS</h2>
<p>Для CSS, рассмотрим стилизацию списка элементов <code>li</code>, в которых содержаться разные виды фруктов. Вы бы поняли, какая часть DOM выбрана с помощью селектора <code>div > ul > li</code>, или <code>.fruits__item</code>?</p>
<h2 id="Семантика_в_HTML">Семантика в HTML</h2>
<p>В HTML, например, элемент {{htmlelement("h1")}} является семантическим, что даёт тексту внутри него роль (или значение) "заголовка первого уровня на вашей странице".</p>
<pre class="brush: html"><h1>This is a top level heading</h1></pre>
<p>По умолчанию, <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">стандартные стили</a> большинства браузеров зададут {{htmlelement("h1")}} большой размер шрифта, чтобы он <em>выглядел</em> как заголовок (хотя вы можете стилизировать его так, как сочтёте нужным).</p>
<p>С другой стороны, вы можете сделать любой элемент <em>похожим</em> на заголовок первого уровня. Рассмотрим следующее:</p>
<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre>
<p>Эти стили сделают элемент похожим на заголовок первого уровня, но он не будет иметь семантического значения, поэтому не получит никаких дополнительных преимуществ, описанных выше. Поэтому хорошей практикой является выбор подходящего элемента HTML для каждого отдельного случая.</p>
<p>HTML должен предоставлять структуру информации, которой он будет наполняться, и не должен полагаться на стандартные свойства стилей. Стилизация (то, как эта информация должна выглядеть), полностью ложиться на плечи <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
<p>Некоторые из преимуществ использования семантической разметки:</p>
<ul>
<li>Поисковые системы будут рассматривать содержимое такой разметки как важные ключевые слова, влияющие на рейтинг страницы в результатах поиска (смотри {{glossary("SEO")}})</li>
<li>Программы для чтения с экрана могут использовать её как указатель, чтобы помочь слабовидящим пользователям ориентироваться на странице</li>
<li>Среди бесконечных блоков <code>div</code> гораздо проще найти блок семантического кода, чем блок с семантическим классом или классом, принадлежащим пространству имён.</li>
<li>Указывает разработчику на тип данных, которые будут размещены</li>
<li>Семантическая разметка отражает правильное именование элементов / компонентов</li>
</ul>
<p>Принимая решение об использовании той или иной разметки, спросите себя: «Какой элемент (элементы) лучше всего описывает / представляет данные, которые я собираюсь использовать?» Например, это список данных ?; упорядоченный, неупорядоченный ?; это статья с разделами и дополнительной информацией ?; в ней перечислены определения ?; это рисунок или изображение, которое требует подписи ?; должен ли он иметь собственные <code>header</code> и <code>footer</code>?; и т.п.</p>
<h2 id="Семантические_элементы">Семантические элементы</h2>
<p>Вот <em>некоторые</em> из примерно 100 доступных семантических <a href="/en-US/docs/Web/HTML/Element">элементов</a>:</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="Learn_more">Learn more</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>
|
