Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

4 <h2>DOCTYPE</h2>

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

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

7 <h2>Парный тег html</h2>

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

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

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

11 <h2>Парный тег head</h2>

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

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

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

15 <h3>Метаинформация</h3>

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

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

18 <h3>Заголовок страницы</h3>

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

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

21 <h2>Тело документа</h2>

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

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

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

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