</head>
<body>
Содержимое
</body>
</html>
Пример использования парных тегов
Первым делом мы указываем доктайп, затем открываем html тег, в котором размещаем head внутри которого можно разместить title. Закрываем и тут же открываем body, в котором уже пишем весь код. В конце теги закрываются в порядке вложенности.
Маленький хак от Emmet
Возвращаясь к теме редакторов IDE можно упростить себе жизнь с плагином Emmet. Он позволяет вызвать шаблон-заготовку страницы html посредством следующих действий:
Пишем знак восклицания !
Нажимаем таб
Получаем кусок кода, готовый к эксплуатации
Я такое часто применяю в редакторе Brackets.
Далее давайте разберем остальные теги.
<div> Самый популярный тег, который используется для формирования страницы. Является блочным по-умолчанию. Т.е. растягивается по всей ширине занимаемого пространства и сразу понимает присвоенным значения. Например, если тегу a указать размеры, то он их не сможет понять до тех пор, пока вы в стилях не укажите ему другой display, например inline-block. Div это умеет делать сразу.
<h1><h6> Тег заголовка [англ. heading отсюда сокращение h], варьируется от уровня заголовка. H1 самый важный и, соответственно, самый большой. А h6 уже меньше размера основного текста.
Заголовки жизненно необходимы для разделения текста на части, чтобы упростить чтение материала. Они также используются поисковыми роботами для определения содержимого страницы. Впрочем, и человек в первую очередь пробегается глазами по заголовкам и только потом читает сам текст (если читает).
Заголовок является блочным элементом.
На странице может быть не больше одного тега h1!
<p> Данный тег используется для оформления текста в формате абзаца [англ. paragraph]. Чтобы абзац выглядел, как должен, а именно: быть единым целым, единицей текста, и иметь перенос текста в конце. Текст без обертки в параграф превращается в однородное полотно, которое трудно читать. Параграф не может быть обернут в тег ссылки.