Каковы преимущества использования семантического HTML?
Ханойские башни
Вот являются той, с которой можно взаимодействовать: http://www.mazeworks.com/hanoi/
Используя рекуррентные соотношения, точное количество перемещений, которых требует это решение, может быть вычислено: в€2 ч’ 1. Этот результат получен путем отмечания, что шаги 1 и 3 берут Th в€’ 1 перемещение, и шаг 2 берет одно перемещение, давая Th = 2Th в€’ 1 + 1. См.: http://en.wikipedia.org/wiki/Towers_of_hanoi#Recursive_solution
12 ответов
Не о производительности
Семантическая разметка не о производительности, а о значении.
Давайте представим две параллельные вселенные.
- В Dumb HTML World есть только один тег:
- Между тем, в Подробном мире HTML , есть множество имен. У вас есть
<параграф>и- «Мой пользователь слепой, поэтому я должен сообщить, что есть изображения, предложить прочитать связанные подписи и не беспокоиться о загрузке фактических данных изображения».
- «У моего пользователя маленький экран и хорошее зрение, и попросил меня сделать абзацы маленькими, чтобы многие из них поместились на странице ».
- « Мой пользователь не заботится о сносках и никогда не хочет их видеть ».
Реальный мир находится где-то посередине между этими двумя сценариями .
Некоторые аспекты семантического HTML несколько идеалистичны, но принцип верен. Например, использование вместо означает «этот текст важен» и не обязательно «этот текст должен быть жирным». Возможно, ваш пользователь хочет, чтобы важный текст был выделен оранжевым цветом. Это их дело.
Дело в том, HTML - это разметка , которая предназначена для полезной разметки . Семантический HTML - это то, чем должен быть весь HTML: полезные, значимые ярлыки.
Обеспечение быстрой загрузки вашего сайта - это совсем другой вопрос.
(См. Также: мой ответ здесь .)
Приложение - переход к семантическому HTML
Я думаю, что со временем HTML становится более семантическим.
Вернувшись в мир Dumb HTML, они, вероятно, закончили бы сумасшедшей разметкой, например и . Веб-программисты будут жаловаться: «Эй, мы делаем это постоянно. Почему бы просто не иметь тег ? Это облегчило бы нашу жизнь».
В реальном мире люди постоянно кодирование таких вещей, как
В дополнение ко всем этим ответам семантический HTML улучшает ваш поисковый рейтинг (см. SEO ). Google и другие поисковые системы ищут определенные семантические части вашей страницы и используют их для ранжирования.
Хотя написание семантически правильной разметки хорошо для организации кода и управления им, а также упрощает разделение стиля и кода, я думаю, что за его использованием стоит более сильная мотивация. или другой тип сценария) способность анализировать ваш контент для оценки его назначения.
Микроформаты являются логическим продолжением семантической разметки; использование стандартов микроформатов позволяет нужно сделать более точную оценку.
Очистить код проще в обслуживании
Помимо преимуществ для пользователя, семантический HTML имеет больше смысла для людей: вас и ваших коллег.
Если бы вы писали код JavaScript, вы бы писали функции вот так?
dothething(q);
CmtFn(x);
... или вот так?
loadUserData(username);
parseComments(language);
Если вы сказали, что №2 лучше, то тот же принцип применим к HTML . Четкая маркировка вещей, правильный отступ в коде и т. Д. Упрощают обслуживание кода.
Кроме того, использование семантического HTML будет полезно для пользователей вспомогательных технологий, таких как программы чтения с экрана , который может изменить высоту или пол голоса читателя, чтобы обозначить важную информацию, презентационную информацию или акцент. Например, если информация, которую вы действительно хотите выделить, будет обозначена как < em> для демонстрации, а не просто выделена жирным шрифтом (вы все равно можете сделать тег жирным в вашем CSS) программа чтения с экрана изменит интонацию этого конкретного слова, чтобы выделить его.
Помимо правильного разделения данных и форматирования, код становится более эффективным и читаемым на экране, правильное использование разметки не только будет визуально обозначать принадлежность информации к определенному типу, но и снова принесет пользу пользователям вспомогательных технологий. Например, если у вас есть список информации, просто размеченной как абзацы, для кого-то, кто не может видеть страницу, нет никакого способа указать, что информация связана, тогда как если ваша информация размечена как скажем и неупорядоченный список или упорядоченный список
, визуально для кого-то легче читать эту информацию, потому что она имеет четкий отступ или маркированный список. Например, для пользователей программ чтения с экрана, когда дело доходит до списка, программа чтения с экрана объявляет, что предстоящий контент представляет собой список.
Это похоже на использование стиля кодового блока здесь, в Stack Overflow - если вы используете ' код' форматирование для выделения любого кода в вашем сообщении, оно делает его более понятным для чтения и показывает, что выделенный текст является фактическим кодом. HTML такой же.
Семантический код использует элементы html для данной цели. Хорошо структурированный HTML будет иметь семантическое значение для широкого круга пользователей и пользовательских агентов (браузеры без таблиц стилей, текстовые браузеры, КПК, поисковые системы и т. Д.)
Преимущества
Два упомянутых ранее момента являются основными преимуществами использования семантический код. Если мы используем всемирно известные теги, другие поймут без каких-либо дополнительных усилий. Любая программа, использующая всемирно известные теги, не сможет понять нашу страницу.
Рабочий пример этого - то, что поисковые системы оценивают важность ключевых слов в зависимости от того, какие они есть. Например, заголовок статьи, заключенный в один из заголовков (h1 и его иерархия), получит более высокую важность и, следовательно, видимость, чем промежутки. Семантический HTML обеспечивает эффективную поисковую оптимизацию (SEO).
Средство извлечения семантических данных W3C является хорошей демонстрацией возможностей использования семантического HTML и автоматизации программного обеспечения.
Побочным эффектом исключения презентационной информации из семантической разметки является что теперь данные и их представление могут быть разделены при реализации. Это означает, что вы можете изменить представление, не касаясь данных, или применить представление к нескольким типам данных. Именно этого достигают вместе такие технологии, как CSS и XHTML. Конечно, семантический HTML не является необходимым для этого разделения, но, будучи семантическим, он обеспечивает исключение презентационной информации.
http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic -код.
Non-semantic markup risks being inaccessible for those with disabilities, for a start. Read Nicholas C. Zakas's recent article about this topic; I think it's a great introduction to the subject.
And bear in mind that a search engine such as Google sees your site in much the same way as the assistive technology used by a disabled person. The Googlebot neither knows nor cares that something has rounded corners and a pretty blue background, but it makes a great difference if it knows that it's an and not just any old
Вам и другим разработчикам легче узнать, что происходит, лучше читать, когда CSS и др. Недоступны. «Может» лучше работать при использовании программы чтения с экрана, что улучшает ваши возможности. Что еще более важно, я думаю, это дает вам привычку писать более качественную разметку, которая с большей вероятностью будет подтверждена без необходимости делать слишком много исправлений. Проще говоря, это хорошая практика, но я бы сказал, не слишком зацикливайтесь на том, чтобы все время делать все правильно, силу мозга лучше потратить на другие проблемы, чем спорить о погоде, dl лучше, чем ul для данной проблемы и т. Д.
семантический HTML и производительность
Семантический HTML - это не только использование правильных тегов для правильных целей, что, очевидно, улучшает SEO, но также разделение разметки (HTML), стиля (CSS) и скрипты (JS). Разделение не только улучшит обслуживание, но, безусловно, также улучшит производительность загрузки, поскольку вы обычно кешируете файлы CSS / JS. Если вы загромождаете HTML-файл необработанным кодом CSS / JS и / или используете стиль вместо id или class , это сделает только HTML-страницу неоправданно больше, и на его вытаскивание потребуется больше времени.
Вы можете обнаружить, что отделение ваших данных от представления ваших данных поможет вашей работе в качестве программиста. Я имею в виду, что в конечном итоге вы захотите отображать свои данные по-другому. Когда наступит этот день, вы не хотите, чтобы ваши данные были смешаны с форматированием.
Семантический код использует элементы html для их данной цели. Хорошо структурированный HTML будет иметь семантическое значение для широкого круга пользователей и пользовательских агентов (браузеры без таблиц стилей, текстовые браузеры, КПК, поисковые системы и т. Д.)
Преимущества
Два упомянутых ранее момента являются основными преимуществами использования семантический код. Если мы используем всемирно известные теги, другие поймут без каких-либо дополнительных усилий. Любая программа, использующая всемирно известные теги, не сможет понять нашу страницу.
Рабочий пример этого - то, что поисковые системы оценивают важность ключевых слов в зависимости от того, какие они есть. Например, заголовок статьи, заключенный в один из заголовков (h1 и его иерархия), получит более высокую важность и, следовательно, видимость, чем промежутки. Семантический HTML обеспечивает эффективную поисковую оптимизацию (SEO).
Средство извлечения семантических данных W3C является хорошей демонстрацией возможностей использования семантического HTML и автоматизации программного обеспечения.
Побочным эффектом исключения презентационной информации из семантической разметки является что теперь данные и их представление могут быть разделены при реализации. Это означает, что вы можете изменить представление, не касаясь данных, или применить представление к нескольким типам данных. Именно этого достигают вместе такие технологии, как CSS и XHTML. Конечно, семантический HTML не является необходимым для этого разделения, но, будучи семантическим, он обеспечивает исключение презентационной информации.
http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic -код. html
Многие думают, что производительность - это мера скорости, с которой что-то выполняется. В презентации Линуса Торвальда на git (на youtube) он утверждает, что производительность - это нечто большее. Производительность - это ещё и полезность. Я думаю, что моя машина - это машина производительности, потому что она потребляет меньше топлива. Сложный в использовании веб-сайт может быстро загружаться, но плохо справляется со своей задачей.
Аргумент о том, что семантика в Интернете повышает эффективность, так как CSS и js файлы кэшируются, не является убедительным. Можно построить сайт с очень маленькой площадью, что совсем не семантично. Но в большинстве случаев, если Вы вдумчивы и говорите то, что Вы имеете в виду (семантика), то Вы, вероятно, увеличиваете общую производительность, потому что в любом случае Вы действуете эффективно! Говоря то, что Вы имеете в виду - лучший ответ в большинстве случаев.
Многие люди считают, что Вы никогда не должны отклоняться от семантической паутины. Эта конкретная дисциплина/правило никогда не должна быть нарушена, и это вызывает жесткую критику или насмешки. Это вряд ли практично, учитывая широкий спектр ситуаций и областей применения, в которых может существовать ваше приложение. Иногда более разумно быть гибким.
Наконец, нет абсолютной семантики. В некоторых случаях я бы посчитал ячейку таблицы столбцом. А насколько отличаются сильные и жирные термины? Вы действительно можете утверждать, что "сильный" должен использоваться всегда? "Смелый" в большинстве случаев имеет одинаково ясное значение. Конечно, "ударение" и "курсив" различаются. "Курсив" - это реализация "акцента". Если вы семантичны до крайности, то в конечном итоге вы можете потратить много времени и усилий на соблюдение правил и меньше времени на то, чтобы что-то сделать. К тому же, вы будете ворчать!
Надеюсь, это поможет!