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

Структура html-кода

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

Пример 2. Исходный код веб-страницы

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Пример веб-страницы</title>

</head>

<body>

<h2>Заголовок

</h2>

<!— Комментарий —>

<p>Первый абзац.</p>

<p>Второй абзац.</p>

</body>

</html>

Скопируйте содержимое данного примера и сохраните его в папке под именем example.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example.html. В браузере откроется веб-страница, показанная на рис.4.

Рис. 4. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать

<!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл.1. приведены основные типы документов с их описанием.

Табл. 1. Допустимые DTD

DOCTYPE

Описание

HTML 4.01

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Строгий синтаксис HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Переходный синтаксис HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

В HTML-документе применяются фреймы.

HTML 5

<!DOCTYPE html>

В этой версии HTML только один доктайп.

XHTML 1.0

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Строгий синтаксис XHTML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Переходный синтаксис XHTML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>

Документ написан на XHTML и содержит фреймы.

XHTML 1.1

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании<!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте<!DOCTYPE> в начало документа.

<html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (

<body>).

<head>

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

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 5).

Рис. 5 Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

<h2>Заголовок</h2>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег

<h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги<h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

<!— Комментарий —>

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

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

<p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

<p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

    1. Теги

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

<тег атрибут1=»значение» атрибут2=»значение»>

<тег атрибут1=»значение» атрибут2=»значение»></тег>

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

Структура html-документа, веб-страницы | основные теги

Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. — «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).

doctype

Каждый HTML документ, отвечающий спецификации HTML какой-либо версии (мы будем указывать последнюю версию), обязан начинаться со строки декларации версии HTML, делается это с помощью объявления <!DOCTYPE> следующим образом:


<!DOCTYPE html>

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

Хотя слово doctype размещается в угловых скобках (< и >), оно не является тегом, это инструкция, предназначенная специально для браузеров, и восклицательный знак (!) в начале отличает ее от остального кода в HTML-документе.

Элемент html

После объявления версии и типа документа необходимо обозначить его начало и конец, делается это с помощью элемента <html>:


<!DOCTYPE html>
<html>
</html>

Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: <head> и <body>.

Элемент head

Элемент <head> является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента <title>, рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента <head>.

Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:


<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Элемент title

Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
</html>

Браузеры отображают содержимое элемента <title> как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:

тег title

Элемент body

Элемент <body> является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель — отделить содержимое документа от метаданных:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
  </body>
</html>

Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

С этой темой смотрят:

Урок 2. Структура html документа (страницы)

Учим структуру HTML


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

Дабы не огорчать себя растратой бесценного времени, давайте посмотрим пример ниже и запомним расположение открывающих и закрывающих тегов html, head, body и того, что в них располагается

<html>
  <head>
    <title> <!--В head, например, есть тег title, в котором нужно записать заглавие страницы -->
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 
В тело документа вообще можно вставить не только текст, но и картинки, ссылки и прочее. 
Как это делать - рассмотрим позже. Поэтому пока здесь только текст  

</body>
</html>

Важно понять и соблюдать базовую структуру html-документа. Нужно будет выучить последовательно базовых тегов, таких как html, head, body. Если её нарушить, то и Ваш html-документ будет отображаться некорректно.

html — с него начинается и заканчивается html-документ. Исключение может составить так называемая — спецификация. О ней я расскажу ниже.
head — в голове документа содержатся данные о сайте или странице: заголовок, ключевые слова, описание, автор и тд
body — мы же пока конкретнее остановимся на ТЕЛЕ документа. Именно между открывающим и закрывающим тегами body будем вставлять текст, ссылки, изображение и многое другое.

Ещё раз смотрим код выше, анализируем и читаем дальше.

Спецификация документа HTML


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

И всё же…
html-документ в идеале должен состоять не только из базовых тегов (html, head,body). Почти все web-страницы начинаются со сторки вида:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Это так называемая спецификация html документа.

А уже позже прописываются остальные теги: html, head,body и их содержимое.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 

</body>
</html>

Спецификация помогает браузеру определить, как правильно интерпретировать Ваш html-документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии XHTML 1.0.

