Какой из вариантов структуры html документа правильный
Перейти к содержимому

Какой из вариантов структуры html документа правильный

  • автор:

Структура документа и веб-сайта

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

Необходимые знания: Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача: Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Основные составляющие документа

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

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

Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.

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

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

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

«Типичный веб-сайт» может быть структурирован примерно так:

HTML для структурирования содержимого

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

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

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

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

  • Заголовок:.
  • Навигационное меню:.
  • Основное содержимое:, с различными подразделами содержимого, представленными элементами , и .
  • Боковая панель:, обычно располагается внутри .
  • Нижний колонтитул:.

Активное обучение: исследование кода для нашего примера

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

doctype html> html> head> meta charset="utf-8" /> title>Заголовок моей страницыtitle> link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css" /> link rel="stylesheet" href="style.css" />  


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

  • Статья «Как учиться и справляться с негативными мыслями»
  • Статья «Ловушки обучения»
  • Статья «Сложные простые задачи по программированию»
  • Урок «Как эффективно учиться на Хекслете»
  • Вебинар «Как самостоятельно учиться»

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Конспект «Структура HTML-документа»

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

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

Для подключения стилей к странице существует тег . Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

Ещё один элемент, который располагается в — это тег . В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

 Тренажёры — HTML Academy 

Ещё один важный тег, располагающийся внутри это тег . Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset :

Самая распространённая современная кодировка — utf-8 .

Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords . Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description :

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

Тег содержит вводную часть страницы, которую чаще называют «шапкой», а тег описывает заключительную часть страницы, или «подвал». Существует тег , который обозначает крупный смысловой (или «логический») раздел.

Тег , обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег (сокращение от английского «navigation»). Обычно в включают ссылки на другие страницы или навигацию по текущей странице.

Тег включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

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

Спецификация HTML

Раздел 1 Введение

Раздел 1.1 Происхождение языка

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). Для разметки параграфов предназначен тег

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

  • Наша группа в ВК
  • Наша страница в Twitter
  • Наш канал в Telegram

Структура HTML-документа

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

Структура HTML-документа

В HTML4 веб-страница состоит из трёх главных частей:

  1. Объявление типа документа ( Document type declaration (DTD) ) сверху;
  2. Тег HTML , включающий в себя следующие элементы:

1. Головную часть ( Head );
2. Тело ( Body ):

Структура HTML-документа

Посмотрите на пример, приведенный выше. Заметили красный и черный текст? Черным обозначено содержимое, а красным — теги из которых состоят элементы:

Структура HTML-документа - 2

Объявление типа документа (1)

Первая строка в примере структуры HTML — не элемент, а объявление типа документа (также называемое декларацией DOCTYPE). Оно предоставляет информацию о версии HTML-документа и указывает браузерам спецификацию HTML. Правильный документ объявляет, какая версия языка используется.

Посмотрите : Информация о DOCTYPE

Элемент HTML (2)

Весь документ содержится в элементе html . Он часто называют корневым, и он не может находиться внутри любого другого элемента. Используется и в HTML , и в XHTML документах .

Внутри элемента html документ разделяется на « голову » ( head ) и « тело » ( body ).

Элемент Head (3)

Элемент head содержит описательную информацию о самом документе. То, что в нем упоминается, не должно отображаться в браузере, но передает ему некоторую информацию. Например, заголовок, используемые таблицы стилей, скрипты и другую информацию.

Элементы Meta (4)

Элемент структуры сайта HTML meta внутри head предоставляют информацию о метаданных. Meta-элемент может содержать разные виды информации. В примере, приведенном выше, он определяет кодировку символов ( character encoding ), используемую в документе.

Примечание : метаданные — это информация о документе, но не его содержание.

Элемент Title (5)

Head также содержит обязательный элемент title . Согласно спецификации HTML , каждый документ должен включать в себя заголовок. Заголовок, который указан в этом элементе, показывается в вкладке браузера.

Элемент Body (7)

body содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа , которая отображается в браузере.

Запомните

  • Тег HTML — указывает браузеру, как контент должен отображаться в нем.
  • Любой HTML-документ состоит из трех частей — определение типа документа, голова и тело.
  • HTML 5 определяется с помощью , в то время как HTML 4 имеет три разных способа определения типа — Strict , Transitional и фреймовая структура HTML .
  • — это корневой элемент, который не может помещаться в любой другой.
  • Элементы и вкладываются внутрь элемента .
  • содержит информацию для браузера
  • содержит все, что должно быть отображено в окне браузера.
  • Элемент HTML — это комбинация открывающего тега, содержимого и закрывающего тега.
  • Декларация Doctype сообщает браузеру, какому стандарту он следует.
  • может содержать заголовок, таблицы стилей, скрипты и метаданные.
  • Метаданные — это информация о документе, но не его содержимое.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *