19

Базовая структура HTML файла

Базовая структура HTML файла HTML, Основы HTML, Html 5, CSS, Css3, Javascript, Frontend, Верстка, IT, Программирование, Программист, Разработка, Баг, Длиннопост

Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.


Пример базовой структуры показан ниже.


Рассмотрим ее подробнее.


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

Начнем с тега DOCTYPE

<!DOCTYPE html>

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


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


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

Тег <html>


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


<html></html>

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


В качестве значения передаем сокращения языков: ru, en и тд.

Тег <head>


<head></head>

Тег <head> - парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется 'метаинформацией'. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).


Все что находится внутри тега <head> не будет отображено пользователю.

Тег <meta>


<meta>

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


<meta charset="UTF-8">

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


Самой универсальной кодировкой является UTF-8, ее мы и указываем.

Тег <title>


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

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

Тег <body>


<body></body>

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


Пример конечной структуры в файле index.html.

Web-технологии

524 поста5.8K подписчика

Правила сообщества

1. Не оскорблять других пользователей

2. Не пытаться продвигать свои услуги под видом тематических постов

3. Не заниматься рекламой

4. Никакой табличной верстки

5. Тег сообщества(не обязателен) pikaweb

0
Автор поста оценил этот комментарий

"В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта." ну не укажу я его на странице, а настрою сервер отдавать в utf-8 что изменится? и в head сейчас пишется гораздо большее на нормальном сайте чем просто meta, о чём тема? вообще не о чем

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Не хотите не указывайте,  вас никто не заставляет.


<meta charset="utf-8"> 
приведен как пример который практически всегда присутствует на сайтах, понятно дело что разновидностей тега <meta> много и отвечают они за разные вещи. То как вы их используете дело ваше.



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

Я вот смело </li> пропускаю, и ни один браузер не ругается. Многие <tbody> Не используют, хотя браузер сам его добавляет и всё внезапно не становится невалидным.


Ясное дело, что лучше не пропускать но если их нет то браузер не растеряется.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Я понял. Думаю нам больше не о чем разговаривать. Всего х-о-р-о-ш-е-г-о.

0
Автор поста оценил этот комментарий
Чисто ради интереса, если это бесполезная информация для вас, зачем тогда что-то доказывать ?)

Ну так мы же на развлекательном сайте, а не на обучающем. Писать комменты это весело.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

По вашим комментам мне не показалось что вам весело) Окей, в любом случае, спасибо за активность.

0
Автор поста оценил этот комментарий
Контент не может быть валиден если не соблюдена правильная структура документа.

<br> к примеру это валидный html?

вы скорее хотите, по какой-то причине, доказать что материал бесполезен, это лично мое мнение.

Для меня он бесполезен, а остальные пусть сами думают. Зачем что-то доказывать рандомным людям в интернете?

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
<br> к примеру это валидный html?

Причем тут <br> ? Речь идет о том что вы говорите что можно пропускать какие-то теги и браузер их сам добавит и это будет валидно, если пропустить например тег <html> то это уже будет не валидно, аналогично и если пропустить <head>, <body> или другой обязательный тег.


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

показать ответы
0
Автор поста оценил этот комментарий
но это не значит что браузер 100% создаст их в нужных местах

Если контент валиден, то недостающие теги будут созданы правильно.

а также если браузеру нужно добавлять теги самомтоятельно это увеличивает нагрузку на него

Возросшая нагрузка от добавления тегов в цифрах это сколько?

В результате увеличения нагрузки страница может дольше загружаться

Дольше это сколько?

как-то вы очень категорично, пишите комментарии, возможно вы предвзяты к данному материалу

Я ко всем материалам предвзят.

но он правильный.

Правильный, но неполный.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Если контент валиден, то недостающие теги будут созданы правильно.

Контент не может быть валиден если не соблюдена правильная структура документа.


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

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

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

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

Например вы отписали по поводу <!doctype> и я дополнил материал.

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

Неправда, весь файл обрабатывается как html и неважно, заключен ли контент в html.


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


Опера, например после тега html размешает div с кнопкой просмотра видео в окне.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

* DOM Tree

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

P.S как-то вы очень категорично, пишите комментарии, возможно вы предвзяты к данному материалу, но он правильный.

показать ответы
Автор поста оценил этот комментарий

Но он же в head находится.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Я в курсе )

1
DELETED
Автор поста оценил этот комментарий

А не подскажете, есть ли какой-нибудь быстрый визуальный HTML-редактор (не редактор кода!!!), который показывает такст также, как и MS FrontPage Express (это программа из Win98, я ей до сих пор пользуюсь). Чтоб было легко вырезать из страницы всякий мусор, с целью экономии места на диске.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Сори, не подскажу (

0
Автор поста оценил этот комментарий
Начнем с тега DOCTYPE

А то, что он должен располагаться в начале файла успешно забыли.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Поправил, спс

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

Пиздёжь, title прекрасно виден.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

О title написано отдельно

показать ответы
2
Автор поста оценил этот комментарий
Но я бы с удовольствием почитал или бы посмотрел как вы проводите собесы. Можно в формате текста вопрос - ответ, комментарий как надо было ответить
раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы
3
Автор поста оценил этот комментарий
Значит ребята которые приходят на собеседования, в принципе идут на шару, авось прокатит.
раскрыть ветку (1)
Автор поста оценил этот комментарий

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

5
Автор поста оценил этот комментарий

Этой инфы в инете и так вагон и маленькая тележка, здесь то зачем?

раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы