Семантика в HTML

Семантика часто недооценивается, но имеет огромное значение для структурирования контента и улучшения восприятия страницами поисковыми системами и устройствами.

Что такое семантика в HTML?
Семантика в HTML – это использование элементов и тегов для правильного описания структуры информации на веб-странице. Это помогает браузерам, поисковым системам и адаптивным устройствам понимать, как связан контент страницы.

Основные семантические элементы HTML:
<header>: Заголовок страницы или раздела
<footer>: Нижняя часть страницы, часто содержит контактную информацию или ссылки на социальные сети
<nav>: Навигационные ссылки
<main>: Основное содержимое страницы
<article>: Независимый контент, такой как пост в блоге или новость
<section>: Группировка связанных контентных элементов
<aside>: Боковая панель, часто содержит дополнительную информацию
<p>: Параграф текста
<h1> - <h6>: Заголовки различного уровня
<strong>: Выделение важного текста семантически важным образом
<em>: Курсивное выделение текста для придания эмоциональной или ударной ноты
<blockquote>: Цитаты
<q>: Короткие цитаты

Преимущества использования семантической разметки:
Улучшение доступности: Правильная семантика помогает людям с ограниченными возможностями лучше понимать содержимое страницы
SEO-оптимизация: Поисковые системы предпочитают страницы с правильной семантикой, что может улучшить их рейтинг
Поддержка в будущем: Правильная структура облегчает дальнейшую поддержку и модификацию страницы

Лучшие практики:
- Используйте семантику по назначению
- Избегайте излишнего вложенного уровня
- Тестируйте доступность вашего контента

Семантика в HTML – это ключевой элемент в создании доступных, оптимизированных и легко поддерживаемых веб-страниц. Помните о ее значимости при разработке каждого проекта!

#html

HTML элемент dialog для создания модальных окон

В этой статье мы разберемся с HTML элементом dialog, который играет важную роль в создании модальных окон. Этот элемент является мощным инструментом в арсенале разработчиков, позволяющим упростить реализацию модальных окон без сложного JavaScript или CSS.

-> Читать статью

#javascript #html

Привет! Сегодня я хочу вместе с вами поглубже погрузиться в изучение DOM. Это понятие встречается на каждом шагу нашей работы и играет важную роль в подготовке к собеседованиям.

Что такое DOM?
DOM (Document Object Model) представляет собой структуру, которая отображает HTML-документ как иерархическое дерево узлов. Каждый элемент страницы, будь то тег, текст или атрибут, становится узлом в этом дереве. Эта структура позволяет JavaScript коду взаимодействовать с элементами страницы - читать их, изменять, добавлять или удалять.
Когда браузер загружает страницу, он создает DOM и сохраняет его в переменной document, после чего генерирует событие DOMContentLoaded, сигнализируя о том, что DOM полностью построен и готов к манипуляциям. Именно с переменной document начинается вся работа JavaScript с HTML-разметкой страницы, позволяя управлять содержимым и структурой страницы.

Особенности работы с DOM в JavaScript
- DOM представляет HTML-документ в виде дерева узлов, где каждый узел является частью веб-страницы.
- Через JavaScript можно изменять элементы DOM, добавляя или удаляя узлы, изменяя стили и атрибуты.
- События в DOM позволяют отслеживать действия пользователя на странице, такие как клики мыши и нажатия клавиш, для создания интерактивных интерфейсов.

Важные аспекты DOM:
1. Автоисправление позволяет браузерам исправлять ошибки в HTML-коде в процессе построения DOM, обеспечивая корректное отображение страницы.
2. Влияние на производительность может быть значительным при частых манипуляциях с DOM. Оптимизация таких операций помогает улучшить скорость и отзывчивость веб-приложений.
3. Кроссбраузерная совместимость играет важную роль, так как разные браузеры могут по-разному интерпретировать DOM. Тестирование в различных браузерах обеспечивает стабильность работы веб-приложений.
4. Безопасность в работе с DOM особенно важна при обработке пользовательских данных для защиты от XSS-атак.
5. Доступность должна быть учтена при взаимодействии с DOM, чтобы веб-страницы были удобны для всех пользователей, включая тех, кто использует вспомогательные технологии.

Заключение
Владение навыками работы с DOM в JavaScript открывает широкие возможности для создания интерактивных страниц.

#html #javascript #interview

В веб-разработке важен не только функционал, но и впечатление, которое оставляет сайт. Один из способов улучшить пользовательский опыт - добавить индикатор загрузки. В этом примере мы реализовали лоадер с использованием HTML и CSS, который отображает процесс загрузки с минимальным количеством стилей. Посмотреть код можно здесь - JsFiddle(тык)

#html #css

Простой и интересный пример интерактивной карточки, которая при наведении мыши будет раскрывать дополнительную информацию с анимацией разворачивания.

Посмотреть можно тут - JsFiddle(тык)

#css #html

Сегодня коротко про один малоиспользуемый HTML-тег — <base>.

Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.

Как он работает?
Тег <base> вставляется внутри <head> и имеет два атрибута:
1. href — задаёт базовый URL.
2. target — задаёт целевое окно (например, _blank, _self, _parent, _top).

<head>
    <base href="https://truefrontender.t.me/" target="_blank">
</head>
<body>
    <a href="about.html">О канале</a>
    <img src="images/logo.png" alt="Логотип">
</body>

Результат:
1. Ссылка будет открываться в новом окне и вести на страницу https://truefrontender.t.me/about.html.
2. Изображение загрузится с https://truefrontender.t.me/images/logo.png.

Когда это полезно?
— Если у вас большой проект, где ссылки и ресурсы ссылаются на один и тот же базовый URL. Вместо указания полного пути каждый раз, вы просто задаёте его через <base>.
— При миграции сайта на новый домен — можно временно добавить <base> для тестирования.

Ограничения:
- Тег <base> работает только один раз на документ. Если их несколько, браузер берёт только первый.

А вы когда-нибудь видели или использовали <base>?

#HTML

Редкий атрибут, про который многие даже не слышали, — это reversed для <ol>. Довольно простая и базовая штука, но, возможно, однажды пригодится)

Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут reversed позволяет отображать элементы списка в обратном порядке нумерации. Вместо того чтобы начинать с единицы, счёт стартует с максимального числа и идёт вниз.

Как работает?
Добавьте этот атрибут к <ol>, например:

<ol>
  <li>Первое место</li>
  <li>Второе место</li>
  <li>Третье место</li>
</ol>

Браузер покажет это так:

3. Первое место  
2. Второе место  
1. Третье место  

Кто-нибудь знал про этот атрибут?

#HTML

Вчера я рассказывал про Intersection Observer , а сегодня подготовил пример его использования. С помощью Intersection Observer будем "печатать" текст, когда он попадает в зону видимости, и скрывать при прокрутке вверх.

Посмотреть пример можно тут JSFiddle / CodePen

#CSS #HTML #JavaScript

Привет! Готовы к короткой рабочей неделе? Давайте начнем ее с формошлепства.

Иногда дизайнеры рисуют сложные формы — поля в одном месте, кнопки в другом. Cамый простой вариант, который приходит в голову — обернуть всё в форму. Да, это работает, но в большинстве случаев это приведёт как минимум к багам, а максимум — к архитектурным проблемам.

Что делать?
Связать кнопку с формой через атрибут form.
Этот атрибут позволяет кнопке отправлять форму, даже если она расположена вне её, благодаря привязке через id.

<form id="contactForm">
  <input type="text" name="name" />
</form>

<!-- Кнопка вне формы -->
<button type="submit" form="contactForm">Сохранить</button>

Как это работает?
1. <form> получает id.
2. Кнопка вне формы указывает на этот id через атрибут form.
3. Браузер связывает кнопку с формой и корректно обрабатывает submit.

#HTML #BestPractices

Вы наверняка видели OTP-поля для ввода кодов. А знаете, как они делаются?
Сегодня разберёмся, как они делаются с помощью атрибута size.

Что делает атрибут size?
Атрибут size указывает примерное количество видимых символов в поле ввода. Это влияет только на ширину, но не ограничивает количество вводимых символов.

<input type="text" size="6">

Поле будет визуально рассчитано примерно на 6 символов.

Пример
Один из частых кейсов — OTP-поля. Мы хотим, чтобы каждое поле занимало ровно одно место:

<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">

1. Атрибут size="1" делает поле под один символ.
2. maxlength="1" ограничивает ввод до одного символа.

Демо: CodePen

Ограничения и фишки:
1. Работает с типами: text, search, tel, url, email, password
2. Не ограничивает ввод — для этого есть maxlength
3. CSS width перекроет size, если задать оба

#HTML #CSS #BestPractices

Когда-нибудь использовали CSS-функцию attr? С помощью этой функции мы можем подставлять значения HTML-атрибутов прямо в стили.

Что это такое?
attr() — CSS-функция, которая извлекает значение HTML-атрибута и подставляет его в стиль или содержимое.
Раньше она работала только в content, теперь экспериментально доступна и в других свойствах.

Пример:

<button class="tooltip-btn" data-tooltip="Удалить файл">Удалить</button>

.tooltip-btn::after {
  content: attr(data-tooltip);
}

Полный пример можно посмотреть на CodePen(тык)

Поддержка в других свойствах
Есть экспериментальная поддержка использования attr в таких свойствах, как width, height, margin и др. Пример:

<div data-width="150" data-height="150"></div>

div {
  width: attr(data-width px, 100px);
  height: attr(data-height px, 100px);
}

Функция принимает до 3 параметров:
1. Имя атрибута
2. Тип единицы измерения
3. Опциональное значение по умолчанию


Поддержка в content: CanIUse
Поддержка во всех свойствах: CanIUse

#CSS #HTML

Сегодня разберём CSS-свойство — display: contents. Оно редко встречается, но может сильно упростить вёрстку в некоторых кейсах.

Что такое display: contents?
Это свойство заставляет элемент "исчезнуть" из рендера, но его дочерние элементы остаются и ведут себя так, будто родителя нет.

Пример
У нас есть сетка, но лишняя обёртка ломает структуру:

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .inner {
    display: contents;
  }

  p {
    background: lightblue;
    padding: 10px;
  }
</style>

<div class="wrapper">
  <div class="inner">
    <p>Привет</p>
    <p>Мир</p>
  </div>
</div>

Без display: contents блок .inner создаёт лишний уровень в сетке, и не попадают в ячейки .wrapper. С display: contents элемент .inner исчезает из рендера, и <p/> становятся прямыми детьми .wrapper для сетки, занимая ячейки.

Когда полезно?
- Убираем лишние обёртки, не ломая семантику HTML.
- Упрощаем работу с Grid и Flexbox, чтобы дети родителя участвовали в сетке напрямую.
- Используем для улучшения доступности.

Поддержка браузерами: Can I Use

#CSS #HTML