Как понять семантическую структуру HTML

Я считаю, что все знают HTML и CSS, знает разделение структуры HTML и производительности CSS и знает семантику HTML. Это популярные ключевые слова в последние годы. Семантический HTML был востребован только год или два назад в Китае. Посмотрите на структуру HTML, о которой сейчас говорят в группе. Вопросы интервью о структуре HTML, семантические HTML -учетные записи для большой части. Так зачем использовать семантический HTML? Каковы преимущества семантического HTML?

HTML предоставляет структуру контекста и значение содержания документа веб -страницы; Сам HTML не выражает его. Мы видим, что, например, <h1> смелый, размер шрифта - 2ем, жирный; <strong> смелый, не думайте, что это проявление HTML. На самом деле это стиль CSS по умолчанию HTML в действии, поэтому сначала мы должны знать, что HTML не имеет ничего общего с производительностью страницы, это вопрос CSS. Роль HTML на странице - это структура и значение. С точки зрения непрофессионала, это разделить контент. Что здесь размещено и то, что мы положили.

Структура HTML - это скелет страницы. Страница похожа на дом. Структура HTML представляет собой стенку из стального железобетона. Если в доме нет стены стального железобетона, это будет куча кирпичей и не может жить в людях или на работе. CSS - это декоративный материал, бревенчатый пол, мрамор, краска и используется для украшения дома. Нет необходимости говорить больше о силе CSS. Если CSS не имеет структуры HTML, это будет куча деревянных досок, окрашенных вместе, без фактической стоимости. CSS полностью зависит от (x) HTML -документов, которые ссылаются на это. Если вы хотите получить полную мощность CSS в полной мере, очень необходимо предоставить HTML как чистый, так и структурированный контент. HTML является общим термином для публикации гипертекста в Интернете ... HTML использует теги для структуры текста ( http://www.w3.org/markup/ ).

HTML - это метод дополнения структуры и значения содержимого текста (или семантики). Он скажет нам: эта строка является заголовком, и эти строки образуют абзац. Эти тексты являются списками элементов, и эти тексты являются гиперссылками, которые ссылаются на другой файл в Интернете. Стоит отметить, что HTML не должен говорить нам: эти тексты синие, и эти тексты красные. Эта часть контента является самой правой столбцей, и эта строка находится в курсиве. Эта информация, связанная с производительностью, является работой CSS. При разработке фронт-энда, помните: HTML говорит нам, что такое кусок контента (или его значение), а не то, как он выглядит. Когда мы упоминаем семантические теги, то, что мы называем HTML, должно быть полностью отделено от информации о презентации, а теги в нем должны семантически определять структуру документа.

Семантическая структура HTML на самом деле очень проста. Во -первых, освоить семантику каждого тега в HTML. <div> - контейнер; <strong> является акцентом; <ul> <li> - это неупорядоченный список и т. Д. Когда вы видите контент, подумайте о том, что теги могут лучше описать его, и используйте любые теги.

Мы знаем, что недавно добавленные теги HTML5, такие как <Header> и <gooler>, HTML развивается к более надежной семантической структуре HTML. XHTML2 не так продвинут, как HTML5 в этом отношении, что также является причиной смерти XHTML2. Это также показывает, что семантическая структура HTML является тенденцией развития HTML.

Сам HTML не выражает себя. Мы видим, что, например, <h1> смелый, с размером шрифта 2em, жирным шрифтом; <strong> смелый, не думайте, что это проявление HTML. На самом деле это стили CSS по умолчанию HTML в действии, поэтому удаление или потерю стилей может сделать страницу представлять собой четкую структуру не является преимуществом семантической структуры HTML, но у браузеров есть стили по умолчанию. Цель стиля по умолчанию также состоит в том, чтобы лучше выразить семантику HTML. Можно сказать, что стиль браузера по умолчанию и семантическую структуру HTML неотделимы.

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

Использование семантического тега гарантирует, что эти устройства осмыслят веб -страницы. В идеале задача просмотра устройства состоит в том, чтобы отображать веб -страницы в соответствии с условиями самого устройства.

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

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

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

SEO в основном зависит от контента и внешних ссылок вашего сайта.

W3C устанавливает хороший стандарт для нас. Каждый в команде следует за этим стандартом, который может уменьшить много дифференцированных вещей, облегчить разработку и техническое обслуживание, повысить эффективность развития и даже реализовать модульное развитие .

Если у вас есть разные мнения, добавьте их. Пожалуйста, оставьте сообщение для обсуждения.

Спасибо Gui Ge, Milk Tea, Xiaozhi, краже риса, Caspar и CSS Forest Group для обсуждения