Проще говоря, если Вы не укажете спецификацию или укажете её старую версию, то некоторые элементы у Вас будут отображены некорректно или не отображены вовсе.

Тег DOCTYPE cогласно спецификациям HTML и XHTML (что означает Объявление типа документа) сообщает валидатору, какую именно версию (X)HTML вы используете на своей странице. Данный тег всегда должен располагаться на Первой строчке каждой вашей старницы! Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Из истории спецификации…
Решение задачи создания спецификаций HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно — W3C), владельцем которой является создатель HTML — Бернерс-Ли. В задачи W3C входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/.

Базовые теги HTML


После спецификации документ продолжает открывающий тег html. Закрывающий тег также должен Обязательно прописываться в Конце html-документа.

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->

<html>
  <head>
    <title> 
      Название страницы 
    </title>
  </head>
<body>

<h2>Любой заголовок</h2>
Просто текст
Другой текст
<p>Текст в параграфе. Он будет писаться с новой строки, выделяться отступами и заканчиваться с закрывающим тегом</p>

</body>
</html>

Пример кода html-документа


Итоговая страница с комментариями по каждому тегу. Обязательно к внимательному просмотру.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->
<html> <!-- С открывающего html начинаем наш документ -->

   <head>  <!-- Открываем головную часть документа -->
     <title>Здесь будет заголовок Вашего документа</title>
   </head>  <!-- Закрываем головную часть документа. Пока не закрыли, к тегу body НЕ переходим -->

 <body> <!-- Открываем тело документа. ЗДЕСЬ будет всё содержимое -->

     Тело документа. Можно писать что угодно
     <h2>Вставлять заголовки</h2>
     И текст <b>жирный</b> и <i>курсив</i>

 </body>  <!--Закрываем body. После этого Содержимое не вставляем-->

</html> <!--Закрываем html. После него уже ВООБЩЕ НИЧЕГО НЕ вставляем-->

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

В процессе перевода.

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

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

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

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

Заголовок
Обычно это большая полоса вверху страницы,  с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Навигационное меню
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Основное содержимое
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
Боковая панель
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Нижний колонтитул (футер)
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

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

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

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

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

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

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

  • Заголовок: <header>.
  • Навигационное меню: <nav>.
  • Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
  • Боковая панель: <aside>, обычно располагается внутри <main>.
  • Нижний колонтитул: <footer>.

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

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории 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">

    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->

    <header>
      <h2>Заголовок</h2>
    </header>

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

       <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Здесь основное содержимое нашей страницы -->
    <main>

      <!-- Она содержит статью -->
      <article>
        <h3>Заголовок статьи</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h4>Подраздел</h4>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h4>Ещё один подраздел</h4>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- Дополнительный контент также может быть вложен в основной контент -->
      <aside>
        <h3>Связанные темы</h3>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>

    </main>

    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>

  </body>
</html>

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

Подробнее об элементах HTML макета

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

  • <main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
  • <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
  • <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
  • <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
  • <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings). 
  • <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
  • <footer> представляет собой группу конечного контента для страницы.

Несемантические обертки

Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, что бы не запутаться и всегда добиватся того, чтобы страница отображалась корректно.

<span> — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00 
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент 
свет на сцене должен быть приглушён]</span>.</p>

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

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

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

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

Перенос строки и горизонтальный разделитель

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

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

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента <br> абзац  разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.

<hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо порхнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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


Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо порхнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

Планирование простого веб-сайта

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

  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Приментие наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он Вам ещё понадобится.

Заключение

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

Дополнительные материалы

  • Using HTML sections and outlines: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.

В этом модуле

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

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

<!DOCTYPE html>

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

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

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

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

<head>
  <title>Курсы — HTML Academy</title>
</head>

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

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

<meta charset="название кодировки">

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

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

<meta name="keywords" content="важные, ключевые, слова">

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

<meta name="description" content="краткое описание">

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

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

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

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

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

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

<h2>Спецификация HTML</h2>
<h3>Раздел 1 Введение</h3>
<h4>Раздел 1.1 Происхождение языка</h4>

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


Продолжить

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

