it-swarm.com.ru

Что означает "семантически правильный"?

Я видел это много в разговоре о CSS. Что означает семантически правильное значение?

29
johnny

Маркировка правильно

Это означает, что вы называете что-то, что это на самом деле. Классический пример: если переменная table, она должна содержать строки и столбцы данных. Использовать это для верстки семантически неверно - вы говорите «это таблица», когда это не так.

Другой пример: список (<ul> или <ol>) обычно следует использовать для группировки похожих объектов (<li>). Вы можете использовать div для группы и <span> для каждого элемента, и стилизовать каждый span так, чтобы он находился на отдельной строке с точкой маркера, и это может выглядеть так, как вы хотите. Но «это список» передает больше информации.

Идеально подходит для HTML

HTML расшифровывается как «Гипертекст Разметка Язык»; его цель - разметить или пометить ваш контент. Чем точнее вы отметите это, тем лучше. В HTML5 вводятся новые элементы для более точной маркировки общих частей веб-страницы, таких как верхние и нижние колонтитулы.

Делает это более полезным

Вся эта семантическая маркировка помогает машинам анализировать ваш контент, что помогает пользователям. Например:

  • Зная, что ваши элементы являются позволяет браузерам использовать разумные значения по умолчанию для того, как они должны выглядеть и вести себя . Это означает, что у вас меньше работы по настройке и вы с большей вероятностью получите согласованные результаты в разных браузерах.
  • Браузеры могут правильно применить ваш CSS (Cascading Style Sheets), описывая, как должен выглядеть каждый тип контента. Вы можете предложить альтернативные стили, или пользователи могут использовать свои собственные; до тех пор, пока вы семантически маркировали свои элементы, будут использоваться правила типа «Я хочу, чтобы заголовки были огромными».
  • Программы чтения с экрана для слепых могут помочь им легче заполнить форму, если логические разделы разбиты на fieldsets с одним legend для каждого. Слепой пользователь может услышать текст legend и решить: «О, я могу пропустить этот раздел» так же, как зрячий пользователь мог бы прочитать его.
  • Мобильные телефоны могут переключаться на цифровую клавиатуру, когда они видят ввод формы type="tel" (для телефонных номеров).
46
Nathan Long

Семантика в основном означает «изучение значения».

Обычно, когда люди говорят о семантически правильном коде, они ссылаются на код, который точно описывает что-то.

В (x) HTML есть определенные теги, которые придают смысл содержанию, которое они содержат. Например:

Тег H1 описывает данные, которые он содержит, как заголовок уровня 1. Тег H2 описывает данные, которые он содержит, как заголовок уровня 2. Подразумеваемое значение этого заключается в том, что каждый H2 под H1 каким-то образом связан (то есть заголовок и подзаголовок).

Когда вы кодируете семантическим способом, вы в основном придаете смысл описываемым данным.

Рассмотрим следующие 2 примера семантической VS несемантической:

<h1>Heading</h1>
<h2>Subheading</h2>

VS несемантический эквивилант:

<p><strong>Heading</strong></p>
<p><em>Subheading</em></p>

Иногда вы можете услышать, как люди в дебатах говорят: «Вы просто говорите сейчас на семантике», и это обычно относится к тому, что вы говорите то же значение, что и другой человек, но используя разные слова.

20
Jamie Dixon

"Семантически правильное использование элементов означает, что вы используете их для того, для чего они предназначены. Это означает, что вы используете таблицы для табличных данных, но не для разметки, это означает, что вы используете списки для перечисления вещей, сильных и слабых. для придания тексту акцента и тому подобного. "

От: http://www.codingforums.com/archive/index.php/t-53165.html

10
cakeforcerberus

Элементы HTML имеют значение. «Семантически правильный» означает, что ваши элементы значат то, что они должны. 

Например, ваши списки определений представлены списками <dl> в коде, ваши сокращения <abbr>s и т.д.

2
Triptych

Это означает, что элементы HTML используются в правильном контексте (не то, что таблицы используются в целях проектирования), CSS-классы названы понятным для человека способом, а сам документ имеет структуру, которая может обрабатываться не браузерными клиентами, такими как screen -читатели, автоматические парсеры, пытающиеся извлечь информацию и ее структуру из документа и т. д.

Например, вы используете списки для создания меню. Таким образом программа чтения с экрана для людей с ограниченными возможностями будет знать, что эти элементы списка являются частями одного и того же уровня меню, поэтому она будет читать их последовательно, чтобы человек мог сделать выбор.

1
user151323

Я никогда не слышал об этом в чисто CSS-контексте, но когда речь идет о CSS и HTML, это означает использование правильных тегов (например, избегая использования тега table для не табличных данных), обеспечивая правильные значения для класса и id, который идентифицирует, что содержат содержащиеся данные (и используя микроформаты в зависимости от ситуации), и так далее.

Все дело в том, чтобы убедиться, что ваши данные могут быть поняты людьми (все отображается правильно) и компьютерами (все правильно идентифицировано и размечено).

0
Thomas Owens