Урок №5. HTML. Елементи

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Елементи HTML-коду. З чого складається веб-сторінка?

Елемент в HTML зазвичай складається з початкового тегу та кінцевого тегу, вміст якого вставлений між ними:

<Початковий тег> Вміст розміщується тут ... </Кінцевий тег>

Елемент HTML - це все від початкового тегу до кінцевого тегу:

<p>My first paragraph.</p>
Початковий тег Вміст елементу Кінцевий тег
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    

Примітка: Елементи HTML без вмісту називаються порожніми елементами. Порожні елементи не мають кінцевого тегу, такого як <br> елемент, який вказує на розрив рядка (break – розрив)


Вкладені елементи HTML

Елементи HTML можуть бути вкладеними (елементи можуть містити елементи). Всі документи HTML складаються з вкладених елементів HTML.

Цей приклад містить чотири HTML елементи:

Приклад:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Спробуйте самі! »

Пояснення прикладу

Елемент <html> визначає весь документ. Він має початковий тег <html> і кінцевий тег </html>. Вміст (контент) елемента - це інший елемент HTML (елемент <body>).

Приклад:

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Елемент <body> визначає тіло документа. Він має початковий тег <body> і кінцевий тег </body>. Вміст (контент) елемента - це два інші елементи HTML (<h1> і <p>).

Приклад:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

Елемент <h1> визначає заголовок. Він має початковий тег <h1> і кінцевий тег </h1>. Вміст (контент) елемента: My First Heading.

Приклад:

<h1>My First Heading</h1>

Елемент <p> визначає параграф. Він має початковий тег <p> і кінцевий тег </p>. Вміст (контент) елемента: My first paragraph.

Приклад:

<p>My first paragraph.</p>

Не забувайте кінцевий тег

Деякі елементи HTML відображатимуться правильно, навіть якщо ви забули кінцевий тег:

Приклад:

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Спробуйте самі! »

Наведений вище приклад працює у всіх браузерах, оскільки закриваючий тег вважається необов'язковим.

Ніколи не покладайтеся на це. Бо це може призвести до несподіваних результатів та / або помилок, якщо ви забудете кінцевий тег.


Порожні елементи HTML

Елементи HTML без вмісту називаються порожніми елементами.

<br> - це порожній елемент без закриваючого тегу (тег <br> визначає розрив рядка):

Приклад:

<p>This is a <br> paragraph with a line break.</p>
Спробуйте самі! »

Порожні елементи можуть бути "закриті" у початковому тезі: <br />.

HTML5 не вимагає закриття порожніх елементів. Але якщо ви хочете більш суворої перевірки, або якщо вам потрібно зробити ваш документ читаним XML-парсерами, ви повинні закрити всі HTML-елементи належним чином.


Використовуйте рядкові теги

Теги HTML не чутливі до регістру: <P> (у великому регістрі) означає те саме, що і <p> (у маленькому регістрі).

Стандарт HTML5 не вимагає використання тегів в нижньому регістрі, але W3C рекомендує нижній регістр для написання HTML-коду і вимагає нижнього регістру для більш жорстких типів документів, таких як XHTML.

Примітка: У W3Schools завжди використовують теги нижнього регістру.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.