Структура теги тела html документа

Базовая структура 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 . Теперь браузер будет отображать все символы именно в этой кодировке.

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

На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной верстки» вкладка в браузере 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 страницы

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Теги структуры документа html

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

— с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Все, тип документа указан и можно двигаться дальше.

— главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

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

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

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

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

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

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

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

— формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

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

Структура тега html

Давайте сразу разберемся на примере.

Источник