Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Логический Стиль | используя структурные элементы, которые делают вашу страницу более доступной

  1. Блочный уровень и встроенные элементы
  2. Логические и презентационные элементы
  3. Пейзаж
  4. Использование логического стиля
  5. Добавление Глубины

Путь // → → ЛОГИЧЕСКИЙ СТИЛЬ

Многие авторы HTML не знают о различиях между логическими (структурными) элементами и их презентационными аналогами, а также о том, какой элемент больше подходит в различных обстоятельствах. Здесь вы познакомитесь с терминологией и методологией создания логических структур страниц.

Эта страница была последняя обновленный 2012-08-21 Эта страница была последняя обновленный 2012-08-21


Блочный уровень и встроенные элементы

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

Элементы уровня блока:

  • <Адрес>
  • <BLOCKQUOTE>
  • <DIV>
  • <FIELDSET>
  • <h1> - <h6>
  • <Ч>
  • <Легенда>
  • <Р>
  • <Предварительно>
  • <ul>, <ol>, <li>, <dl> и <dd>

Остальные элементы являются встроенными элементами. Правила, которые управляют этими двумя типами элементов, просты, но важны:

  • Элементы уровня блока могут содержать другие элементы уровня блока и встроенные элементы
  • Встроенные элементы не могут содержать элементы уровня блока.

Например, элемент не может иметь h1 внутри него, но заголовок может содержать ссылку. Элементы таблицы не являются строго типами, но могут содержать блочные или встроенные элементы. Элемент <br> - это еще один особый случай. Это строго «встроенный структурный» тип элемента, но так как он не может содержать никакого дополнительного содержимого, это не имеет значения. С этими правилами легко ошибаться, поэтому проверяйте свои страницы с помощью W3C »Валидатор ,

Можно изменить способ отображения элемента через его CSS отображать свойство ,

Логические и презентационные элементы

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

Как люди продолжают нуждаться в напоминании; оригинальные спецификации HTML содержал логические элементы почти исключительно. HTML был структурным языком , а не языком дизайна. Он предназначался для передачи информации самым простым способом. С тех пор Netscape и Microsoft создали опасные ситуация у нас был год или два назад, добавив в презентационные расширения, такие как элемент шрифта. Файлы HTML стали смехотворно большими, раздутыми из-за лишних тегов и хаков презентаций. К счастью, HTML 4.01 а также XHTML 1.0 спецификации устарели многие элементы представления (заменив их таблицы стилей ), и принес много новых логических элементов, которые добавляют глубину вашей информации. HTML-код снова может быть простым и понятным.

Пейзаж

В старые времена, когда было нелегко контролировать внешний вид вашей страницы (у нас есть CSS несмотря на все это сейчас), было допустимо использовать элементы представления для всего и оставлять свои страницы без какой-либо логической структуры. Все были одержимы тем, как выглядели их страницы, не говоря уже о доступность «проблемы». Люди не использовали заголовок элементы, потому что они выглядели ужасно; легко и просто.

Это был неправильный путь. Потоп WYSIWYG Графические редакторы в то время не давали этой культуре эстетики совместимости никакой пользы, и редакторы разослали тысячи страниц, заполненных шрифтовыми тегами и без заголовков.

Проблема: элементы представления могут означать только одно . Элемент <b>, например, означает «жирный текст». Что происходит, когда текстовый или аудио браузер читает этот элемент? Это бессмысленно в этом контексте, и поэтому любой акцент, который вы, возможно, намеревались показать, используя элемент в первую очередь, теряется для этого читателя. Если вы используете <strong>, каждый браузер может выбрать свою собственную обработку и соответственно представить свой результат - выделив текст жирным шрифтом или произнеся слова громче и т. Д.

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

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

Использование логического стиля

