Приветствуем читателей нашего блога о Frontend-разработке!
Сегодня мы поговорим о жизненно важных концепциях HTML — контентных тегах, которые помогают формировать структуру страницы и управлять её эстетикой. Грамотное использование этих тегов не только делает ваши веб-страницы более структурированными, но и оказывает положительное влияние на SEO и доступность вашего ресурса.
Использование Тегов `<ul>`, `<ol>` и `<li>`
Элементы для создания списков играют ключевую роль в структурировании информации:
- <ul> (неупорядоченные списки): Используются, когда порядок элементов не имеет значения. Простой пример: перечисление городов, где вы проживали, без указания хронологии.
- <ol> (упорядоченные списки): Используются, когда важен порядок элементов, например, в хронологическом перечислении городов вашего проживания. Здесь важен сам порядок следования элементов.
- <li> (элементы списка): Каждый пункт внутри <ul> или <ol> обозначается с помощью тега <li>. Он обеспечивает структурированность и ясность списка, например:
Элемент ol
Упорядоченный список - это список, в котором порядок элементов важен. Для создания такого списка существует тег ol .
Я жил в следующих городах (перечисляю согласно времени проживания):
1. Ярославль
2. Иваново
3. Нижний Новгород
4. Кострома
Элемент ul
Но кроме упорядоченного списка существует неупорядоченный список, в котором не важна очередность элементов. Для его разметки используется тег ul.
Я жил в следующих городах:
— Иваново
— Ярославль
— Кострома
— Нижний Новгород
Свойство list-style-type
Это свойство CSS позволяет кастомизировать стиль маркеров списков. Popular options include:
- disc (чёрная точка, list-style-type:disk): Применяется для маркеров в <ul>;
- circle (list-style-type:circle): Альтернатива для простого круга;
- square (list-style-type:square): Альтернатива из тёмного квадратика;
- decimal (list-style-type:decimal): Используется в <ol> для отображения чисел;
- none (list-style-type:none): Убирает маркеры совсем;
- Существует ещё большое количество альтернативных маркеров.
Свойство определяет тип отображения маркеров в списках и имеет различные значения.
Маркеры списка в следующем примере выглядят как черные кружки. Мы можем сделать их с помощью значения disc .
ol {
list-style-type: disc;
}
Тег <img>
Для отображения изображений на странице применяется элемент <img>. У него два ключевых атрибута:
- src: Указывает путь к изображению.
- alt: Предоставляет текстовое описание на случай, если изображение не загрузится:
<img src="logo.jpeg" alt="Логотип">
Элемент img предназначен для отображения на веб-странице изображений. У элемента есть два обязательных атрибута:
— src — предназначен для указания адреса, по которому браузер загрузит изображение.
— alt — предназначен для указания альтернативного текстового описания изображения, которое будет отображаться в случаях, когда оно по какой-то причине не загрузится.
Элементы <figure> и <figcaption>
Данные теги помогают оформлять иллюстрации с пояснениями. <figure> может содержать, например, графику, а <figcaption> предоставляет описание:
<figure>
<img src="logo.jpg" alt="Логотип">
<figcaption>Логотип Креативного Дизайна</figcaption>
</figure>
Тег figure используется для вставки в статью блока с иллюстрацией, графиком, видео и другого контента, который поясняет содержимое статьи. Важным нюансом является то, что элемент не должен влиять на текст статьи и не должен быть связанным с этим текстом.
Часто блок может содержать подпись, которая будет объяснять пользователю смысл элемента. Это возможность реализуется с использованием тега figcaption.
Ограничения
— Стандарт запрещает использовать более одного элемента figcaption внутри элемента figure.
— Запрещается использовать фразы, которые явно ссылаются на элемент figure в тексте статьи. Например «на предыдущем изображении».
Свойства CSS для Верстки
- float: Определяет, как текст обтекает элемент (например, изображения). Это свойство располагает элемент слева или справа, оставляя свободное место для соседних элементов.
Свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Рассмотрим возможные значения свойства:
— left — блок будет располагаться слева, а текст будет обтекать его справа;
— right — блок будет располагаться справа, а текст будет обтекать его слева.
— none — отменяет значение float.
- padding: Внутренние отступы элемента. Задаёт пространство между содержимым и границей элемента одной строкой или по отдельности для каждой стороны:
Пример написания кода: padding: 40px 30px 35px 50px;
Свойство padding позволяет задать внутренние отступы элемента. Можно задавать отступ с каждой стороны по отдельности:
— padding-top задает внутренний отступ сверху элемента;
— padding-bottom — снизу элемента;
— padding-left — слева;
— padding-right — справа.
- border: Оформление границ элемента, включая толщину, стиль и цвет. Эти параметры можно установить как общим свойством border, так и отдельно для каждой стороны.
Свойство border задает рамку элемента. Это свойство объединяет в себе несколько свойств:
— border-width задает толщину рамки;
— border-style задает вид рамки;
— border-color задает цвет рамки.
Свойство border-width указывает толщину для каждой из сторон рамки по отдельности с помощью:
— border-right-width;
— border-left-width;
— border-top-width;
— border-bottom-width.
Свойство border-style задает стиль рамки, и для него доступны следующие значения: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
Как и для толщины, мы можем указать стиль рамки для каждой из сторон по отдельности ( border-top-style , border-left-style , border-top-style , border-right-style ).
Свойство border-color задает цвет рамки. В качестве значений можно использовать ключевые слова, как и для свойства color, но чаще все мы используем значение в шестнадцатеричном формате.
Точно так же, как и предыдущие свойства, border-color может быть задан для каждой стороны рамки по отдельности ( border-top-color , border-right-color , border-bottom-color и border-left-color ).
Например:
border-top-color: red;
или
border: 1px dotted #000000;
- margin: Определяет внешние отступы элемента, обеспечивая необходимое расстояние между элементами на странице. Свойство margin позволяет задать внешние отступы элемента.
Можно задать каждый отступ по отдельности с помощью свойств margin-top , margin-right , margin-bottom и margin-left .
Также можно задать внешние отступы одной строкой, сразу для всех сторон. Например, — margin: 40px 30px 35px 50px
Универсальный Элемент <span>
<span> – это контейнер для текста. Этот элемент не задаёт семантики, но позволяет стилизовать определённые участки текста по идентификаторам или классам.
Элемент span является универсальным контейнером для текста, у которого нет смыслового назначения.
Его можно использовать в следующих случаях:
— группировки элементов в целях стилизации;
— когда нельзя использовать более семантичный элемент для разметки текста.
Идентификаторы и Классы в HTML
- id: Уникален для каждого элемента на странице и используется для стилизации или скриптинга. С помощью селектора идентификатора браузер осуществит поиск элементов по атрибуту id и значению этого атрибута.
Нюансы использования:
— Нельзя использовать одинаковые значения id у разных элементов.
— Нельзя указывать несколько значений для атрибута id.
- class: Позволяет задавать стили группе элементов. Вы можете присваивать несколько значений классов через пробел, что значительно упрощает универсальное оформление группы элементов.
С помощью селектора по классу браузер осуществит поиск элементов по атрибуту class и значению этого атрибута.
Удобство класса
Возможность добавления одинаковых значений для атрибута class является самой мощной и удобной особенностью при стилизации элементов.
Но кроме неё есть еще одна. Для атрибута class через пробел можно указывать несколько значений.
Заключение
Контентные теги и CSS-свойства в HTML предлагают мощные инструменты для создания читаемых и эстетически приятных веб-страниц. Освоив эти знания, вы сможете значительно улучшить интерфейсы, сделать их доступными и оптимизированными для любых задач современного веб-разработки. Эти ключевые элементы помогают упорядочивать информацию и предоставляют гибкость дизайна, столь необходимую для создания профессиональных веб-приложений.
Полезные ресурсы:
Премиум контент:
https://dzen.ru/grafantonkozlov?tab=premium
Сообщество дизайнеров в VK
https://vk.com/grafantonkozlov
Телеграмм канал сообщества
https://t.me/grafantonkozlov
Архив эксклюзивного контента
https://boosty.to/antonkzv
Канал на Дзен
https://dzen.ru/grafantonkozlov
---------------------------------------
Бесплатный Хостинг и доменное имя
https://tilda.cc/?r=4159746
Мощная и надежная нейронная сеть Gerwin AI
https://t.me/GerwinPromoBot?start=referrer_3CKSERJX
GPTs — плагины и ассистенты для ChatGPT на русском языке
https://gptunnel.ru/?ref=Anton
---------------------------------------
Донат для автора блога