HTML5 серия: структура контента

1. Элемент раздела
2. пример кода
3. Элемент статьи
4. пример кода
5. статья как дочерний элемент раздела
6. пример кода
7. пример кода
8. Див лучше!
9. раздел как дочерний элемент статьи
10. пример кода
11. Элемент в стороне
12. пример кода
13. пример кода

После того как мы в вторая часть нашей серии HTML5 Рассматривая элементы, которые отделяют «барабан» страницы от реального контента, мы хотим сосредоточиться в этом посте на структурировании контента интернет-страницы.

Элемент раздела

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

пример кода

<section> <h1> Лига чемпионов </ h1> <p> В течение сезона ... </ p> ... </ section> <section> <h1> Бундеслига </ h1> <p> С самого начала позвольте немецкому мастеру ... </ p> ... </ section>

Таким образом, раздел предназначен для приблизительного тематического разбиения страницы на разделы. Это именно то, что означает слово «раздел» (английский раздел или глава).

Элемент статьи

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

пример кода

<article> <header> <address> Автор: <a href="..."&gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог? </ h1> </ header> <p> Ранее, когда блоги еще назывались интернет-дневниками, ... </ p> </ article> <article class = "comment"> <h1> Comment by Mario </ h1> <p> Хороший аргумент. Не все должны знать все. </ P> </ article>

статья как дочерний элемент раздела

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

пример кода

<article> <header> <address> Автор: <a href="..."&gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог? </ h1> </ header> <p> Ранее, когда блоги еще назывались интернет-дневниками, ... </ p> </ article> <section> <article> <h1> Комментарий Марио </ h1> <p> Хороший аргумент. Не все должны знать все. </ P> </ article> </ section>

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

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

пример кода

<article> <! - статья блога -> </ article> <section> <h2> comments </ h2> <ol id = "commentlist"> <! - комментарии -> </ ol> <форма id = "reply"> <! - форма ответа -> </ form> </ section>

Див лучше!

Элемент section также может быть заменен элементом div, при этом страница не становится несущественной, потому что div были изобретены для этой цели: они группируют связанный контент, и одна только группировка не добавляет к нему никакого смысла. должен получить. Утверждая, что и статьи блога, и комментарии касаются одной и той же темы, использование элемента div было бы предпочтительнее элемента section, поскольку элементы section не являются общими контейнерами и поэтому должны использоваться исключительно для описания структуры раздела. Страница, которая будет использоваться.

раздел как дочерний элемент статьи

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

пример кода

<article> <h1> Допинг: Бен Джонсон обманывает весь мир </ h1> <p> Бен Джонсон, канадец ... </ p> <section> <h2> Сеул 1988 </ h2> <p> 24 мая В сентябре 1988 года Бен Джонсон справился с невероятным ... </ p> <p> 2 дня спустя его моча ... </ p> </ section> <section> <h2> возвращение и возвращение </ h2> < После его четырехлетнего запрета ... </ p> <p> В Монреале он снова был уверен в ... </ p> </ section> </ article>

Элемент в стороне

В некоторых учебниках разделение страниц характеризуется краями различной ширины. Более широкий из двух краев покрывает примерно одну пятую общей ширины, поэтому является небольшим, лежащим на краевом столбце и поэтому называется краевым столбцом. Но «маргинальный» также имеет значение «вторичный»; Что может быть более уместным для размещения в граничной колонке дополнительной информации, которая не является неважной, а лишь незначительно связана с актуальной темой? Это могут быть советы, подсказки, альтернативные способы речи или правописания или иллюстративные наброски. Вполне логично, что этот элемент дизайна попал от печатного носителя к Интернету, особенно если учесть, что большинство людей, вероятно, будут смотреть на веб-страницы в альбомном формате, даже если их доля уменьшается из-за постоянно растущих мониторов.

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

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

пример кода

<article> <h1> Наша солнечная система </ h1> <p> Планетная система состоит из 8 планет, ... </ p> <aside> <h1> Плутон </ h1> <p> К концу 20-го века обнаружил большое количество плутоподобных объектов за короткое время. Правильно, все они должны были быть классифицированы как планеты. </ p> </ aside> <статья>

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

пример кода

<aside> <nav> <h1> заархивированные сообщения </ h1> <ol> ... </ ol> <nav> </ aside>

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

Похожие

Комментарии