Итак, каковы логические элементы, и как они будут выглядеть по умолчанию в графическом браузере?

  • <h1> - <h6> создавать заголовки. Они должны течь последовательно (старайтесь не пропускать уровни). Заголовок страницы всегда должен отображаться в виде заголовка 1-го уровня, причем подзаголовки каскадно идут вниз от него. Текст обычно отображается крупным жирным шрифтом. Помните, что они все элементы уровня блока. Вы можете убрать поля с CSS.
  • <em> создает акцент и обычно отображается курсивом. Эквивалент <я>.
  • <strong> создает сильный акцент и обычно отображается жирным шрифтом. Эквивалентно <b>.
  • <code> подходит для предоставления примеров компьютерного кода и обычно отображается в моноширинном шрифте. Эквивалент <tt>.
  • <blockquote> - это тег уровня блока, который используется для включения многострочных цитат из других источников. Обычно отображается с отступом с обеих сторон.
  • <cite> используется для обозначения названия произведения, на которое в данный момент идет ссылка. Обычно он отображается курсивом.
  • <q> это короткая цитата из другого источника. Современные браузеры будут отображать содержащий текст с кавычками, добавленными с обеих сторон.
  • <pre> - это элемент уровня блока, который отображает текст шрифтом фиксированной ширины в точности так, как он был напечатан в исходном коде (т. е. учитывает все табуляции, пробелы и разрывы строк). pre не является строго логическим элементом, но его использование часто необходимо.
  • <del> - это элемент HTML 4.01, используемый для отображения версий документа; текст удаляется со страницы в этом случае. Обычно отображается в виде текста с зачеркиванием.
  • <ins> является партнером del по преступлению, используется для отображения текста, вставленного во время ревизии. Обычно отображается с подчеркиванием.
  • <адрес> должен быть обернут вокруг контактной информации, включая адреса электронной почты.
  • <kbd> подходит для разметки текста, который должен вводиться читателем на клавиатуре. Обычно отображается шрифтом фиксированной ширины.
  • <var> отмечает имя переменной. Полезно, если вы пишете о технических предметах, таких как компьютерное программирование.
  • <samp> используется для обозначения примера вывода из некоторого кода.

Добавление Глубины

Атрибут title позволяет добавлять всплывающую подсказку к любому элементу вашей страницы . Они особенно полезны применительно к ссылкам, поскольку помогают читателю судить, что он может найти, если щелкнет ссылку. Вы должны добавить информационные заголовки к как можно большему количеству своих ссылок, следуя этим »Название руководства ,

Есть еще три элемента, все они введены в HTML 4, которые позволяют добавлять дополнительную информацию во всплывающую подсказку, используя этот атрибут.

  • <abbr> используется для обозначения аббревиатуры. Раскройте полное значение аббревиатуры во всплывающей подсказке. Этот тег не применяет никакого собственного форматирования.
  • <acronym> используется для включения аббревиатуры (например, ASCII) с полным значением во всплывающей подсказке (которую вы должны попытаться определить по крайней мере для первого экземпляра каждой аббревиатуры на странице). Обычно форматирование не применяется.
  • <dfn> используется для определения хитрого слова. Напишите свое собственное определение в подсказке. Обычно отображается курсивом.

sourcetip: Поскольку эти элементы были введены совсем недавно, большинство пользователей сети не будут знать, что их искать. Кроме того, некоторые из них не делают их присутствие очень очевидным, поэтому вы должны использовать свое собственное форматирование (конечно, через), чтобы помочь вашим читателям найти их. добавлять
abbr, аббревиатура, dfn {курсор: помощь; бордюр: пунктирная известь 1px; }
в свою таблицу стилей, чтобы повернуть курсор справки и добавить цвет к 3 элементам, составляющим селектор. Этого должно быть достаточно, чтобы большинство пользователей поняли, что им следует на минуту задержать на них мышь.

Что происходит, когда текстовый или аудио браузер читает этот элемент?
Какой заголовок?
Где начинаются разделы страницы?