Почему мы должны использовать теги, такие как p, span, hx, когда мы можем использовать CSS вместо этого?

Почему мы должны использовать теги, такие как p, span, hx, когда мы можем использовать CSS вместо этого? Это важно с точки зрения SEO?

Краткая версия такова, что различные теги и CSS имеют разные цели.

<h1>Whatever</h1>например, несет в себе определенное количество смысла наряду с его использованием: «Это заголовок, важный - первый уровень» и так далее. Некоторые синтаксические анализаторы также используют теги hx (и другие) для создания структуры структуры документа, которая может использоваться для чего угодно, от обработки данных до доступности (например, программы чтения с экрана, переходящие к следующему вопросу на домашней странице веб-мастеров путем перехода к следующему h3) ,

Вы не можете отклонить семантические теги, основываясь на том, что вы можете сделать с помощью CSS, и наоборот.
Вы можете применить CSS к другому тегу, чтобы он выглядел так же, как h1, например: <span style="font-weight:bold;font-size:2em">Whatever</span>но это все равно не делает этот тег span действительным заголовком с точки зрения функции и семантики. В этом случае тот контур, на который я ссылался выше, был бы практически невозможен, потому что эти промежутки - не заголовки, а просто какой-то текст, который вы произвольно сделали большим и жирным.

Разметка и презентация разные

Это немного похоже на вопрос "почему у нас должны быть стены, когда у нас есть краска?" :)

HTML-теги обозначают содержание вашего контента - это заголовок, список и т. Д.

CSS обозначает, как должен выглядеть ваш контент: заголовки должны быть синими, списки должны иметь отступы, меню должно быть слева и т. Д.

Javsascript рассказывает, как должна вести себя ваша страница - анимация и т. Д.

Итак, без HTML-контента CSS и Javascript действительно не с чем работать.

Эти категории не на 100% черно-белые - например, CSS теперь может определять «переходы», которые являются анимацией, - но они являются основной идеей.

Пожалуйста, смотрите предыдущие обсуждения по этой теме на StackOverflow здесь и здесь .

Хорошая разметка экономит массу усилий и работает лучше

Если вы хотите, чтобы что-то велось как ссылка, вы можете использовать <span class="mylink">и использовать несколько CSS и JS, чтобы все выглядело правильно. Или вы можете просто использовать <a>элемент и получить все это бесплатно, без дополнительного кода для загрузки, потому что браузеры уже знают, что делать, и имеют логику, реализованную в быстром, родном коде. Кроме того, вероятность того, что программы чтения с экрана, мобильные браузеры, поисковые системы, агрегаторы и другие варианты использования, о которых вы даже не задумывались, намного выше.

По этой же причине вам следует использовать <button>действия, которые можно активировать нажатием кнопки, a, <label>чтобы пометить <input>, и a <main>для основного раздела вашей страницы.

Как хорошая разметка влияет на SEO

По сути, SEO - это убеждение поисковых систем в том, что ваш контент наилучшим образом соответствует поисковому запросу. Очевидно, что никто в Google лично не читает каждую веб-страницу и не оценивает ее.

Поэтому, чтобы поисковые системы знали, что у вас за контент, программа должна его проанализировать.

И, эй, смотри! У нас есть целый язык под названием HTML, который предназначен для маркировки вашего контента так, чтобы его могли понять машины! :)

Так что да, четкая разметка поможет поисковым системам лучше индексировать ваши страницы.

В качестве крайнего примера: если заголовок вашей страницы на самом деле был фотографией, которую вы взяли с заголовком газеты, это может выглядеть интересно, и люди могли бы читать его очень хорошо, но для поисковой системы это было бы просто изображение без смысла. , Принимая во внимание, что <h1>Turtle Groomer 5000</h1>в поисковых системах четко указано, что у вас есть продукт, который облегчает гигиену тестов.

Пожалуйста, подумайте также о людях с какими-либо нарушениями, которым (в качестве примера) нужно использовать устройство для чтения Брайля. В таких случаях HTML-теги имеют гораздо большее значение, чем стили CSS.

Су ответил на семантическую часть. Что касается SEO, вы обнаружите, что элемент h1 получает больший вес в поисковых системах, чем другие теги. Теги h2 / b / strong имеют немного больший вес, чем обычный текст.

Большинство других тегов практически одинаковы, но вы всегда должны использовать наиболее подходящий тег для работы. Google недавно начал синтаксический анализ таблиц, когда они используются для табличных данных, и другой надлежащим образом используемый HTML может сигнализировать о том, какой контент важнее других.

Для HTML5, выделите жирным шрифтом и курсивом в HTML5 .

Резюме:

Используйте, <b>когда вы хотите, чтобы текст имел другой стиль без контекстной важности, но используйте, <strong>когда вы хотите, чтобы текст имел дополнительную важность с точки зрения контента или SEO.

Используйте, <i>чтобы сместить настроение текста, но используйте, <em>чтобы сделать текст выразительным.

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

Во-первых, <hx>это довольно важный тег, так как он определяет заголовки, как уже упоминали другие. Заголовки очень полезны не только для внешнего вида, но и потому, что они разделяют разделы так, как это не может сделать похожий друг на друга. Просто взгляните на Википедию, например. Некоторые программы используют теги такого типа, чтобы «разбить» документы на части или даже создать автоматическое оглавление. Поисковая система предполагает, что текст внутри <h1>тега будет более важным, поскольку это заголовок - заголовок.

Кроме того, хотя таблицы стилей хороши, некоторые устройства будут игнорировать таблицы стилей и фокусироваться только на HTML, где <em>пригодится такой тег как . Если таблицы стилей были отключены или возникла проблема с загрузкой (например, проблемы с подключением к Интернету), текст по-прежнему отображается в формате. <em>Можно также сказать, что в слове должен быть сделан акцент на слове, тогда как курсивом может быть что угодно - от названия фильма до простого отличия заголовка изображения от обычного текста. Это может быть использовано теми, кто использует инструменты для людей с ограниченными возможностями, которые в противном случае не в состоянии захватить акцент вообще.

<span>с другой стороны, это в значительной степени встроенная версия <div>тега, и, если что-то, она может просто избавить вас от необходимости вводить дополнительный класс (с учетом сказанного, вы бы действительно хотели использовать <span class="italic">вместо <i>каждого экземпляра курсива) это делает код более трудным для чтения, менее стандартизированным (при широком предположении, что большинство людей будет использовать последнее по сравнению с первым), и никак не улучшает документ.

<p>также пригодится для людей с ограниченными возможностями, так как он гарантирует, что текст может быть разбит на управляемые абзацы так, как это <br />невозможно.

Конечно, мы можем сказать, что HTML не предназначен для стиля, но есть тонкая грань между дизайном и стилем; и, честно говоря, я бы сказал, считают это предпочтением пользователя. Используете ли вы <i>или <span class="italic">, это зависит от вас, и не будет иметь никакого значения для SEO. В конце концов, зачем ограничивать нас одним способом? (например, как мы могли выбрать, использовать ли точки с запятой в конце строк в JavaScript - я всегда использую их, в то время как другие никогда не используют их, и это совершенно не влияет на функциональность.)