Автор ХостМастерНа чтение 51 минПросмотров121Опубликовано
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
С аббревиатурой HTML сталкиваются специалисты, которым по роду деятельности приходится делать сайты, наполнять их контентом и продвигать в поисковых системах. Копирайтеры используют этот язык для форматирования текстов и таблиц, а SEO-специалисты с его помощью подключают виджеты и системы аналитики.
Таблицы в формате HTML выводят на экран данные с помощью строк и столбцов. В них может содержаться как обычный текст, так и изображения или видео. В раннюю эпоху интернета таким способом верстали даже полноценные веб-страницы.
Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.
В HTML для создания таблиц используются теги группы table. К ним относятся:
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Тег используется для создания HTML таблиц.
HTML таблица должна содержать хотя бы одну строку и хотя бы одну ячейку — ячейку-заголовок или — обычную ячейку в каждой строке.
Таблица, созданная тегом может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов , , .
К таблице можно добавить подпись, используя тег .
Внутри таблицу можно делить не только по строкам, но и по колонкам используя теги и .
HTML таблицы не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.
Иногда для простоты восприятия контент нужно оформить в виде таблицы. Таблица состоит из строк и столбцов и предназначена для структурирования данных. Часто в таблицах размещают однотипные данные. Пример таблицы из школьных лет — классный журнал. Каждая строка это ученик. Колонки — даты. Напротив каждой фамилии можно проставить оценку за урок, прошедший в конкретную дату.
В HTML для создания таблиц существует набор семантических тегов:
<table>
<thead>
<tbody>
<tfoot>
<th>
<tr>
<td>
Создадим таблицу с первыми тремя местами в топ-250 лучших фильмов:
<td>Побег из Шоушенка</td> <td>Властелин колец: Возвращение Короля</td> Место Оценка Название фильма Год выхода 1 9.1 Зелёная миля 1999 2 9.1 Побег из Шоушенка 1994 3 8.6 Властелин колец: Возвращение Короля 2003
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing:
Пример: Применение свойств padding и border-spacing
Попробуй сам »
Что представляет собой HTML
Формально HTML (Hypertext Markup Language) считается языком разметки веб-страниц. Результат интерпретируется браузером, и пользователь видит текст на экране компьютера или смартфона в заданном разработчиком виде. Первые сайты создавались практически на «чистом» коде HTML при незначительном включении скриптов на JavaScript.
Базовое знание HTML требуется для большинства вакансий, касающихся работы с сайтами, их наполнением и продвижением.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут , у ячейки или , где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут , у ячейки или , где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута и для нужной ячейки:
<td colspan="3" rowspan="2">Текст ячейки</td>
Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут .
Пример HTML таблицы с объединением ячеек
Исходный код таблицы HTML с объединенными ячейками
С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега <caption>, а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.
Заголовок может потребоваться в следующих случаях:
чтобы показать пользователям краткое содержимое таблицы – такой подход будет полезен, когда на странице много таблиц;
тег влияет на оптимизацию страницы – его любят поисковики.
Давайте добавим <caption> в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:
<caption>Таблица обо всем</caption>
С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом <b>.
Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:
Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок () и последнюю строку (), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги , и
Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
Корневой элемент HTML-страницы: <html>
Контейнер <head> содержит информацию для браузеров и поисковых систем: <head>
<title>Заголовок окна веб-страницы</title>
Видимое содержимое страницы: <body>
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
Зачем изучать HTML + преимущества
В 2023 году HTML используется так широко, как не используется ни один другой язык разметки. Пока есть интернет (в привычном нам виде) будет и HTML.
Вот еще 4 причины учить HTML:
Он очень простой. Его легко изучить и просто использовать.
Он может стать первой ступенью к новым знаниям. Язык разметки не просто помогает в изучении основ веб-программирования, он также часто является первой ступенью на пути к «большому» программированию или изучению высокоуровневых языков программирования.
Он поддерживается всеми браузерами.
Он может быть интегрирован с другими языками, такими как CSS, JavaScript.
И три возможности, которые даёт HTML:
Не зависит от платформы. Если устройство использует браузер, значит оно сможет открывать веб-страницы на HTML.
На веб-страницу можно добавлять: изображения, видео и аудио.
В текст можно добавлять гипертекст.
Раздел HEAD.
Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера: <title>Заголовок страницы</title>
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:
<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">
HTML Таблицы
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .
Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
The декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Что нельзя сделать на HTML
Нельзя написать скрипт, задать функциональность определенной кнопке, задать поведение блока при действии пользователя.
Вот ещё несколько сценариев, что нельзя сделать на HTML (без стилей и JavaScript):
Сделать раскрывающееся меню.
Создать подсветку для текста любого цвета.
Сделать диалоговое окно.
Сделать сворачивающееся и раскрывающееся меню.
Даже такую элементарную подсветку без стилей сделать не получится
Шапка и подвал таблицы
Тегом <thead> мы можем задать заголовочную секцию таблицы. Чаще всего речь идет о первой строке, содержащей заголовки столбцов. В нем для ячеек используется тег <th>. Контент в этой ячейке выравнивается по центру, а текст становится жирным.
Тег <tfoot> используется для группировки содержимого нижней части таблицы – его принято обозначать нижним колонтитулом таблицы. Выводится он после тега <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней – все зависит от браузера. Для ячеек в секции <tfoot> следует использовать тег <td>.
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.
Рассмотренный пример HTML-документа использует следующие теги:
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Теги логической группировки
Существуют также теги <thead>, <tbody>, <tfoot> и <caption>. Казалось бы, у нас уже есть прекрасно выглядящая таблица. К чему усложнять?
Во-первых, это красиво 😄
Но если говорить серьёзно, то эти теги помогают лучше читать разметку сложных таблиц и отделять зёрна от плевел: структурные части таблицы друг от друга. Например: сложную шапку от тела с данными, и всё это — от результатов подсчёта в подвале.
К тому же, правильно свёрстанная таблица может отобразиться в поисковике в виде сниппета.
Тег <thead> отвечает за шапку таблицы. Внутри этого тега могут располагаться одна или более строк с заголовками таблицы. <thead> должен располагаться в разметке сразу за открывающим <table> или после <caption>, но строго до <tbody> и <tfoot>.
<thead> по своей семантике похож на тег <header>, только его «влияние» распространяется в пределах таблицы.
Наличие этих тегов в разметке удобно и с точки зрения стилизации. Можно разом применить стили к блоку целиком, используя селекторы thead, tbody или table :not(tbody) (почему бы и нет? 😏)
Добавим в нашу таблицу <thead>:
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> Модель Цена iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699
Этот тег предназначен для основной части таблицы. Внутрь него помещаются строки с данными. Можно использовать несколько <tbody> внутри таблицы, разделяя тем самым данные на отдельные блоки.
Этот тег схож по семантике с <main>, но в пределах таблицы.
Обернём все айфоны в один <tbody> и добавим пару андроидов, чтобы показать, что может быть больше одного блока данных:
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> <td>Xiaomi Mi 10</td> <td>Xiaomi Black Shark 3 128 Gb</td> Модель Цена iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699 Xiaomi Mi 10 $768 Xiaomi Black Shark 3 128 Gb $529
Тег <tfoot> нужен для строки «Итого» — некой строки с итогом данных таблицы. В таблице может быть только один блок <tfoot>.
Браузер всегда отрисовывает <tfoot> внизу таблицы, даже если этот блок идёт в разметке не последним (хоть это и не очень логично).
Если по какой-то причине вы не использовали в таблице <thead> или <tbody>, то футер будет отрисован после всех <tr>.
По семантике этот тег похож на <footer>, только в пределах таблицы.
Добавим в нашу таблицу строку со средней ценой всех телефонов:
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> <td>Xiaomi Mi 10</td> <td>Xiaomi Black Shark 3 128 Gb</td> Модель Цена iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699 Xiaomi Mi 10 $768 Xiaomi Black Shark 3 128 Gb $529 Средняя цена: $758.8
Открыть демо в новой вкладке
Если нужно подписать таблицу, дать ей определение, то можно использовать парный тег <caption>. В него помещается общая информация о таблице. Подробнее в статье про <caption>.
Например, для нашей таблицы прекрасно подошло бы описание «Цены на флагманские модели iPhone и Xiaomi». Добавим его в разметку (часть данных опущена для краткости):
<caption>Цены на флагманские модели iPhone и Xiaomi</caption> <!-- Данные по iPhone --> <!-- Данные по Xiaomi --> Цены на флагманские модели iPhone и Xiaomi Модель Цена <!-- Данные по iPhone --><!-- Данные по Xiaomi --> Средняя цена: $758.8
Открыть демо в новой вкладке
Помимо глобальных атрибутов при работе с таблицами вам могут очень пригодиться атрибуты colspan и rowspan. Оба атрибута предназначены для объединения ячеек. colspan нужен для объединения ячеек из 2 или более столбцов, а rowspan для объединения ячеек из 2 или более рядов.
Разделим описание телефонов на производителя и модель. Производитель будет повторяться, объединим ячейки с его названием во всех рядах. Добавим один заголовок «Производитель», а в первые <tr> каждого из <tbody> — название модели, и применим атрибут rowspan. Теперь эти ячейки занимают собой пространство в 3 и 2 ряда соответственно.
<caption>Цены на флагманские модели iPhone и Xiaomi</caption> <td>Black Shark 3 128 Gb</td> Цены на флагманские модели iPhone и Xiaomi Производитель Модель Цена iPhone 12 Pro $999 12 $799 12 mini $699 Xiaomi Mi 10 $768 Black Shark 3 128 Gb $529 Средняя цена: $758.8
Открыть демо в новой вкладке
Но теперь в итоговой строке количество ячеек не совпадает с общим числом колонок в таблице. Растянем первую ячейку на две колонки:
<caption>Цены на флагманские модели iPhone и Xiaomi</caption> <td>Black Shark 3 128 Gb</td> <td colspan="2">Средняя цена:</td> Цены на флагманские модели iPhone и Xiaomi Производитель Модель Цена iPhone 12 Pro $999 12 $799 12 mini $699 Xiaomi Mi 10 $768 Black Shark 3 128 Gb $529 Средняя цена: $758.8
Открыть демо в новой вкладке
💡 У таблицы нет встроенных стилей для отображения границ ячеек. Не удивляйтесь, если, написав разметку, вы не увидите рамки. Используйте CSS-свойство border.
Задать границы элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому задавайте их тегам <table>, <th> или <td>.
💡 Внимательно считайте количество ячеек в строках таблицы. Оно должно быть одинаковым. Особенно важно это делать, если растягиваете ячейки по горизонтали или вертикали. Не удивляйтесь, если снизу таблицы или сбоку в одной из строк внезапно будет торчать ячейка, нарушая красоту вашей таблицы. Вы просто где-то забыли удалить лишнюю ячейку.
💡 Средствами CSS можно создать конструкцию, визуально максимально похожую на таблицу, но лучше так не делать. Важно не только внешнее сходство, но и смысловая нагрузка. Проще всего добиться совпадения смысла и визуального сходства, используя теги из этой статьи.
💡 Ширина таблицы по умолчанию подстраивается под контент внутри, если не задавать дополнительные CSS-свойства.
Это приводит к определённым сложностям на адаптивных сайтах. Если контент не помещается на маленький экран, то таблица не сжимается, у неё появляется горизонтальный скролл.
У этой проблемы есть несколько потенциальных решений: скрывать не первостепенную информацию для пользователей мобильных устройств или перестраивать отображение таблицы, например, при помощи свойства display.
советует
🛠 Частый дизайнерский приём — подсветка строк таблицы через одну. Это помогает считывать длинные таблицы, глазу есть за что зацепиться.
Например, сделаем каждую вторую строку с коричневым фоном. Для этого понадобится всего одно CSS-правило с псевдоклассом :nth-child():
На всякий случай подстрахуемся и ограничим область раскрашивания только телом таблицы, исключим шапку и подвал.
Открыть демо в новой вкладке
🛠 Можно сделать так, чтобы строка с заголовками колонок прилипала при прокрутке длинной таблицы. Это удобно, если данных много и пользователь может просто забыть, в какой колонке какие данные.
Это довольно просто сделать при помощи position: sticky. Имейте в виду, что нельзя применить это свойство к тегам <thead> или <tr>, поэтому применим его к <th>.
Не забудьте добавить position: relative для родителя. Заодно подстрахуемся и сделаем прилипающими только заголовки в шапке таблицы.
Задайте фон заголовкам, чтобы текст ячеек не был виден при прокрутке. А чтобы избавиться от линий между ячейками, зададим для всей таблицы свойство border-collapse: collapse:
Открыть демо в новой вкладке
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Тег является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.
Далее необходимо определить строки и ячейки — структуру таблицы.
В HTML таблицах строка (ряд) является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка внутри строки будет в первой колонке, второй элемент — во второй колонке и так далее.
Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк основной части таблицы используют тег . Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег .
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, — область нижнего колонтитулы, — основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Подпись , при использовании, ставится сразу после открывающего тега .
По сравнению с каким-нибудь высокоуровневым языком программирования (например, зыками группы C) изучить HTML — вообще не сложно.
Выучить этот язык разметки можно за пару дней. Другое дело, что HTML в одиночку, без «стилей» (и это как минимум) — никому не нужен. Усвоить вышеуказанный стек за 2 дня уже не получится, понадобится минимум месяц, а то и два. Что касается JavaScript, то на его усвоение уйдёт минимум 4-5 месяцев. Таким образом, усвоить минимальный набор знаний и технологий для HTML можно примерно за полгода, но при достаточно усердном подходе к обучению.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
Набрать произвольный текст и разметить его HTML тегами;
Cохранить файл с расширением .htm или .html.
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.
Пример: Применение тега <caption>
Что можно сделать на HTML
Можно создать только структуру веб-страницы: заголовки, разделы, ссылки, распределить места для изображений и видео. Ничего большего, например, написать скрипт, на HTML не сделать. И без CSS создать даже элементарные, привычные нам на страницах вещи — не получится. Но можно назначить цвет для текста, например.
Веб-цвета в HTML 4.01
Тело таблицы
Тег <tbody> содержит основную часть информации и группирует главные части таблицы. Его можно использовать сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.
Тело таблицы располагается после заголовка <caption> и шапки <thead>.
Структурные теги
Будем создавать таблицу вместе и по ходу дела разбираться с нужными тегами и атрибутами.
Самый важный тег для создания таблицы — это <table>. С него всё начинается. Им всё заканчивается. Встречая этот тег в разметке, браузер понимает, что дальше будет таблица.
Это парный тег, внутри которого мы дальше разметим строки и ячейки. А пока просто создадим нашу таблицу.
Любая таблица в первую очередь состоит из строк. Чтобы в таблице появились строки, используйте парный тег <tr>. Сколько нужно строк — столько раз нужно написать <tr> внутри <table>.
Пока добавим три строчки в таблицу:
«tr» расшифровывается как «table row» и переводится «ряд таблицы».
Все теги до этого только создавали структуру, но данных мы пока никуда не добавляли. Чтобы создать ячейку под данные, нужен парный тег <td>. Пишем столько <td> внутри <tr>, сколько нужно ячеек таблицы.
Ячейки формируют из себя столбцы. В HTML нет специального тега для столбцов.
Ячейки теоретически могут существовать и без <tr>. Они будут выстраиваться в строку. Чтобы новые ячейки встали в новую строку, мы как раз и используем <tr>.
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699
«td» расшифровывается как «table data» и переводится «данные таблицы».
Теперь в нашей таблице 3 строки. В каждой строке по две ячейки. Из этих ячеек складывается два столбца.
Открыть демо в новой вкладке
По смыслу данных, в принципе, понятно, что в этой таблице. Но лучше добавить подписи для колонок, чтобы исключить недопонимание.
В принципе, можно использовать уже знакомые нам <tr> и <td>:
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> Модель Цена iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699
Но в таком варианте заголовки ячеек ничем не будут отличаться ни внешне, ни по смыслу от обычных ячеек.
Открыть демо в новой вкладке
Специально для заголовков ячеек или строк есть тег <th>. Обернём в этот парный тег заголовки:
<td>iPhone 12 Pro</td> <td>iPhone 12 mini</td> Модель Цена iPhone 12 Pro $999 iPhone 12 $799 iPhone 12 mini $699
К ячейкам, обёрнутым тегом <th>, применяются дефолтные стили: текст становится жирным и выравнивается по центру ячейки. Это помогает внешне отделить заголовки от остальных данных таблицы.
Открыть демо в новой вкладке
«th» расшифровывается как «table header» и переводится «заголовок таблицы».
Недостатки HTML
У этого языка разметки есть четыре недостатка:
Можно создавать только статические веб-страницы. Для создания динамических веб-страниц — придётся задействовать другие языки.
Для создания даже простой веб-страницы необходимо написать большое количество кода.
В этом языке разметки есть дыры и уязвимости, так что с точки зрения безопасности — это не на 100 % защищённый вариант.
Нельзя задать функциональность блоку.
Даже элементарный раскрывающийся блок сделать на голом HTML не получится
Группирование строк и столбцов таблицы
Тег <colgroup> создает структурную группу столбцов, выделяя логически объединенные ячейки. Он группирует один или несколько столбцов для единого форматирования, позволяя таким образом применять стили к столбцам, чтобы не повторять стили для каждой ячейки или строки.
Еще один важный тег – <col>. Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.
Давайте добавим к уже существующей таблице данные теги:
<colgroup>
<col span="1" style="background:pink">
<col style="background-color:yellow"><!-- Задаем цвет фона для следующего столбца таблицы-->
</colgroup>
Группирование строк и столбцов таблицы позволяет нам быстро задать нужные стили без их дублирования.
Как работает HTML
Давайте посмотрим, как устроен HTML-документ на конкретном примере.
Любой HTML-документ начинается с указания декларации версии HTML. Этот элемент называется DOCTYPE. Выглядит строка с этим элементом может по-разному, например, вот так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
А в HTML 5, например, тег вообще один:
<!DOCTYPE html>
В рамках этой статьи мы попробуем разобрать все самые важные элементы и теги HTML. Давайте разберём главные строительные блоки документа на реальном примере.
Теперь посмотрим на основные элементы HTML. Разберем основные теги, которые встретились в примере выше, в том же порядке, что и в самом коде.
— тот самый DOCTYPE о котором мы уже сказали выше. По сути, в 2023 году, он является анахронизмом, который необходим для формального соблюдения правил HTML-документа. А вот в старых версиях HTML в доктайп содержались URL, которые вели на сборник правил для каждого конкретного стандарта HTML.
— это HTML-элемент. Он используется для формирования корня документа. Это элемент верхнего уровня, которому подчиняются все элементы, которые лежат ниже (другими словами, находится внутри него).
— HEAD-элемент. Является элементом метаданных документа, другими словами, он содержит машиночитаемую информацию о конкретном документе, например, о его TITLE, скриптах, кодировке и CSS. Поправка: в элементе-HEAD находится информация, которую видят только поисковые машины. Внутри HEAD-элемента не размещается контент, который должны увидеть посетители сайта на странице.
— BODY-элемент. В теле документа (с тегом BODY) находится непосредственный контент или содержимое HTML-страницы. При этом, в HTML-документе может быть только один боди-элемент. Внутри этого элемента размещается контент, видимый для посетителя веб-страницы. Например: текст и медиафайлы (от изображений до аудио и видео).
— задание кодировки для документа. В нашем случае — использована кодировка UTF-8. Это универсальный вариант и его можно использовать в 98% случаев.
— TITLE-элемент. При помощи него формируется тайтл или заголовок. Такой тайтл мы видим в десктоп-браузере во вкладке страницы:
Заголовок страницы отображает любой браузер
Это были главные элементы HTML. Но мы еще не упомянули изображения. Чтобы вставить изображение в код HTML — необходимо использовать HTML-элемент image. Например, вот так:
<img src="images/pie-icon.png" alt= Пирожок с вишней">
Вот главные атрибуты для элемента изображения в HTML:
src — полный путь до картинки, которая добавляется в документ.
alt — метатег, содержащие альтернативное описание изображения. По сути — это текст, который будет отображаться, если картинка не сможет быть загружена, а также текст, который будут озвучивать скринридеры при открытии страницы.
Использование замещаемого элемента img
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега .
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.
Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.
К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера. Вот пример использования свойства width:
table {width: 100%;}
Пример: Применение свойства width
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
Каждая таблица в HTML-файле должна состоять из строк и столбцов, а ее создание заключается в одном простом теге – <table>.
Откройте HTML-документ и пропишите туда следующее:
<table></table>
Таким образом будет создана пустая таблица, в которой нет ни строк, ни столбцов – никакой информации. Тег <table> при этом является контейнером для элементов таблицы, и все они должны находиться внутри него.
Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:
<table>Моя первая таблица</table>
А вот как этот фрагмент отображается в браузере:
Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге <body>. Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.
Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег <style></style> и добавить в него следующее:
Это и есть наша таблица, которая сейчас размером с крошку, и в ней до сих пор почему-то нет текста. Для решения этой проблемы нам помогут теги <tr>, <th> и <td> – подробнее о них поговорим далее.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Что не получится сделать на HTML
Несмотря на относительно обширный список возможностей по форматированию страниц, в HTML нет целого перечня функций. Например, теги позволяют оперировать стандартным шрифтом, а вот заменить его не получится. Компенсируют функционал подключением таблицы стилей CSS – это отдельный язык описания внешнего вида HTML-документов.
Стили компенсируют недостатки технологии:
Заметно упрощают адаптивную верстку.
Экономят время при оформлении страниц сайта.
Расширяют стандартные возможности.
В итоге дизайн ресурса становится более интересным, скорость загрузки возрастает за счет меньшей нагрузки на сервер. Вместо дублирования кода на каждой странице при использовании HTML есть возможность вставлять небольшую ссылку на нужный участок кода. При изменении шаблона файл CSS остается неизменным, что упрощает редактирование сайта.
Сам по себе HTML работает довольно «топорно», требует дублирования команд на каждой странице. Это нерационально, например, при формировании общих элементов типа шапки, подвала, общего меню. Технология CSS позволила создавать фирменное оформление независимо от шаблона. Стоит подключить нужный участок кода, и страница преображается.
Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
Интеграции других инструментов в HTML
Удобство языка разметки упростило интеграцию сторонних сервисов. Например, на сайт легко встроить системы аналитики Яндекс.Метрика и Google Analytics. То же относится и к функциональным блокам – форме захвата контактов, подписки на новости, заказу обратного звонка. Пользователи не замечают какой-либо разницы, они видят результат.
Наиболее востребованные интеграции:
PHP. В тело HTML страницы включается ссылка на исполняемый файл.
JavaScript. Скрипт вставляется целиком или в виде ссылки на файл.
Ajax. Представляет собой «смесь» асинхронного JS и XML.
Iframes. Технология встраивания в документ интерактивных элементов.
Такие возможности и приводят к мнению, что HTML – это язык программирования. Спецификация предполагает только управление отображением содержания сайта, а остальные функции зависят от подключаемых программных модулей. Изучается язык разметки буквально за пару дней, но приходится учитывать его ограничения.
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.
Объединение строк
Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк. В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
Заголовок столбцов и строк, объединение ячеек
Мы также можем задать заголовок для столбцов и строк – в этом нам помогает тег <th>. В такой ячейке обычно хранится атрибут для всех данных строк или столбцов. А к содержимому таких ячеек применяется определенный стиль – выделение жирным шрифтом и выравнивание по центру ячейки.
Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.
Давайте для примера добавим тег <th> с надписью «Заголовок» в еще одну строку таблицы:
<table> <tr> <th>Заголовок</th> </tr> <tr> <td> Моя первая таблица </td> <td> А вот и столбец </td> </tr> <tr> <td> А вот и новая строка </td> <td> И еще один столбец </td> </tr> <tr> <td> Третья строка! </td> <td> И последний столбец! </td> </tr>
</table>
В итоге получаем следующее:
Обратите внимание, что заголовок выровнен не по всей таблице, а только по первому столбцу. Чтобы сделать его по центру – необходимо прописать дополнительный атрибут colspan, который объединяет столбцы. В нашем случае нужно связать два столбца, поэтому значение будет равно двум:
<tr>
<th colspan="2">Заголовок</th>
</tr>
Вот как это выглядит на экране:
Данный атрибут мы можем добавлять к любым столбцам. Также есть еще один атрибут, который объединяет не столбцы, а строки – rowspan. Прописывается он аналогичным образом. Для примера давайте совместим вторую и третью строки второго столбца:
<table> <tr> <th colspan="2">Заголовок</th> </tr> <tr> <td> Моя первая таблица </td> <td> А вот и столбец </td> </tr> <tr > <td > А вот и новая строка </td> <td rowspan="2"> И еще один столбец </td> </tr> <tr> <td rowspan="2"> Третья строка! </td> </tr>
</table>
Обратите внимание, что я удалил из последнего столбца одну строку, чтобы получилось совместить вторую и третью строки. Так мы можем создавать правильно построенные таблицы без лишних полей. Это пригодится тогда, когда в двух столбцах разное количество строк.
Атрибуты
В HTML5 тег не имеет атрибутов.
Устаревшие атрибуты тега table
Возможности HTML
Особенность языка разметки HTML заключается в преобразовании простых команд в визуальные объекты. Например, тег <img> используется для отображения картинок. В перечне атрибутов есть обязательный – ссылка на файл. Изображение же обычно хранится на накопителе удаленного сервера, где располагается сам ресурс или внешний сервис.
Основные элементы HTML:
Форматирование текста – выделение курсивом, жирным шрифтом, подчеркивание, размер кегля, нумерованные/маркированные списки.
Текстовые блоки – заголовки уровней H1-H6, абзацы, перенос на новую строку.
Таблицы – любое количество строк, столбцов, фиксированная высота, ширина, заголовки.
Вставка объектов – изображения, звуковые, текстовые, видеофайлы и т.д.
Гиперссылки – на файл изображения, прайс-листа, страницу, на которую ссылается пункт меню или анкор в тексте. Есть атрибуты открытия документа в текущем или новом окне.
Также есть простейшее понятие создания форм – ввод текстовой информации, выбор пункта списка. Более сложные объекты принято создавать на JavaScript или PHP, так как эти языки более функциональны. В рамках практического применения HTML интересен копирайтеру или контент-менеджеру при публикации контента.
Поддержка браузерами
Тег
<table>
Да
Да
Да
Да
Да
Как создать строки таблицы
С помощью тега <tr> мы можем создать строку, в которой будут содержаться столбцы таблицы. Давайте добавим этот тег и посмотрим, что произойдет. Прописываем следующее:
<table> <tr> Моя первая таблица </tr>
</table>
В результате видим все ту же картину с маленькой точкой:
Так происходит, потому что каждая ячейка в такой строке устанавливается с помощью тега <td>. Если добавить его внутрь, то мы получим тот результат, к которому шли изначально – таблицу. Да, она еще не похожа на полноценную таблицу, но уже появляется рамка и есть первая строка с первым столбцом.
Пропишите следующий код:
<table> <tr> <td> Моя первая таблица </td> </tr>
</table>
Аналогичным образом давайте добавим еще несколько строк и столбцов. Для этого в теге <table> создадим 3 закрывающих тега <tr></tr> и внутрь добавим по 2 тега <td></td>:
<table> <tr> <td> Моя первая таблица </td> <td> А вот и столбец </td> </tr> <tr> <td> А вот и новая строка </td> <td> И еще один столбец </td> </tr> <tr> <td> Третья строка! </td> <td> И последний столбец! </td> </tr>
</table>
Как видите, мы потихоньку идем к образованию полноценной таблицы, но не хватает внутренних границ. Для этого нам нужно добавить обводку к тегу <td>, чтобы были видны границы строк и столбцов.
Просто прописываем в теге <style> пару строчек кода:
td { border: 1px solid grey;
}
Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег <style> для table:
table {
border-collapse: collapse;
}
И, вуаля, перед нами отображается полноценная таблица с привычными границами:
Для визуального удовлетворения давайте также растянем таблицу на всю ширину экрана – для этого необходимо задать width для тега <table>:
table { width: 100%;
}
Теперь наша таблица растянута:
Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.
Задачи
Объединение строк
Попробуй »
Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.
<!—
—>
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги и ставятся внутри тега перед тегами , , , и после тега .
Оба тега могут определять стили для одной или нескольких колонок. Атрибут , указывает количество колонок, на которые будет влиять тег. Если атрибут не указан, его значение приравнивается к единице.
Теги и похожи друг на друга, однако тег позволяет использование вложенных тегов , таким образом можно задать стили группе колонок через и конкретной колонке внутри группы через элемент (см. пример ниже).
Если внутри есть вложенные теги , то атрибут у тега не ставится, а количество колонок на которые влияет тег определяется вложенными элементами.
Выше мы уже разобрали основные HTML-элементы, которые есть в любом подобном документе. Теперь — сосредоточимся на тегах, которые используются для разметки текста. Это одни из самых важных HTML-элементов и вы должны знать их в любом случае.
Ссылки. Чтобы создать ссылку просто добавьте a-элемент (a — сокр. от слова anchor — «якорь» на английском).
Пример использования якоря (ссылки)
Допустим, мы хотим обернуть в ссылку текст «Фиолетовый страус». Добавляем тег таким образом:
<a>Фиолетовый страус</a>
Теперь добавляем атрибут href (это сокращение от англ. hypertext reference) и указываем ссылку на документ:
Особое внимание обращайте на корректный протокол (HTTPS или HTTP) в начале ссылки, иначе ссылка может просто не открыться или открыться с ошибками.
Заголовки. Без заголовков — никуда. Их любят как люди, так и поисковые машины.
Заголовок страницы отображается в сниппете на странице результатов поиска
Если вы не понимаете, как устроены заголовки на веб-странице — подумайте о заголовках и подзаголовках внутри бумажной книги. На странице сайта они выполняют точно такую же роль.
HTML предусматривает шесть уровней заголовков, но, чаще всего, применяются не более 4 уровней.
Разметить заголовки можно при помощи тега h1 (вместо единицы — поставьте ту цифру, уровень заголовка которого вам требуется. Например, вот заголовки четырех уровней:
<h1> Главный заголовок. Он должен быть один на весь документ</h1>
<h2> Заголовок второго уровня </h2>
<h3> Заголовок третьего уровня</h3>
<h4> Заголовок четвертого уровня</h4>
Списки. В HTML вы можете использовать списки для перечислений.
Пример тега списка в коде
Например, у нас есть такой текст:
<p>Фиолетовые страусы важны, ведь их популяция продолжает сокращаться из года в год. Вот лишь некоторые причины, почему мы должны сохранить фиолетовых страусов: они красивые, они полезны, они на грани вымирания...численность фиолетовых страусов должна быть восстановлена</p>
И вот один из способов, как сделать список в HTML:
<p>Фиолетовые страусы важны, ведь их популяция продолжает сокращаться Из года в год. Вот лишь некоторые причины, почему мы должны сохранить фиолетовых страусов</p>
<ul> <li>они красивые</li> <li>они полезные</li> <li>они на грани вымирания</li>
</ul>
<p>численность фиолетовых страусов должна быть восстановлена</p>
Последний элемент текстовой разметки HTML, который мы ещё не рассмотрели — абзац.
Абзац. Добавить его очень просто:
<p>Тег абзаца</p>
Оформлять абзацы в HTML-коде нужно исключительно таким тегом — не нужно ни придумывать ничего нового или дополнительного.
— тот самый DOCTYPE о котором мы уже сказали выше. По сути, в 2023 году, он является анахронизмом, который необходим для формального соблюдения правил HTML-документа. А вот в старых версиях HTML в доктайп содержались URL, которые вели на сборник правил для каждого конкретного стандарта HTML.
— это HTML-элемент. Он используется для формирования корня документа. Это элемент верхнего уровня, которому подчиняются все элементы, которые лежат ниже (другими словами, находится внутри него).
— HEAD-элемент. Является элементом метаданных документа, другими словами, он содержит машиночитаемую информацию о конкретном документе, например, о его TITLE, скриптах, кодировке и CSS. Поправка: в элементе-HEAD находится информация, которую видят только поисковые машины. Внутри HEAD-элемента не размещается контент, который должны увидеть посетители сайта на странице.
— BODY-элемент. В теле документа (с тегом BODY) находится непосредственный контент или содержимое HTML-страницы. При этом, в HTML-документе может быть только один боди-элемент. Внутри этого элемента размещается контент, видимый для посетителя веб-страницы. Например: текст и медиафайлы (от изображений до аудио и видео).
— задание кодировки для документа. В нашем случае — использована кодировка UTF-8. Это универсальный вариант и его можно использовать в 98% случаев.
— TITLE-элемент. При помощи него формируется тайтл или заголовок. Такой тайтл мы видим в десктоп-браузере во вкладке страницы:
