Как сделать конструкцию скелета документа html

40,380 total views, 14 views today

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

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

DOCTYPE html> html lang="ru"> head>   head> body>   body> html> 

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

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

По доктайпу браузер определяет версию HTML и правильно отображает страницу. Объявление типа документа должно быть самым первым что видит браузер во время обработки HTML-документа.

  DOCTYPE html> 

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

Элементы верхнего уровня​

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

Тег ​

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

DOCTYPE html> html lang="ru">html> 

Атрибут lang указывает на каком языке написан текст страницы. Это необходимо для ассистивных технологий, таких как скринридеры и т. п.

Тег ​

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

DOCTYPE html> html lang="ru"> head>   head> html> 

Тег ​

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

DOCTYPE html> html lang="ru"> head>   head> body>   body> html> 

Теги заголовка документа​

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

Заголовок страницы​

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

DOCTYPE html> html lang="ru"> head> title>HTML5 это просто!title> head> body>   body> html> 

Метаданные​

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

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

DOCTYPE html> html lang="ru"> head>   meta charset="utf-8" /> title>HTML5 это просто!title> head> body>   body> html> 

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

DOCTYPE html> html lang="ru"> head> meta charset="utf-8" /> meta name="description" content="Изучение основ HTML5 для новичков" /> title>HTML5 это просто!title> head> body>   body> html> 

Поток документа​

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

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

  p>Блочный элемент 1p> p>Блочный элемент 2p> p>Блочный элемент 3p>    a href="">Строчный элемент 1a> a href="">Строчный элемент 2a> a href="">Строчный элемент 3a> 

Блочный элемент (block-level element) - занимает всю строку целиком вне зависимости от объёма его контента, поэтому несколько блочных элементов визуально идут друг за другом сверху вниз.

Строчный элемент (inline element) - занимает место по своему содержимому, поэтому несколько строчных элементов могут располагаться на одной строке. Когда в строке не хватает места для вмещения строчного элемента, он переносится на новую.

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

• Объявление типа документа
• Элементы верхнего уровня
  • Тег
  • Тег
  • Тег
  • Заголовок страницы
  • Метаданные

  Базовая структура HTML документа — Основы современной верстки

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

  Взглянем на базовую структуру любого HTML-документа:

    lang="ru">  charset="UTF-8"> Моя первая страница   

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

  DOCTYPE

  Первая конструкция в любом HTML-документе — элемент . Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:

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

  Парный тег html

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

  Важной частью тега html является наличие атрибута lang . В нем указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.

  В качестве значения атрибут lang принимает знакомые всем коды языков. Для русского — lang="ru" , для английского — lang="en" , для немецкого — lang="de" .

  Парный тег head

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

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

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

  Метаинформация

  Метатег . Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег с атрибутом charset . Он позволяет установить кодировку документа.

  Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8 . Именно ее рекомендуется устанавливать в качестве значения атрибута charset . Теперь браузер будет отображать все символы именно в этой кодировке.

   charset="UTF-8"> 

  Заголовок страницы

  На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной верстки» вкладка в браузере Google Chrome выглядит следующим образом:

  Для указания заголовка страницы используется специальный парный тег , внутри которого указывается нужная информация.

   Моя первая страница 

  Тело документа

  После тега в документе указывается парный тег , который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.

  Используем один из примеров прошлого урока и добавим все недостающие теги.

  src="/logo.png"alt="Логотип">id="menu">

• href="/">Главная
• href="/about">О нас
• href="/contacts">Контакты

  Чтобы полностью соответствовать всем стандартам HTML, добавим необходимую базовую структуру документа.

  lang="ru">charset="UTF-8">Моя первая страницаsrc="/logo.png"alt="Логотип">id="menu">

• href="/">Главная
• href="/about">О нас
• href="/contacts">Контакты

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

  Самостоятельная работа

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

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

  

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

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

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

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

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

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

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

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

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

  В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), 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" />