В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Строчные элементы

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

<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, <b>consectetur</b> adipisicing elit.</p>
</div>
<div class="related-posts">
<ol>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
</ol>
</div>
</div>

В примере выше были добавлены несколько ссылок на внутри тега <p>, а также ссылки внутри списков. Как видите текст не переносится на новую строку, а остается на своем месте. Так работаю строчные элементы.

Основные строчные элементы

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

<span>Lorem</span>
<a href="#">Link to another page</a>

Теги для стилизации текста

<i>Italic text</i>
<em>Emphasis text more important than i tag</em>
<strong>Bold text more than b tag</strong>

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

<p>
Lorem <a href="#"><b>ipsum dolor</b></a> sit amet, <i>consectetur</i>.
</p>

ВАЖНО!

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

P.S. Больше уроков у меня на канале

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Блочные элементы

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

<div class="block">Block Element #1</div>
<div class="block">Block Element #2</div>
<div class="block">Block Element #3</div>

Основные блочные элементы:

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

<div>div element</div>
<p>p element</p>
<hr>

Списочные теги

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

Маркированный список:

<ul>
<li>Lorem ipsum.</li>
<li>Similique, voluptas?</li>
<li>Enim, et!</li>
</ul>

Нумерованный список:

<ol>
<li>Lorem ipsum.</li>
<li>Beatae, fugit?</li>
<li>Id, molestiae.</li>
</ol>

Список описаний ( документация ):

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit.</dd>
<dt>Lorem ipsum.</dt>
<dd>Lorem ipsum dolor sit.</dd>
</dl>

Теги заголовков

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

<h1>Lorem ipsum.</h1>
<h2>Lorem ipsum.</h2>
<h3>Lorem ipsum.</h3>
<h4>Lorem ipsum.</h4>
<h5>Lorem ipsum.</h5>
<h6>Lorem ipsum.</h6>

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

<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
</div>
</div>

Из примера выше видно, что в div c классом post вложенные другие элементы. На самом деле, вложенность может достигать любого уровня, но не стоит сильно увлекаться так как чем больше будет вложенность тем сложнее будет браузеру и компьютеру это все обрабатывать.

Как делать нельзя?

Нельзя вкладывать теги <p> друг в друга.

<p>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</p>

Нельзя вкладывать заголовки друг в друга.

<h2>
Some title
<h3>Some subtitle</h3>
<h3>Some another subtitle</h3>
</h2>

ВАЖНО!

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

P.S. О строчных элементах напишу в следующем посте.

Любой 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.