Документы html: Структура HTML-кода | htmlbook.ru

Содержание

Структура HTML-кода | htmlbook.ru

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

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

<!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>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис.  4.1.

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

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

<!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, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.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 текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

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

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

</head>

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

<body>

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

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

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

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

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

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

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

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

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

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

</body>

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

</html>

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>

</body>
</html>

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

В этом уроке разберёмся с каждой строчкой этой структуры.

DOCTYPE

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

<!DOCTYPE html>

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

Парный тег html

Тег <html></html> является основой основ.

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

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

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

Парный тег head

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

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

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

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

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

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

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

<meta charset="UTF-8">

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

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

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

<title>Моя первая страница</title>

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

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

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

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>
  <header>
    <img src="/logo. png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

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

Дополнительное задание

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


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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

HTML — Структура html-документа и теги для его создания / ProgLang

HTML — расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

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

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

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

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Заголовок</h2>
    <p>Здесь содержание документа. ..</p>
  </body>
</html>

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег <html> имеет закрывающий тег </html> и тег <body> имеет тег закрытия </body> и другие.

В приведенном выше примере используются следующие теги для создания HTML-документа:

ТегОписание
<!DOCTYPE...>Этот тег определяет тип документа и версию HTML.
<html>Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head>...</head> и телом документа, которое представлено тегами <body>...</body>.
<head>Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title>Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body>Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h2>, <div>, <p> и другие.
<h2>Этот тег представляет заголовок.
<p>Этот тег представляет абзац.

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа
<html>
  <head>
    <title>Теги, связанные с заголовком документа</title>
  </head>
  <body>
    Теги, связанные с телом документа
  </body>
</html>

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

Декларация <!DOCTYPE>

Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML — 5, и она использует следующее объявление:

<!DOCTYPE html>

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE...> вместе с другими тегами HTML.

Поделитесь:

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

Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.

Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.

Измените свой документ следующим образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    Это моя первая веб-страница
</body>
</html>

Теперь сохраните документ, вернитесь в браузер и выберите команду "Обновить" (это перезагрузит вашу веб-страницу).

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

Первая строка, начинающаяся с "<!DOCTYPE…" говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим "обратной совместимости" и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.

Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, - открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.

Закрывающие теги

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

Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html>). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br />. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.

Атрибуты

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


<тег атрибут="значение">контент</тег>

Подробнее о тегах с атрибутами мы поговорим немного позже.

Элементы

Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body>, включая сами эти теги, является элементом body.

Заголовок веб-документа Вверх Что нужно, чтобы создать веб-страницу

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

Теги

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.

Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.

Каркас html-документа

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название веб-страницы</title>
    </head>
    <body>
        
    </body>
</html>

Тип документа

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

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.

Теги <head>и <body>определяеют заголовок и тело html-документа.

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

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

Кодировка html-документа
<meta charset="utf-8">

Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.

Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.

В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

Название или заголовок html-документа записывается между тегами <title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.

Содержимое тега <title>отображается:

  • на вкладках веб-страниц
  • в списке закладок
  • в названии файла при сохранении веб-страницы на жесткий диск;
  • в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.

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

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


Видео к уроку

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

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

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

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

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

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

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным 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">

    
    
  </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-элементы. Пока что это основные определения, которые вы должны попытаться понять:

  • <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 документа, тело HTML документа, границы HTML документа

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.

Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа

Кроме того, что мы рассмотрим структуру HTML документа, мы поговорим о том, как браузер интерпретирует HTML документ и проведем параллель между HTML и протоколом HTTP, ведь обе эти технологии были разработаны в ЦЕРНе одним и тем же человеком для того, чтобы сделать общение по сети более доступным и простым специально неподготовленным пользователям. Так же любой начинающий веб-разработчик или веб-мастер должен знать и понимать, как работают эти две технологии: HTML и HTTP.

Структура HTML документа. Особенности работы браузера с HTML

Содержание статьи:

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

Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.

Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».

Смотрим код сформированной HTML страницы в браузере

Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.

Код HTML страницы в консоли браузера

А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».

У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:

Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:

  1. Вы увидели структуру HTML документа.
  2. Вы увидели, как браузер обрабатывает HTML код.

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

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

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

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

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

Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.

Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.

Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.

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

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

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

Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.

Внутри заголовка HTML документа прописывается вся необходимая служебная информация:

  1. В заголовке указывается кодировка HTML документа.
  2. Так же здесь подключатся таблицы стилей.
  3. Заголовок HTML документа используется для подключения файлов JavaScript.
  4. В заголовке расположено описание HTML документа.
  5. В заголовке указывается название HTML документа.
  6. В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.

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

Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.

Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>

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

Тело HTML документа является частью структуры и предназначено для отображения содержимого пользователя, хотя это не означает, что пользователь будет видеть все HTML элементы после того, как браузер проанализирует код страницы, так как некоторые HTML элементы могут быть намеренно скрыты стилями, заданными в CSS или удалены при помощи JavaScript кода.

Открывающий HTML тэг <body> обозначает начало тела HTML документа, закрывающий тэг </body>обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.

Вывод: тело документа – часть структуры HTML документа, которая отображается пользователю в области просмотра браузера.

Границы HTML документа. HTML тэг <html>

Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.

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

Важной особенностью структуры HTML документа является то, что за пределами <html>...</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.

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

Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.

Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE

Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).

Исходя из вышесказанного, браузеру нужно «понимать»: с какой версией HTML он имеет дело или может он работает не с HTML, а с xHTML? Как ему это понять, чтобы правильно отобразить документ.

Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.

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

Пример структуры HTML документа

Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:

<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

 

<html lang="ru-RU">

 

<head>

 

<meta charset="UTF-8">

 

<title>Структура HTML документа</title>

 

</head>

 

<body>

 

<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>

 

</body>

 

</html>

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

Так выглядит HTML документ в браузере с правильно заданной структурой

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

Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам. На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.

Сравниваем структуру HTML документа со структурой HTTP протокола

Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.

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

Но если вам мало, то добавим: и HTTP запрос и HTTP ответ начинаются со статусной строки, если мы говорим про запрос, то в статусной строке указывается метод HTTP протокола, который говорит HTTP серверу о том, как выполнить запрос, а ответ сервера содержит специальный HTTP код состояния, который говорит клиенту о том, как он понял этот запрос. Это похоже на DOCTYPE?

Как браузер интерпретирует HTML документ

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

HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.

Далее браузер видит тэг <head> и понимает, что сейчас он получит служебную информацию, которая ему нужна, чтобы правильно отобразить документ. Кстати, если браузер увидит, что вы подключаете какой-нибудь скрипт или таблицу стилей, то он будет делать запросы к серверу, чтобы получит недостающие файлы. Увидев закрывающий тэг </head> браузер понимает, что заголовок HTML закончился.

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

Об окончании документа браузер понимает по закрывающему тэгу </html>

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

Введение в HTML


HTML - это стандартный язык разметки для создания веб-страниц.


Что такое HTML?

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