Рассмотрим исходный текст нашей первой веб-страницы (т.е. ее html-структуру) более подробно (см. пример №1). В нашем случае присутствует 11 тегов: <!DOCTYPE html>, <html>, <head>, <!— Задаем кодировку текста. —>, <meta charset=»utf-8″>, <title>, </title>, </head>, <body>, </body>, </html>. Большинство из них можно встретить в коде практически любого html-документа, поскольку именно с них и начинается создание html-структуры всей веб-страницы. Рассмотрим эти теги несколько подробнее.

<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем кодировку текста. -->
		<meta charset="utf-8">	
		<title>Первая html-страница</title>
	</head>

	<body>
		Всем привет от HTML!
	</body>
</html>

Пример №1. Наша первая веб-страница

Тег <!DOCTYPE html> относится к одиночным тегам. Он пишется в первой строчке кода и формирует пустой элемент разметки ‘!DOCTYPE html’, который сообщает браузеру о типе текущего документа. Дело в том, что версий HTML несколько. Поэтому, чтобы браузер мог правильно отобразить документ, необходимо указывать используемую в документе версию языка HTML. Старыми версиями мы пользоваться не будем, а для всех версий HTML, начиная с 5.0, было решено опустить всю лишнюю информацию и в качестве атрибута просто указывать html.

Как и в любом языке программирования, в HTML принято сопровождать разрабатываемый код . Для этого служит <тег комментария>, синтаксис которого имеет вид: <!—Текст—>. В нашем случае мы пометили, что в следующем служебном теге будет задана кодировка символов текста документа, которую браузер должен использовать при отображении текста: <!— Задаем кодировку текста. —>.

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

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

В любом случае, комментарии ускоряют как разработку кода, так и его отладку в дальнейшем.

Использование одних комментариев внутри других недопустимо. Это может привести к неправильному отображению текста документа или даже полной неработоспособности кода. Кроме того, при использовании комментариев внутри элемента ‘title’ (о нем позже) они будут считаться обычным текстом и будут выведены в заголовке окна браузера.

Неправильное использование комментариев показано в примере №1.

<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем <!--кодировку--> текста. -->
		<meta charset="utf-8">	
		<title>Неправильное использование комментариев</title>
	</head>

	<body>
		Всем привет от HTML!
	</body>
</html>

Пример №1. Неправильное использование тегов комментариев

Теги <html>, <head> и <body> являются представителями парных тегов, т.к. они всегда используются в паре с соответствующими закрывающими тегами </html>, </head> и </body>. Это самые известные теги языка HTML. Они используются при разметке любого html-документа.

Первая пара тегов <html> и </html> формирует контейнер ‘html’, который вмещает все остальное содержимое веб-страницы. Поэтому, открывающий тег <html> пишется сразу же после тега определения типа документа <!DOCTYPE html>, затем записываются все остальные элементы документа, и уже в самом конце ставится закрывающий тег </html>, свидетельствующий об окончании html-документа.

Вторая пара <head> и </head> формирует элемент разметки, называемый заголовком документа (от англ. headголова). Он располагается после открывающего тега <html> и предназначен для хранения служебных тегов с метаданными, которые сообщают браузеру информацию, необходимую для работы с данными страницы.

Одним из таких служебных тегов является тег <meta charset=»utf-8″>. Здесь идентификатор charset представляет собой атрибут тега, а строка «utf-8» – значение данного атрибута. Благодаря этому атрибуту, браузер понимает, что при отображении текста необходимо использовать кодировку utf-8, указанную в качестве его значения. Более подробно тег <meta> мы рассмотрим в дальнейшем. Отметим лишь, что он относится к одиночным тегам и, следовательно, используется без закрывающего тега, формируя пустой элемент разметки.

Также в заголовке документа присутствует еще один служебный элемент, сформированный парным тегом <title>. Элемент предназначен для определения заголовка страницы, который записывается в виде обычного текста между открывающим и закрывающим тегами элемента и отображается браузерами не на самой странице, а в качестве подписей вкладок страниц над адресной строкой или возле нее.

Ну, и наконец, третья пара тегов <body> и </body> формирует элемент разметки, называемый телом документа (от англ. bodyтело). Тело документа располагают сразу же после заголовка документа. В него помещают всю информацию, которую необходимо вывести на экран, а также теги, отвечающие за форматирование этой информации.

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

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