Основой языка гипертекстовой разметки является является элемент. HTML элементы определяют структуру HTML документа. Для описания элементов используются HTML теги.
Элементы и теги часто путают. Tеги служат для того, чтобы открывать и закрывать объект, а элемент включает в себя и теги, и их содержимое. Например <h1> Заголовок документа </h1> - элемент, а <h1>, </h1> - теги.
Типы элементов
HTML элементы бывают парные и одинарные. Содержимое парного элемента пишется между открывающим <> и закрывающим </> тегами.
В одинарных элементах содержимого нет, поэтому их также называют пустыми. Закрывающего тега в этих элементах также нет. К одинарным элементам относится <br/> .
Одинарными элементами HTML являются <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> и <wbr>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок веб-страницы</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Первый абзац </p>
<p>Второй абзац <br/> с переводом строки в тексте.</p>
</body>
</html>Результат
В указанном выше примере мы использовали 4 парных элементов:
- Элемент <html>, который включает в себя все HTML элементы страницы.
- Элемент <body>, в котором хранится содержание веб-страницы.
- Элемент <p>, для отображения абзаца.
- Элемент <h1>, в котором содержится заголовок.
В нашем примере мы также использовали одиночный элемент <br> для переноса строки.
Блочные и строчные HTML элементы
Элементы в HTML также делятся на блочные и строчные. Блочными называют элементы, которые являются строительными блоками веб-страниц. Их используют для разделения содержимого веб-страницы на логические блоки, такие как меню, шапка сайта, блок с контентом, “подвал” сайта и т.д. Блочные элементы пишутся с новой строки; до и после этих элементов в браузере автоматически добавляется разрыв строки.
Блочными являются элементы <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> и <video>.
У всех блочных элементов есть открывающие и закрывающие теги.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок веб-страницы</title>
</head>
<body>
<footer>
<p>Автор: Команда W3docs</p>
<p><a href="[email protected]">Отправить письмо автору</a>.</p>
</footer>
</body>
</html>Результат
В этом примере мы использовали блочные элементы <footer> для определения нижнего колонтитула веб-страницы и ее содержимого.
Строчными элементами размечают части содержимого элементов. Они занимают только ограниченное тегами пространство, браузер не добавляет автоматически разрыв строки.
К строчным относятся элементы <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <buttom>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> и <var>.
Вложенные HTML элементы
HTML элементы, которые состоят из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы. К примеру, если вы хотите выделить жирным шрифтом определенные слова в предложении, то вы можете использовать парный тег <strong>, вложенный в тег <p>.
Пример
<p><strong>Эта часть предложения</strong> выделена жирным шрифтом.</p>В нашем примере, первым мы должны закрыть тег <strong>, а потом тег <p>.
Практикуйте свои знания