Простой HTML-документ

Пример




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

Мой первый заголовок


Мой первый абзац.


Попробуй сам "

Объяснение примера

  • Объявление определяет что этот документ является документом HTML5
  • Элемент является корневым элементом HTML стр.
  • Элемент содержит метаинформацию о HTML-страница
  • Элемент </code> определяет заголовок для HTML-страница (которая отображается в строке заголовка браузера или на вкладке страницы) </li> <li> Элемент <code> <body> </code> определяет тело документа и является контейнером для всего видимого содержимого, например заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.</li> <li> Элемент <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3><span class="ez-toc-section" id="_HTML-10"> Что такое элемент HTML? </span></h3> <p> Элемент HTML определяется начальным тегом, некоторым содержимым и конечным тегом: </p> <p> <tagname> Здесь идет контент ... </tagname> </p> <p> Элемент HTML <strong> </strong> - это все, от начального тега до конечного тега: </p> <p> <h2><span class="ez-toc-section" id="i-28"> Мой Первый заголовок </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </p> <p> <p> Мой первый абзац.</p> </p> <table> <tr> <th> Начальный тег </th> <th> Содержание элемента </th> <th> Концевая метка </th> </tr> <tr> <td> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></td> <td> Моя первая заголовок </td> <td> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </td> </tr> <tr> <td> <p> </td> <td> Мой первый абзац. </td> <td> </p> </td> </tr> <tr> <td> <br> </td> <td> <em> нет </em> </td> <td> <em> нет </em> </td> </tr> </table> <p> <strong> Примечание. </strong> Некоторые элементы HTML не имеют содержимого (например, <br> элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега! </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-29"> Веб-браузеры </span></h3> <p> Назначение веб-браузера (Chrome, Edge, Firefox, Safari) - читать HTML-документы и отображать их. правильно. </p> <p> Браузер не отображает теги HTML, но использует их для определения способа отображения документа: </p> <p> </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-11"> Структура HTML-страницы </span></h3> <p> Ниже представлена ​​визуализация структуры HTML-страницы: </p> <p> <title> Заголовок страницы

    Это заголовок

    Это абзац.

    Это еще один абзац.

    Примечание: Содержимое внутри раздела (белая область выше) будет отображаться в браузере. Содержимое внутри элемента будет отображается в строке заголовка браузера или на вкладке страницы. </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-12"> История HTML </span></h3> <p> С первых дней существования всемирной паутины было много версий HTML: </p> <p> Это руководство соответствует последнему стандарту HTML5.</p> <br/> <br/> <h2><span class="ez-toc-section" id="HTML-2"> HTML Базовый </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <hr/> <p> В этой главе мы покажем несколько основных примеров HTML. </p> <p> Не беспокойтесь, если мы будем использовать теги, о которых вы еще не узнали. </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-13"> Документы HTML </span></h3> <p> Все документы HTML должны начинаться с объявления типа документа: <code> <! DOCTYPE html> </code>. </p> <p> Сам документ HTML начинается с <code> <html> </code> и заканчивается <code> </html> </code>. </p> <p> Видимая часть HTML-документа находится между <code> <body> </code> и <code> </body> </code>.</p> <h4><span class="ez-toc-section" id="i-31"> Пример </span></h4> <br/> <p> <h2><span class="ez-toc-section" id="i-32"> Мой первый заголовок </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <p> Мой первый абзац. </p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-33"> Декларация </span></h3><! DOCTYPE> </h3> <p> Объявление <code> <! DOCTYPE> </code> представляет тип документа и помогает браузерам правильно отображать веб-страницы. </p> <p> Он должен появляться только один раз, вверху страницы (перед любыми HTML-тегами). </p> <p> Объявление <code> <! DOCTYPE> </code> не чувствительно к регистру.</p> <p> Объявление <code> <! DOCTYPE> </code> для HTML5: </p> <hr/> <h3><span class="ez-toc-section" id="HTML-3"> HTML-заголовки </span></h3> Заголовки <p> HTML определяются с помощью тегов <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>–<code> <h6> </h6></code>. </p> <p> <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code> определяет наиболее важный заголовок. <code> <h6> </h6></code> определяет наименее важные заголовок: </p> <h4><span class="ez-toc-section" id="i-34"> Пример </span></h4> <p> <h2><span class="ez-toc-section" id="_1"> Это заголовок 1 </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <h3><span class="ez-toc-section" id="_2"> Это заголовок 2 </span></h3> <br/> <h4><span class="ez-toc-section" id="_3"> Это заголовок 3 </span></h4> </p> Попробуй сам " <hr/> <hr/> <h3><span class="ez-toc-section" id="HTML-4"> HTML абзацы </span></h3> <p> абзацев HTML определяются тегом <code> <p> </code>: </p> <hr/> <h3><span class="ez-toc-section" id="HTML-5"> HTML-ссылки </span></h3> <p> HTML-ссылки определяются тегом <code> <a> </code>: </p> <p> Назначение ссылки указано в атрибуте <code> href </code>.</p> <p> Атрибуты используются для предоставления дополнительной информации об элементах HTML. </p> <p> Вы узнаете больше об атрибутах в следующей главе. </p> <hr/> <h3><span class="ez-toc-section" id="HTML-6"> HTML-изображения </span></h3> <p> изображений HTML определяются тегом <code> <img> </code>. </p> <p> Исходный файл (<code> src </code>), альтернативный текст (<code> alt </code>), <code> ширина </code> и <code> высота </code> предоставляются как атрибуты: </p> <h4><span class="ez-toc-section" id="i-35"> Пример </span></h4> <p> <img src = "w3schools.jpg "alt =" W3Schools.com "> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="_HTML-14"> Как просмотреть исходный код HTML? </span></h3> <p> Вы когда-нибудь видели веб-страницу и задавались вопросом: «Эй! Как они это сделали?» </p> <h4><span class="ez-toc-section" id="_HTML-15"> Просмотреть исходный код HTML: </span></h4> <p> Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотреть исходный код страницы» (в Chrome) или «Просмотр исходного кода» (в Edge) или аналогичное в других браузерах. Это откроет окно содержащий исходный HTML-код страницы. </p> <h4><span class="ez-toc-section" id="_HTML-16"> Проверить элемент HTML: </span></h4> <p> Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «Проверить» или "Осмотрите элемент", чтобы увидеть, из каких элементов состоят (вы увидите оба HTML и CSS).Вы также можете редактировать HTML или CSS на лету в Откроется панель "Элементы" или "Стили". </p> <br/> <br/> <h2><span class="ez-toc-section" id="_HTML-17"> Что такое HTML-документ? - Структура, типы и примеры - Видео и стенограмма урока </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="_HTML-18"> Типы HTML </span></h3> <p> Последней версией HTML, которая входит в отрасль, является HTML 5. HTML можно разделить на три категории: переходный, строгий и набор фреймов. Эти типы применяются к тому, как используется HTML, не обязательно к выбору тегов. </p> <h5><span class="ez-toc-section" id="i-36"> Переходный </span></h5> <p> <b> Переходный </b> - наиболее распространенный тип HTML.Он имеет гибкий синтаксис, грамматику и орфографию. На протяжении многих лет переходный HTML использовался без ограничений по синтаксису, а браузеры поддерживают подход «максимальных усилий» к чтению тегов. Если теги написаны с ошибками, браузеры не исправляют ошибки веб-разработчиков и все равно отображают контент. Браузеры не сообщают об ошибках HTML - они просто отображают то, что могут. Это концепция «наилучшего усилия». </p> <h5><span class="ez-toc-section" id="i-37"> Строгий </span></h5> <p> Строгий тип <b> </b> HTML предназначен для возврата правил в HTML и повышения его надежности.Например, строгий тип требует закрытия всех тегов для всех открытых тегов. Этот стиль HTML важен для телефонов, где вычислительная мощность может быть ограничена. Чистый и безошибочный код помогает загружать страницы быстрее. </p> <h5><span class="ez-toc-section" id="i-38"> Набор фреймов </span></h5> <p> Наконец, набор фреймов <b> </b> позволяет веб-разработчикам создавать мозаику из HTML-документов, в которой несколько документов могут быть соединены на одном экране. Этот прием часто используется для создания системы меню. Вы щелкаете по пункту меню в левой части экрана, и только правая часть экрана перезагружается.Меню остается на месте. </p> <h3><span class="ez-toc-section" id="_HTML-19"> Примеры HTML </span></h3> <p> Давайте рассмотрим несколько примеров. Чтобы выполнить примеры, просто создайте текстовый документ на рабочем столе под названием test.html. Если вы используете программу «Блокнот», убедитесь, что файл имеет расширение .html, а не test.html.txt. Для этого используйте «Сохранить как» в Блокноте, а затем заключите в двойные кавычки имя файла «test.html». На рабочем столе вы увидите значок с названием «тест», а изображение на значке будет связано с веб-браузером.</p> <p> Если вы решили пропустить обозначение заголовка (а многие веб-разработчики его пропускают), будет использоваться переходный HTML. В нашем первом примере будет представлен тег <br />. Это тег новой строки или тег разрыва. Вставьте в документ следующее: </p> <p> Hello world. <br /> Это мой первый HTML-документ </p> <p> В этом примере текст в браузере будет отображаться в две строки. «Hello world» будет в первой строке, а «Это мой первый HTML-документ» - во второй строке.</p> <p> Теперь давайте добавим еще один вариант к примеру: </p> <p> <h3><span class="ez-toc-section" id="Hello_world"> Hello world. </span></h3> <br /> <br /> Это мой <i> первый </i> HTML-документ </p> <p> В этом примере , «Hello world» будет отображаться в виде большого текста. <h3><span class="ez-toc-section" id="i-39"> - это тег заголовка, делающий текст жирным и большим. Далее у нас есть две новые строки, затем курсивом выделено слово «первая». </span></h3></p> <p> Вот еще одно дополнение к примеру: </p> <p> <html> <body> </p> <p> <h2><span class="ez-toc-section" id="My_First_Heading"> My First Heading </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </p> <p> <h3><span class="ez-toc-section" id="Hello"> Hello </span></h3></p> <p> world.</h3> <br /> <br /> Это мой <i> первый </i> HTML-документ </p> <p> </body> </html> </p> <p> Обратите внимание, что хотя в HTML-коде есть новый разрыв строки после слова «Hello», браузер отобразит «Hello world» в той же строке. Это так, потому что браузер смотрит только на HTML-теги, а не на стиль самого кода. Вы можете поместить много новых строк между «Hello» и «world», и они все равно будут отображаться в той же строке. </p> <p> В этом последнем примере мы также добавили теги <html> <body>.Эти теги помогают создавать контейнеры для другого HTML-кода. Когда теги находятся внутри контейнеров, к ним могут получить доступ другие технологии, такие как JavaScript или каскадные таблицы стилей. </p> <h3><span class="ez-toc-section" id="i-40"> Сводка урока </span></h3> <p> HTML-документ <b> </b> основан на файле, содержащем язык разметки гипертекста. В HTML теги <b> </b> или скрытые ключевые слова сообщают программам обработки, часто веб-браузерам, как отображать текст. Существует три категории HTML: переходный, строгий и набор фреймов. <b> Transitional </b> - наиболее распространенный тип HTML, в то время как строгий тип <b> HTML </b> предназначен для возврата правил в HTML и повышения его надежности.<b> Frameset </b> позволяет веб-разработчикам создавать мозаику из документов HTML и систему меню. </p> <h2><span class="ez-toc-section" id="_HTML-_-_HTML">: HTML-документ / корневой элемент - HTML: язык разметки гипертекста </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> HTML-элемент <strong> <code> <html> </code> </strong> представляет корень (элемент верхнего уровня) HTML-документа, поэтому его также называют корневым элементом <em> </em>. Все остальные элементы должны быть потомками этого элемента. </p> <table> <tbody> <tr> <th scope="row"> Категории содержимого </th> <td> Нет.</td> </tr> <tr> <th scope="row"> Разрешенное содержание </th> <td> Один элемент <code> <head> </code>, за которым следует один элемент <code> <body> </code>. </td> </tr> <tr> <th scope="row"> Отсутствие тега </th> <td> Начальный тег может быть опущен, если первое, что находится внутри элемента <code> <html> </code>, не является комментарием. <br/> Конечный тег может быть опущен, если за элементом <code> <html> </code> сразу не следует комментарий. </td> </tr> <tr> <th scope="row"> Допущенные родители </th> <td> Нет.Это корневой элемент документа. </td> </tr> <tr> <th scope="row"> Неявная роль ARIA </th> <td> Нет соответствующей роли </td> </tr> <tr> <th scope="row"> Разрешенные роли ARIA </th> <td> Нет <code> роль </code> разрешена </td> </tr> <tr> <th scope="row"> Интерфейс DOM </th> <td> <code> HTMLHtmlElement </code> </td> </tr> </tbody> </table> <p> Этот элемент включает глобальные атрибуты. </p> <dl> <dt> <b> <code> манифест </code> </b> </dt> <dd> Задает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально.Подробнее см. Использование кеша приложения. </dd> <dt> <b> <code> версия </code> </b> </dt> <dd> Задает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, потому что он избыточен с информацией о версии в объявлении типа документа. </dd> <dt> <b> <code> xmlns </code> </b> </dt> <dd> Задает пространство имен XML документа. Значение по умолчанию - <code> "http://www.w3.org/1999/xhtml" </code>. Это требуется в документах, анализируемых с помощью анализаторов XML, и необязательно в текстовых / html-документах.</dd> </dl> <pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> ... </head> <body> ... </body> </html> </code> </pre> <p> Предоставление атрибута <code> lang </code> с допустимым тегом языка идентификации IETF в элементе <code> <html> </code> поможет технологии чтения с экрана определить правильный язык для объявления. Идентификационный языковой тег должен описывать язык, используемый большей частью содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный в операционной системе, что может вызвать неправильное произношение.</p> <p> Включение действительного объявления <code> lang </code> в элемент <code> <html> </code> также гарантирует, что важные метаданные, содержащиеся в <code> <head> </code> страницы, такие как <code> <title> </code> страницы, также будут правильно объявлены. </p> <p> Таблицы BCD загружаются только в браузере </p> <ul> <li> Элемент верхнего уровня MathML: <code> <math> </code> </li> <li> Элемент верхнего уровня SVG: <code> <svg> </code> </li> </ul> <h2><span class="ez-toc-section" id="_HTML-20"> Основы HTML - Изучите веб-разработку </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> HTML (<strong> H </strong> yper <strong> t </strong> ext <strong> M </strong> arkup <strong> L </strong> anguage) - это код, который используется для структурирования веб-страницы и ее содержимого.Например, контент может быть структурирован в рамках набора абзацев, списка маркированных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам базовое понимание HTML и его функций. </p> <p> HTML - это язык разметки <em> </em>, который определяет структуру вашего контента. HTML состоит из серии <strong> элементов </strong>, которые вы используете, чтобы заключить или обернуть различные части контента, чтобы он выглядел определенным образом или действовал определенным образом. Заключительные теги могут сделать слово или изображение гиперссылкой на другое место, могут выделять слова курсивом, могут увеличивать или уменьшать шрифт и т. Д.Например, возьмите следующую строку содержания: </p> <pre> Моя кошка очень сварливая </pre> <p> Если мы хотим, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключив его в теги абзацев: </p> <pre> <code> <p> Мой кот очень сварливый </p> </code> </pre> <h4><span class="ez-toc-section" id="_HTML-21"> Анатомия элемента HTML </span></h4> <p> Давайте подробнее рассмотрим этот элемент абзаца. </p> <p> </p> <p> Основные части нашего элемента следующие: </p> <ol> <li> <strong> Открывающий тег: </strong> Он состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие <strong> угловые скобки </strong>.Это указывает, где элемент начинается или начинает действовать - в данном случае, где начинается абзац. </li> <li> <strong> Закрывающий тег: </strong> Это то же самое, что открывающий тег, за исключением того, что он включает косую черту <em> перед именем элемента. Это указывает, где заканчивается элемент - в данном случае, где заканчивается абзац. Отсутствие закрывающего тега - одна из стандартных ошибок новичков, которая может привести к странным результатам. </li> <li> <strong> Содержимое: </strong> Это содержимое элемента, который в данном случае является просто текстом.</li> <li> <strong> Элемент: </strong> Открывающий тег, закрывающий тег и содержимое вместе составляют элемент. </li> </ol> <p> Элементы также могут иметь следующие атрибуты: </p> <p> </p> Атрибуты <p> содержат дополнительную информацию об элементе, который вы не хотите отображать в фактическом содержании. Здесь <code> класс </code> - это атрибут <em> имя </em>, а <code> примечание редактора </code> - значение атрибута <em> </em>. Атрибут <code> class </code> позволяет вам дать элементу неуникальный идентификатор, который можно использовать для его таргетинга (и любых других элементов с таким же значением <code> class </code>) с информацией о стиле и другими вещами.</p> <p> Атрибут всегда должен иметь следующее: </p> <ol> <li> Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов). </li> <li> Имя атрибута, за которым следует знак равенства. </li> <li> Значение атрибута заключено в открывающие и закрывающие кавычки. </li> </ol> <p> <strong> Примечание </strong>: простые значения атрибутов, не содержащие пробелов ASCII (или любые символы <code> "</code> <code> '</code> <code>` </code> <code> = </code> <code> <</code> <code>> </code>), могут оставаться без кавычек, но рекомендуется заключите в кавычки все значения атрибутов, так как это сделает код более последовательным и понятным.</p> <h4><span class="ez-toc-section" id="i-41"> Вложение элементов </span></h4> <p> Вы также можете размещать элементы внутри других элементов - это называется вложением <strong> </strong>. Если бы мы хотели заявить, что наша кошка <strong> очень </strong> сварливая, мы могли бы заключить слово «очень» в элемент <code> <strong> </code>, что означает, что слово должно быть сильно подчеркнуто: </p> <pre> <code> <p> Моя кошка <strong> очень </strong> сварливая. </p> </code> </pre> <p> Однако вам необходимо убедиться, что ваши элементы правильно вложены.В приведенном выше примере мы сначала открыли элемент <code> <p> </code>, а затем элемент <code> <strong> </code>; следовательно, мы должны сначала закрыть элемент <code> <strong> </code>, а затем элемент <code> <p> </code>. Следующее неверно: </p> <pre> <code> <p> Моя кошка <strong> очень сварливая </p> </strong> </code> </pre> <p> Элементы должны открываться и закрываться правильно, чтобы они четко находились внутри или снаружи друг друга. Если они накладываются друг на друга, как показано выше, ваш веб-браузер попытается точно угадать то, что вы пытались сказать, что может привести к неожиданным результатам.Так что не делай этого! </p> <h4><span class="ez-toc-section" id="i-42"> Пустые элементы </span></h4> <p> Некоторые элементы не имеют содержимого и называются <strong> пустыми элементами </strong>. Возьмите элемент <code> <img> </code>, который у нас уже есть на нашей HTML-странице: </p> <pre> <code> <img src = "images / firefox-icon.png" alt = "Мое тестовое изображение"> </code> </pre> <p> Он содержит два атрибута, но нет закрывающего тега <code> </img> </code> и внутреннего содержимого. Это связано с тем, что элемент изображения не оборачивает содержимое, чтобы повлиять на него. Его цель - встроить изображение в HTML-страницу в том месте, где оно появляется.</p> <h4><span class="ez-toc-section" id="_HTML-22"> Анатомия документа HTML </span></h4> <p> Это завершает основы отдельных элементов HTML, но они не удобны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте вернемся к коду, который мы поместили в наш пример <code> index.html </code> (который мы впервые встретили в статье Работа с файлами): </p> <pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница  Мое тестовое изображение

    Здесь имеем:

    • - doctype. Это обязательная преамбула. В глубине веков, когда HTML был молод (около 1991/92), типы документа должны были действовать как ссылки на набор правил, которым должна была следовать страница HTML, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни они мало что делают и в основном просто необходимы, чтобы убедиться, что ваш документ ведет себя правильно.Это все, что вам нужно знать на данный момент.
    • - элемент . Этот элемент охватывает все содержимое на всей странице и иногда называется корневым элементом.
    • - элемент . Этот элемент действует как контейнер для всего, что вы хотите включить на HTML-страницу, что не контент, который вы показываете зрителям своей страницы. Сюда входят такие вещи, как ключевые слова и описание страницы, которые вы хотите отображать в результатах поиска, CSS для стилизации нашего контента, объявления набора символов и многое другое.
    • - этот элемент устанавливает набор символов, который должен использовать ваш документ, на UTF-8, который включает большинство символов из подавляющего большинства письменных языков. По сути, теперь он может обрабатывать любой текстовый контент, который вы можете добавить к нему. Нет причин не устанавливать это, и это может помочь избежать некоторых проблем в дальнейшем.
    • - элемент </code>. Это устанавливает заголовок вашей страницы, который отображается на вкладке браузера, в которую загружена страница.Он также используется для описания страницы, когда вы добавляете ее в закладки / добавляете в избранное. </li> <li> <code> <body> </body> </code> - элемент <code> <body> </code>. Он содержит <em> всего </em> контента, который вы хотите показывать веб-пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, воспроизводимые звуковые дорожки или что-то еще. </li> </ul> <p> Давайте снова обратим внимание на элемент <code> <img> </code>: </p> <pre> <code> <img src = "images / firefox-icon.png "alt =" Мое тестовое изображение "> </code> </pre> <p> Как мы уже говорили, он вставляет изображение на нашу страницу в том месте, где оно появляется. Он делает это с помощью атрибута <code> src </code> (source), который содержит путь к нашему файлу изображения. </p> <p> Мы также добавили атрибут <code> alt </code> (альтернативный). В этом атрибуте вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам: </p> <ol> <li> Слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы прочитать им замещающий текст.</li> <li> Что-то пошло не так, из-за чего изображение не отображается. Например, попробуйте намеренно изменить путь внутри атрибута <code> src </code>, чтобы он стал неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения: </li> </ol> <p> </p> <p> Ключевые слова для замещающего текста - «описательный текст». Альтернативный текст, который вы пишете, должен предоставить читателю достаточно информации, чтобы иметь хорошее представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совершенно бесполезен.Намного лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю». </p> <p> Попробуйте придумать лучший альтернативный текст для вашего изображения. </p> <p> В этом разделе рассматриваются некоторые важные элементы HTML, которые вы будете использовать для разметки текста. </p> <h4><span class="ez-toc-section" id="i-43"> Заголовки </span></h4> <p> Элементы заголовка позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как книга имеет основной заголовок, заголовки глав и подзаголовки, документ HTML тоже может.HTML содержит 6 уровней заголовков, <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>–<code> <h6> </h6></code>, хотя обычно вы используете максимум от 3 до 4: </p> <pre> <code> <h2><span class="ez-toc-section" id="i-44"> Мое основное название </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="i-45"> Заголовок верхнего уровня </span></h3> <h4><span class="ez-toc-section" id="i-46"> Мой подзаголовок </span></h4> <h5><span class="ez-toc-section" id="i-47"> Мой подзаголовок </span></h5> </code> </pre> <p> Теперь попробуйте добавить подходящий заголовок на свою HTML-страницу чуть выше элемента <code> <img> </code>. </p> <p> <strong> Примечание </strong>: вы увидите, что ваш заголовок уровня 1 имеет неявный стиль.Не используйте элементы заголовка, чтобы сделать текст больше или полужирным, потому что они используются для доступности и других целей, таких как SEO. Постарайтесь создать на своих страницах осмысленную последовательность заголовков, не пропуская уровни. </p> <h4><span class="ez-toc-section" id="i-48"> Абзацы </span></h4> <p> Как объяснялось выше, элементы <code> <p> </code> предназначены для содержания абзацев текста; вы будете часто использовать их при разметке обычного текстового содержимого: </p> <pre> <code> <p> Это один абзац </p> </code> </pre> <p> Добавьте образец текста (он должен быть из <em> Как будет выглядеть ваш веб-сайт? </em>) в один или несколько абзацев, поместив их непосредственно под элементом <code> <img> </code>.</p> <h4><span class="ez-toc-section" id="i-49"> Списки </span></h4> <p> Большая часть веб-контента представляет собой списки, и в HTML есть специальные элементы для них. Списки разметки всегда состоят как минимум из двух элементов. Наиболее распространенные типы списков - это упорядоченные и неупорядоченные списки: </p> <ol> <li> <strong> Неупорядоченные списки </strong> предназначены для списков, в которых порядок элементов не имеет значения, например, список покупок. Они заключены в элемент <code> <ul> </code>. </li> <li> <strong> Упорядоченные списки </strong> предназначены для списков, в которых порядок элементов имеет значение, например, рецепт.Они заключены в элемент <code> <ol> </code>. </li> </ol> <p> Каждый элемент внутри списков помещается в элемент <code> <li> </code> (элемент списка). </p> <p> Например, если мы хотим превратить часть следующего фрагмента абзаца в список </p> <pre> <code> <p> В Mozilla мы - глобальное сообщество технологов, мыслителей и строителей, работающих вместе ... </p> </code> </pre> <p> Мы можем изменить разметку на эту </p> <pre> <code> <p> В Mozilla мы являемся глобальным сообществом </p> <ul> <li> технологи </li> <li> мыслители </li> <li> строители </li> </ul> <p> работаем вместе... </p> </code> </pre> <p> Попробуйте добавить упорядоченный или неупорядоченный список на страницу с примером. </p> <p> Ссылки очень важны - они делают Интернет Интернетом! Чтобы добавить ссылку, нам нужно использовать простой элемент - <code> <a> </code> - «a» является сокращенной формой для «привязки». Чтобы преобразовать текст в абзаце в ссылку, выполните следующие действия: </p> <ol> <li> Выберите текст. Мы выбрали текст «Манифест Mozilla». </li> <li> Оберните текст в элемент <code> <a> </code>, как показано ниже: </li> <li> Присвойте элементу <code> <a> </code> атрибут <code> href </code>, как показано ниже: <pre> <code> <a href=""> Манифест Mozilla </a> </code> </pre> </li> <li> Введите в значение этого атрибута веб-адрес, на который должна быть ссылка: <pre> <code> <a href = "https: // www.mozilla.org/en-US/about/manifesto/"> Манифест Mozilla </a> </code> </pre> </li> </ol> <p> Вы можете получить неожиданные результаты, если опустите часть <code> https: // </code> или <code> http: // </code>, называемую протоколом <em> </em>, в начале веб-адреса. После создания ссылки щелкните ее, чтобы убедиться, что она отправляет вам туда, куда вы хотели. </p> <p> <code> href </code> поначалу может показаться довольно неясным выбором имени атрибута. Если у вас возникли проблемы с его запоминанием, помните, что это означает <em> <strong> h </strong> ypertext <strong> ref </strong> erence </em>.</p> <p> Добавьте ссылку на свою страницу сейчас, если вы еще этого не сделали. </p> <p> Если вы следовали всем инструкциям в этой статье, у вас должна получиться страница, похожая на приведенную ниже (вы также можете просмотреть ее здесь): </p> <p> </p> <p> Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub. </p> <p> Здесь мы только прикоснулись к HTML. Чтобы узнать больше, перейдите в нашу тему «Изучение HTML». </p> <table> <h2><span class="ez-toc-section" id="_HTML_-_HTML"> Справочник по элементам HTML - HTML: язык разметки гипертекста </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <tr> <td> <code> <a> </code> </td> <td> HTML-элемент <strong> <code> <a> </code> </strong> HTML (или элемент привязки <em> </em>) с его атрибутом <code> href </code> создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес.</td> </tr> <tr> <td> <code> <abbr> </code> </td> <td> HTML-элемент <strong> <code> <abbr> </code> </strong> представляет собой аббревиатуру или акроним; необязательный атрибут <code> title </code> может предоставлять расширение или описание сокращения. </td> </tr> <tr> <td> <code> <b> </code> </td> <td> HTML-элемент <strong>, <code> <b> </code> </strong> используется для привлечения внимания читателя к содержимому элемента, которому не придается особого значения.Ранее это называлось элементом Boldface, и большинство браузеров по-прежнему выделяют текст жирным шрифтом. Однако не следует использовать <code> <b> </code> для стилизации текста; вместо этого вы должны использовать свойство CSS <code> font-weight </code> для создания полужирного текста или элемент <code> strong </code>, чтобы указать, что текст имеет особое значение. </td> </tr> <tr> <td> <code> <bdi> </code> </td> <td> HTML-элемент <strong> <code> <bdi> </code> </strong> сообщает двунаправленному алгоритму браузера обрабатывать содержащийся в нем текст отдельно от окружающего его текста.Это особенно полезно, когда веб-сайт динамически вставляет некоторый текст и не знает направленность вставляемого текста. </td> </tr> <tr> <td> <code> <bdo> </code> </td> <td> HTML-элемент <strong> <code> <bdo> </code> </strong> переопределяет текущую направленность текста, поэтому текст внутри отображается в другом направлении. </td> </tr> <tr> <td> <code> <br> </code> </td> <td> HTML-элемент <strong> <code> <br> </code> </strong> создает разрыв строки в тексте (возврат каретки).Это полезно для написания стихотворения или обращения, где разделение строк имеет большое значение. </td> </tr> <tr> <td> <code> <cite> </code> </td> <td> HTML-элемент <strong> <code> <cite> </code> </strong> используется для описания ссылки на цитируемое творческое произведение и должен включать название этого произведения. Ссылка может быть в сокращенной форме в соответствии с соответствующими контексту соглашениями, относящимися к метаданным цитирования. </td> </tr> <tr> <td> <code> <код> </code> </td> <td> HTML-элемент <strong> <code> <code> </code> </strong> отображает свое содержимое в стиле, предназначенном для обозначения того, что текст является коротким фрагментом компьютерного кода.По умолчанию текст содержимого отображается с использованием моноширинного шрифта пользовательского агента по умолчанию. </td> </tr> <tr> <td> <code> <данные> </code> </td> <td> HTML-элемент <strong> <code> <data> </code> </strong> связывает заданный фрагмент контента с машиночитаемым переводом. Если содержимое связано со временем или датой, необходимо использовать элемент <code> time </code>. </td> </tr> <tr> <td> <code> <dfn> </code> </td> <td> HTML-элемент <strong> <code> <dfn> </code> </strong> используется для обозначения термина, определяемого в контексте фразы или предложения определения.Элемент <code> p </code>, пара <code> dt </code>/<code> dd </code> или элемент <code> section </code>, который является ближайшим предком <code> <dfn> </code>, считается определением термина. </td> </tr> <tr> <td> <code> <em> </code> </td> <td> HTML-элемент <strong> <code> <em> </code> </strong> отмечает текст, в котором выделено ударение. Элемент <code> <em> </code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень выделения.</td> </tr> <tr> <td> <code> <i> </code> </td> <td> HTML-элемент <strong> <code> <i> </code> </strong> представляет собой диапазон текста, который по какой-то причине отличается от обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и другие. Исторически они были представлены с использованием курсивного шрифта, который является первоначальным источником наименования <code> <i> </code> этого элемента. </td> </tr> <tr> <td> <code> <КБД> </code> </td> <td> HTML-элемент <strong> <code> <kbd> </code> </strong> представляет собой диапазон встроенного текста, обозначающий текстовый ввод пользователя с клавиатуры, голосового ввода или любого другого устройства ввода текста.По соглашению пользовательский агент по умолчанию отображает содержимое элемента <code> <kbd> </code> с использованием моноширинного шрифта по умолчанию, хотя это не предусмотрено стандартом HTML. </td> </tr> <tr> <td> <code> <марка> </code> </td> <td> HTML-элемент <strong> <code> <mark> </code> </strong> представляет текст, который обозначен <strong> как </strong> или <strong> выделен как </strong> для справок или обозначений, из-за релевантности или важности отмеченного отрывка во включающем контексте.</td> </tr> <tr> <td> <code> <q> </code> </td> <td> HTML-элемент <strong> <code> <q> </code> </strong> указывает, что заключенный текст является короткой встроенной цитатой. Большинство современных браузеров реализуют это, заключая текст в кавычки. Этот элемент предназначен для коротких цитат, не требующих разрывов абзаца; для длинных цитат используйте <code> элемент цитаты </code>. </td> </tr> <tr> <td> <code> <rb> </code> </td> <td> HTML-элемент <strong>, <code> <rb> </code> </strong> используется для ограничения основного текстового компонента аннотации <code> ruby ​​</code>, т.е.е. аннотируемый текст. Один элемент <code> <rb> </code> должен заключать каждый отдельный атомарный сегмент основного текста. </td> </tr> <tr> <td> <code> <rp> </code> </td> <td> HTML-элемент <strong> <code> <rp> </code> </strong> используется для предоставления резервных скобок для браузеров, которые не поддерживают отображение рубиновых аннотаций с использованием элемента <code> ruby ​​</code>. Один элемент <code> <rp> </code> должен заключать каждую из открывающих и закрывающих круглых скобок, которые заключают элемент <code> rt </code>, содержащий текст аннотации.</td> </tr> <tr> <td> <code> <rt> </code> </td> <td> HTML-элемент <strong> <code> <rt> </code> </strong> определяет рубиновый текстовый компонент рубиновой аннотации, который используется для предоставления информации о произношении, переводе или транслитерации для восточноазиатской типографики. Элемент <code> <rt> </code> всегда должен содержаться в элементе <code> ruby ​​</code>. </td> </tr> <tr> <td> <code> <rtc> </code> </td> <td> HTML-элемент <strong> <code> <rtc> </code> </strong> включает семантические аннотации символов, представленных в рубиновом элементе <code> rb </code>, используемом внутри элемента <code> ruby ​​</code>.Элементы <code> rb </code> могут иметь как произношения (<code> rt </code>), так и семантические (<code> rtc </code>) аннотации. </td> </tr> <tr> <td> <code> <рубин> </code> </td> <td> HTML-элемент <strong> <code> <ruby> </code> </strong> представляет небольшие аннотации, которые отображаются над, под или рядом с основным текстом, обычно используются для отображения произношения восточноазиатских символов. Его также можно использовать для аннотирования других типов текста, но это менее распространено. </td> </tr> <tr> <td> <code> <s> </code> </td> <td> HTML-элемент <strong> <code> <s> </code> </strong> отображает текст с зачеркиванием или сквозной линией.Используйте элемент <code> <s> </code> для представления вещей, которые больше не актуальны или не точны. Однако <code> <s> </code> не подходит для обозначения редактирования документа; для этого используйте соответствующие элементы <code> del </code> и <code> ins </code>. </td> </tr> <tr> <td> <code> <samp> </code> </td> <td> HTML-элемент <strong> <code> <samp> </code> </strong> используется для включения встроенного текста, который представляет собой образец (или цитируемый) вывод компьютерной программы.Его содержимое обычно отображается с использованием моноширинного шрифта браузера по умолчанию (например, Courier или Lucida Console). </td> </tr> <tr> <td> <code> <маленький> </code> </td> <td> HTML-элемент <strong> <code> <small> </code> </strong> представляет собой боковые комментарии и мелкий шрифт, например текст об авторских правах и юридический текст, независимо от его стилизованного представления. По умолчанию он отображает текст внутри него на один размер меньше, например, от <code> small </code> до <code> x-small </code>. </td> </tr> <tr> <td> <code> <span> </code> </td> <td> HTML-элемент <strong> <code> <span> </code> </strong> - это общий встроенный контейнер для фразового содержания, который по своей сути ничего не представляет.Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов <code> class </code> или <code> id </code>) или потому, что они имеют общие значения атрибутов, например <code> lang </code>. Его следует использовать только тогда, когда никакой другой семантический элемент не подходит. <code> <span> </code> очень похож на элемент <code> div </code>, но <code> div </code> является элементом уровня блока, тогда как <code> <span> </code> является встроенным элементом. </td> </tr> <tr> <td> <code> <strong> </code> </td> <td> HTML-элемент <strong> <code> <strong> </code> </strong> указывает, что его содержимое имеет большое значение, серьезность или срочность.Браузеры обычно отображают содержимое жирным шрифтом. </td> </tr> <tr> <td> <code> <sub> </code> </td> <td> HTML-элемент <strong> <code> <sub> </code> </strong> определяет встроенный текст, который должен отображаться как нижний индекс исключительно по типографским причинам. Подстрочные индексы обычно отображаются с пониженной базовой линией с использованием более мелкого текста. </td> </tr> <tr> <td> <code> <sup> </code> </td> <td> HTML-элемент <strong> <code> <sup> </code> </strong> определяет встроенный текст, который должен отображаться как надстрочный индекс исключительно по типографским причинам.Верхние индексы обычно отображаются с приподнятой базовой линией с использованием более мелкого текста. </td> </tr> <tr> <td> <code> <время> </code> </td> <td> HTML-элемент <strong> <code> <time> </code> </strong> представляет определенный период времени. Он может включать в себя атрибут <code> datetime </code> для перевода дат в машиночитаемый формат, позволяющий улучшить результаты поисковой системы или настраиваемые функции, такие как напоминания. </td> </tr> <tr> <td> <code> <u> </code> </td> <td> HTML-элемент <strong> <code> <u> </code> </strong> представляет собой диапазон встроенного текста, который должен отображаться таким образом, чтобы указать, что он имеет нетекстовую аннотацию.По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS. </td> </tr> <tr> <td> <code> <var> </code> </td> <td> HTML-элемент <strong> <code> <var> </code> </strong> представляет имя переменной в математическом выражении или контексте программирования. Обычно он отображается с использованием курсивной версии текущего шрифта, хотя это поведение зависит от браузера. </td> </tr> <tr> <td> <code> <wbr> </code> </td> <td> HTML-элемент <strong> <code> <wbr> </code> </strong> HTML представляет возможность разрыва слова - позицию в тексте, где браузер может по желанию разорвать строку, хотя в противном случае его правила разрыва строки не создавали бы разрыв в этом месте.</td> </tr> </table> <h2><span class="ez-toc-section" id="_HTML-_HTML5"> Структура HTML-документа до и после HTML5 - вот что изменилось »</span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <strong> Раскрытие информации: </strong> Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше <p> Если вы хотите писать семантическую разметку - и поверьте нам, вы действительно хотите писать семантическую разметку - тогда вам необходимо правильно структурировать HTML-документы. Элементы <code> html </code>, <code> head </code> и <code> body </code> были частью спецификации HTML с середины 1990-х годов, а еще несколько лет назад они были основными элементами, используемыми для структурирования документов HTML.Однако за последние несколько лет ситуация кардинально изменилась, поскольку HTML5 добавил множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа. </p> <h3><span class="ez-toc-section" id="_HTML-_HTML5-2"> Структура HTML-документа до HTML5 </span></h3> <p> Если вы когда-либо использовали HTML, то знаете, что каждый бит HTML должен быть заключен в теги <code> html </code>. Первым должен появиться открывающий тег <code> <html> </code>, а закрывающий тег <code> </html> </code> должен появиться внизу документа.Все остальные биты HTML должны располагаться между этими двумя тегами. </p> <p> Элемент <code> head </code> - это первый элемент, который появляется после открывающего тега <code> html </code>. В заголовок </code> документа <code> мы помещаем такие вещи, как заголовок <code>, заголовок </code> и метаданные <code> </code>, мы добавляем JavaScript на нашу страницу с тегом <code> script </code>, и мы [<code> ссылка </code>] на внешние таблицы стилей и другие ресурсы. </p> <p> На большинстве веб-страниц элемент <code> head </code> является очень загруженным местом.По этой причине мы создали руководство, в котором объясняются теги, которые обычно появляются в элементе <code> head </code>, и для чего эти теги используются. </p> <p> Все содержимое, которое отображается на веб-странице, вложено между открывающими и закрывающими тегами <code> body </code>. Тело - это основной контейнер содержимого, составляющего веб-страницу. </p> <p> До HTML5 это было почти все для базовой структуры HTML-документа. Весь наш код был помещен между тегами <code> body </code> и стилизован с помощью CSS.Однако теперь, когда HTML5 получил широкую поддержку среди современных браузеров, пришло время реализовать новые теги HTML5, которые придадут нашим HTML-документам гораздо более значимую структуру. </p> <h3><span class="ez-toc-section" id="_HTML5"> Новые семантические теги, добавленные HTML5 </span></h3> <p> В этом кратком руководстве мы коснемся всех новых тегов, добавленных как часть HTML5 для определения структуры и содержимого веб-страницы. В этом руководстве мы рассмотрим следующие элементы: </p> <p> Использование этих элементов не так сложно, как может показаться на первый взгляд, и большинство из них не требуют пояснений.Мы быстро рассмотрим каждый новый элемент, а затем составим шаблон HTML. Вы сможете использовать эти новые теги, чтобы добавить в разметку богатое семантическое значение. </p> <h4/> </h4><p> Элемент заголовка <code> </code> используется для содержания содержимого, которое отображается в верхней части каждой страницы вашего веб-сайта: логотипа, слогана, запроса поиска и, возможно, меню навигации. В большинстве случаев элемент <code> header </code> лучше всего позиционировать как прямой потомок элемента </code> body <code>, но также можно разместить его внутри основного элемента <code> </code>, если вы предпочитаете.</p> <h4> </h4><code> <main> </code> </h4> <p> Используйте элемент <code> main </code> между <code> header </code> и <code> footer </code> элементами, чтобы содержать основное содержимое вашей веб-страницы. Элемент <code> main </code> не может быть потомком элемента <code> article </code>, <code> aside </code>, <code> header </code>, <code> footer </code> или <code> nav </code> element. Вместо этого он должен быть прямым потомком элемента <code> body </code>. Думайте об этом как о прямой замене <code> div </code>, который вы использовали в прошлом для обертывания всего содержимого вашей страницы.</p> <p> Также можно использовать более одного <code> основного элемента </code> на веб-странице. Например, если домашняя страница вашего блога включает в себя пять ваших последних сообщений, было бы целесообразно заключить каждое сообщение в отдельный элемент <code> основной </code> - или вы можете заключить каждую в теги <code> article </code>. </p> <h4> </h4><code> <nav> </code> </h4> <p> Навигационные меню обычно размещаются вверху веб-страницы, на боковой панели или в нижнем колонтитуле страницы. Где бы вы ни разместили навигационное меню, оберните его тегами <code> nav </code>.Обратите внимание, что вам не нужно использовать теги <code> nav </code> для каждой ссылки, только для блоков ссылок, которые обеспечивают навигацию по всему сайту или навигацию для определенной части веб-сайта. </p> <h4> </h4><code> <article> </code> </h4> <p> Если ваш веб-сайт содержит сообщения в блогах, статьи или любой другой контент, который может с таким же успехом отображаться на другом веб-сайте в качестве синдицированного контента, заключите этот контент в сообщение <code> article </code>. Вы можете использовать элемент <code> article </code> практически в любом месте, кроме вложенного в элемент адреса <code> </code>, но в большинстве случаев элемент <code> article </code> будет прямым потомком основного элемента <code> </code> или элемента <code> раздела </code>, который является прямой потомок <code> основного элемента </code>.</p> <h4> </h4><code> <section> </code> </h4> <p> Элемент <code> section </code> используется для идентификации контента, который является основным подразделом более крупного целого. Например, если вы опубликовали длинную электронную книгу в формате HTML, было бы разумно заключить каждую главу в элемент <code> section </code>. Аналогичным образом, если у вас есть боковая панель (семантически заключенная в <code> помимо тегов </code>), которая содержит четыре раздела - рекламу, подсказку поиска, связанные сообщения и форму подписки на новостную рассылку - можно было бы заключить каждый из этих четырех разделов в раздел <code>. </code>, поскольку письменный план содержимого боковой панели будет включать в себя элемент строки для каждого из четырех разделов.</p> <p> Существует некоторая путаница относительно того, когда использовать <code> раздел </code>, а когда <code> div </code>. Вот хорошее практическое правило, которое поможет вам узнать, когда использовать каждый из них: </p> <ul> <li> Используйте <code> div </code>, если вы обертываете какой-то контент, чтобы упростить стилизацию контента или облегчить получение некоторого JavaScript. держись за это. </li> <li> Используйте раздел <code> </code>, если вы указываете содержимое как элемент при написании структуры документа. </li> </ul> <h4> </h4><code> <aside> </code> </h4> <p> Если ваш веб-сайт содержит информацию, которая не имеет прямого отношения к основному содержанию страницы, было бы целесообразно заключить эту информацию в <code> помимо тегов </code>.Например, если вы пишете сообщение, которое включает некоторые технические термины, и добавляете определения для этих терминов на боковой панели, имело бы смысл заключить эти определения в <code> в сторону тегов </code>. Также часто бывает, что вся боковая панель веб-сайта блога оборачивается тегами <code>, за исключением тегов </code>, чтобы было ясно, что боковая панель не является частью основного содержимого страницы. </p> <h4> </h4><code> <адрес> </code> </h4> <p> Элемент адреса <code> </code> предоставляет контактную информацию для ближайшего родительского элемента <code> article </code> или <code> body </code>, который его содержит.Используйте элемент адреса <code> адрес </code> внутри статьи <code> </code>, чтобы указать контактную информацию автора статьи. Используйте его вне статьи <code> </code> в элементах </code> основного </code> или нижнего колонтитула <code> </code> или как прямой потомок элемента </code> body <code>, чтобы предоставить контактную информацию владельцу веб-сайта. </p> <h4/> </h4><p> Нижний колонтитул <code> </code> отображается в нижней части раздела документа. Обычно нижний колонтитул <code> </code> является прямым потомком элемента </code> body </code> <code>, но его также можно использовать в основном элементе <code> </code>, разделе <code> </code> или статье <code> </code>.Наиболее распространенное использование элемента </code> нижнего колонтитула </code> - его размещение в нижней части HTML-документа, чтобы содержать такие вещи, как уведомление об авторских правах, ссылки на связанный контент, адрес <code>, информацию </code> о владельце веб-сайта и ссылки на административные элементы. например, политика конфиденциальности и условия обслуживания веб-сайта. </p> <p> Вы также можете использовать элемент </code> нижнего колонтитула </code> в статье <code> </code> для предоставления метаданных об этой конкретной статье. Например, если для обтекания сообщения на форуме использовались теги <code> article </code>, было бы целесообразно обернуть информацию об авторских правах, а также дату и время публикации сообщения в элемент </code> нижнего колонтитула <code> и разместить его в нижней части статьи <code>. </code>.</p> <h3><span class="ez-toc-section" id="_HTML-23"> Шаблон HTML-документа </span></h3> <p> Шаблон ниже покажет вам, как все эти элементы правильно вложены вместе. Мы приглашаем вас скопировать его и использовать в качестве стандартного шаблона для всех ваших HTML-документов. </p> <pre> <code> <html> <! - Только элементы head и body должны быть прямыми потомками html элемент. Все остальные должны быть потомками головы или тела -> <head> <! - Элемент head должен быть прямым потомком элемента html -> <! - Элемент head - очень загруженное место для большинства веб-сайтов, поэтому мы создали учебник, который проведет вас через различные элементы и выполненные задачи в элементе head.Вы можете найти его по следующему адресу: https://html.com/document/metadata/ -> <title> Заголовок вашей веб-страницы находится здесь <заголовок> <основной> <статья> <сторона> <раздел> <адрес>
<сторона> <раздел>

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

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