HTML: Базовая структура

Любой HTML-документ можно разбить на несколько основных составляющих:

Блок head, содержащий метаинформацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
Блок body является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.

Простейшая разметка в HTML5 выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Базовая разметка HTML</title>
  </head>

  <body>
    <h1>Code Basics</h1>
    <p>Бесплатные уроки по программированию и HTML для новичков</p>
  </body>
</html>

Обратите внимание на первую строку <!DOCTYPE html>. DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать. Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа <!DOCTYPE html>, который говорит, что наш документ размечен по стандарту HTML5.

Далее открывается парный тег <html> с атрибутом lang="ru". Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.

Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт ко множеству проблем, так как старые стандарты могут не знать о существовании многих тегов, таких как <main>, <nav> и так далее

Задание

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

Коммерческий опыт и Трудоустройство

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ expect, html }) => {
  expect(html).to.contain('<!DOCTYPE html>');
  expect(html).to.contain('lang');
  expect(html).to.contain('<head>');
  expect(html).to.contain('<body>');
});

← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →