HTML и CSS Учебники

https://hcdev.ru/learn
Admin
A collection of tutorials for learning HTML and CSS technologies, covering topics such as HTML5,...
Tokens:277,957
Snippets:1,025
Trust Score:7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Передача данных формы с использованием GET

Source: https://hcdev.ru/learn/forms/form-element

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

```HTML
https://example.com/animals?animal=frog
```

--------------------------------

### HTML: Значки запуска для iOS

Source: https://hcdev.ru/learn/html5/metadata

Предоставляет значки запуска для мобильных устройств iOS, используя тег <link> с атрибутом rel="apple-touch-startup-image". Поддерживает разные изображения для портретной и ландшафтной ориентации с помощью медиазапросов.

```HTML
<link
    rel="apple-touch-startup-image"
    href="icons/ios-portrait.png"
    media="orientation: portrait"
/>
<link
    rel="apple-touch-startup-image"
    href="icons/ios-landscape.png"
    media="orientation: landscape"
/>
```

--------------------------------

### HTML Упорядоченный Список с Атрибутами

Source: https://hcdev.ru/learn/html5/lists

Пример использования атрибутов 'type', 'reversed' и 'start' для настройки упорядоченного списка. Атрибут 'type' определяет стиль нумерации (цифры, буквы, римские цифры), 'reversed' меняет порядок на убывающий, а 'start' задает начальное значение.

```HTML
<ol type="A" start="3" reversed>
  <li>Элемент C</li>
  <li>Элемент B</li>
  <li>Элемент A</li>
</ol>
```

--------------------------------

### Пример использования атрибута download

Source: https://hcdev.ru/learn/html5/links

Этот пример демонстрирует, как использовать атрибут `download` в теге `<a>` для указания, что ссылка ведет на загружаемый ресурс и предлагает имя файла для сохранения.

```HTML
<a
    href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646"
    download="hal.svg"
></a>
```

--------------------------------

### Type Selector in CSS

Source: https://hcdev.ru/learn/css3/selectors

The type selector targets specific HTML elements. This example demonstrates how to select all `<section>` elements and apply padding to them.

```CSS
section{
padding:2em;
}
```

--------------------------------

### Автоматизация создания и разметки изображений

Source: https://hcdev.ru/learn/images/automating

Автоматизация создания изображений, включая их кодирование, сжатие и генерацию разметки для атрибутов `srcset` и `sizes`, является ключевым аспектом оптимизации производительности веб-сайтов. Это руководство охватывает различные подходы к управлению изображениями в современных рабочих процессах.

```HTML
<img
  srcset="image-400w.jpg 400w,
          image-800w.jpg 800w"
  sizes="(max-width: 600px) 400px,
         800px"
  src="image-800w.jpg"
  alt="Описание изображения">

```

--------------------------------

### Интеграция Lighthouse CI с GitHub Actions

Source: https://hcdev.ru/learn/forms/testing

Lighthouse может использоваться как инструмент командной строки, модуль Node или с инструментами Lighthouse CI. Интеграция Lighthouse CI с системами непрерывной интеграции, такими как GitHub Actions, позволяет автоматизировать мониторинг производительности.

```text
В статье Performance monitoring with the Lighthouse CI рассказывается о добавлении Lighthouse в систему непрерывной интеграции, например GitHub Actions.
```

--------------------------------

### Universal Selector in CSS

Source: https://hcdev.ru/learn/css3/selectors

The universal selector (*) selects all HTML elements on a page. This example shows how to apply a style (text color) to every element using the universal selector.

```CSS
*{
color:hotpink;
}
```

--------------------------------

### HTML: Ссылка на манифест веб-приложения

Source: https://hcdev.ru/learn/html5/metadata

Связывает файл манифеста веб-приложения с HTML-документом с помощью тега <link> и атрибута rel="manifest". Это позволяет централизованно управлять информацией о приложении.

```HTML
<link rel="manifest" href="/mlw.webmanifest" />
```

--------------------------------

### Apply CSS to the first paragraph

Source: https://hcdev.ru/learn/css3/selectors

This example demonstrates how to select the first paragraph within an article and apply specific styles (color and font size) to it using a CSS selector.

```CSS
article p:first-of-type{
color:red;
font-size:1.5em;
}
```

--------------------------------

### Метатег viewport с настройкой масштабирования

Source: https://hcdev.ru/learn/html5/document-structure

Расширенный метатег viewport, позволяющий явно задать начальный масштаб (initial-scale) и возможность масштабирования пользователем (user-scalable). Это дает больший контроль над тем, как пользователи взаимодействуют с контентом на мобильных устройствах.

```HTML
<meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=1"
/>
```

--------------------------------

### CSS animation-timing-function (steps)

Source: https://hcdev.ru/learn/css3/animations

Разбивает временную шкалу анимации на определенные, равные интервалы. Принимает количество шагов и направление ('end' или 'start').

```css
.my-element{
animation-timing-function:steps(10,end);
}
```

--------------------------------

### HTML Section with ARIA Labelledby

Source: https://hcdev.ru/learn/html5/attributes

Illustrates how to use ARIA attributes to improve accessibility. This example associates an `<h2>` element with a `<section>` using `aria-labelledby` and `id`, providing an accessible name for the section.

```HTML
<section id="about" aria-labelledby="about_heading">
    <h2 id="about_heading">What you'll learn</h2>
</section>
```

--------------------------------

### Стилизация маркера сводки с помощью ::before

Source: https://hcdev.ru/learn/html5/details

Пример CSS-кода для стилизации псевдоэлемента `::before` элемента `<summary>` внутри `<details>`. Показывает, как изменить маркер при открытом и закрытом состоянии элемента.

```css
details summary::before{
/* all the styles */
}
details[open]summary::before{
/* changes applied when open only */
}
```

--------------------------------

### CSS Update Media Query for Animations

Source: https://hcdev.ru/learn/design/media-features

Shows how to use the `update` media function to control animations and transitions based on the screen's refresh rate. It includes examples for 'fast' updates.

```CSS
@media(update:fast){
a{
transition-duration:0.4s;
transition-property:transform;
}
a:hover{
transform:scale(150%);
}
}
```

--------------------------------

### Сжатие изображений с помощью cwebp

Source: https://hcdev.ru/learn/images/webp

Пример использования утилиты командной строки cwebp для сжатия изображений. Команда демонстрирует базовое применение для конвертации или сжатия файлов изображений.

```bash
cwebp [options] input_file -o output_file.webp
```

--------------------------------

### Resolution Units: dpi

Source: https://hcdev.ru/learn/css3/sizing

Shows an example of using resolution units like 'dpi' (dots per inch) in a media query to serve higher-resolution images for high-density displays (e.g., Retina displays).

```CSS
div{
background-image:url('a-low-resolution-image.jpg');
}

@media(-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

div{
background-image:url('a-high-resolution-image.jpg');
}
}
```

--------------------------------

### HTML: Изображение с указанием плотности дисплея

Source: https://hcdev.ru/learn/images/descriptive

Этот пример демонстрирует использование атрибута `srcset` с синтаксисом `2x` для указания изображения, предназначенного для дисплеев с удвоенной плотностью пикселей. Это позволяет браузеру выбрать наиболее подходящий вариант изображения для текущего устройства.

```HTML
<img
    src="low-density.jpg"
    srcset="double-density.jpg 2x"
    alt="..."
/>
```

--------------------------------

### Настройка viewport для адаптивного дизайна

Source: https://hcdev.ru/learn/design/intro

Этот HTML-код устанавливает мета-тег viewport, который указывает браузеру использовать ширину устройства и начальный масштаб 1. Это необходимо для корректного отображения адаптивных веб-сайтов на мобильных устройствах, предотвращая нежелательное масштабирование.

```HTML
<meta
    name="viewport"
    content="width=device-width, initial-scale=1"
/>
```

--------------------------------

### CSS transition-delay and shorthand transition example

Source: https://hcdev.ru/learn/css3/transitions

Demonstrates the use of `transition-delay` and the shorthand `transition` property in CSS. The 'longhand' class shows individual transition properties, while the 'shorthand' class combines them into a single declaration.

```CSS
.longhand{
transition-property:transform;
transition-duration:300ms;
transition-timing-function:ease-in-out;
transition-delay:0s;
}

.shorthand{
transition:transform300msease-in-out0s;
}
```

--------------------------------

### CSS: Выравнивание текста

Source: https://hcdev.ru/learn/css3/typography

Свойство `text-align` используется для горизонтального выравнивания текста внутри блочного элемента. Поддерживаемые значения включают `left`, `right`, `center`, `justify`, `start`, `end` и `match-parent`.

```css
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}
```

--------------------------------

### Директива Pragma: Refresh

Source: https://hcdev.ru/learn/html5/metadata

Устанавливает автоматическое обновление страницы через заданный интервал времени и перенаправление на указанный URL. Важно использовать с осторожностью, учитывая юзабилити и доступность.

```html
<meta
    http-equiv="refresh"
    content="60; https://machinelearningworkshop.com/regTimeout"
/>
```

--------------------------------

### Применение медиазапросов к макету страницы

Source: https://hcdev.ru/learn/design/micro-layouts

Использует медиазапрос для применения сетчатой компоновки к элементам `main` и `aside`, когда ширина области просмотра превышает 45em.

```css
@media(min-width:45em){
body{
display:grid;
grid-template-columns:3fr1fr;
}
}
```

--------------------------------

### CSS transitions for enter and exit states

Source: https://hcdev.ru/learn/css3/transitions

Illustrates how to apply different CSS transitions for the 'enter' (e.g., hover) and 'exit' states of an element. This example shows a longer delay for the exit transition and a shorter duration for the enter transition.

```CSS
.my-element{
background:red;

/* This transition is applied on the "exit" transition */
transition:background2000msease-in;
}

.my-element:hover{
background:blue;

/* This transition is applied on the "enter" transition */
transition:background150msease;
}
```

--------------------------------

### Изображение с контекстуальным описанием (ссылка на фильм)

Source: https://hcdev.ru/learn/html5/images

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

```HTML
<img src="svg/hal.svg" role="img" alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
```

--------------------------------

### HTML Label with Input

Source: https://hcdev.ru/learn/html5/attributes

Demonstrates an explicit HTML label associated with an input element using the `for` and `id` attributes. Clicking the label focuses the input, improving usability and accessibility. It also shows an example of implicit labeling where the input is nested within the label.

```HTML
<label>
    Send me a reminder
    <input type="number" name="min" /> before the workshop
    resumes </label
>.
```

--------------------------------

### Описание сетки пикселей без сжатия

Source: https://hcdev.ru/learn/images/gif

Пример описания сетки пикселей без использования сжатия данных, где каждый пиксель описывается своим цветовым значением.

```Text
Первая строка, первый столбец - #0000FF. Первая строка, второй столбец - #0000FF. Строка один, столбец три - #0000FF. Первая строка, четвертый столбец - #FF0000. Вторая строка, первый столбец - #0000FF. Строка два, столбец два - #000085. Строка два, столбец три - #0000FF. Строка два, четвертый столбец - #FF0000.
```

--------------------------------

### HTML Упорядоченный Список (<ol>)

Source: https://hcdev.ru/learn/html5/lists

Создание упорядоченного списка в HTML, где порядок элементов важен. Элементы списка обозначаются тегом <li>. По умолчанию элементы нумеруются арабскими цифрами. Атрибуты type, reversed и start позволяют настраивать нумерацию.

```HTML
<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>
```

--------------------------------

### Практическое тестирование форм и выявление проблем

Source: https://hcdev.ru/learn/forms/usability-testing

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

```Текст
Вы нашли людей для тестирования вашей формы. Как проводится тестирование удобства использования на практике?
Попросите людей выполнить определенные задания. Допустим, вы хотите протестировать свою форму. Попросите людей заполнить вашу форму. Смогут ли они найти форму на главной странице сайта? Смогут ли они успешно отправить форму? Спросите их об их впечатлениях. По мере заполнения формы попросите их объяснить, что они делают и с какими проблемами сталкиваются.
```

--------------------------------

### Автоматическое сжатие изображений с q_auto

Source: https://hcdev.ru/learn/images/cdn

Используйте параметр `q_auto` в URL-адресе изображения Cloudinary для автоматического определения оптимального уровня сжатия и параметров кодирования на основе содержимого изображения. Это приводит к значительному уменьшению размера файла по сравнению с ручным подходом.

```HTML
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…"/>
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…"/>
<!-- 134 KB-->
```

--------------------------------

### JavaScript: Удаление атрибута 'open' для закрытия деталей

Source: https://hcdev.ru/learn/html5/details

Этот пример демонстрирует, как удалить атрибут 'open' у элемента <details> с помощью JavaScript, чтобы программно закрыть его. Это полезно для реализации функциональности, когда открытие одного элемента <details> автоматически закрывает все остальные.

```javascript
element.removeAttribute("open");
```

--------------------------------

### Создание веб-компонента <star-rating> с использованием Template, Slot и Shadow DOM

Source: https://hcdev.ru/learn/html5/template

Пример создания пользовательского элемента `<star-rating>` для оценки от одной до пяти звезд. Используются HTML-шаблоны, элементы <slot> и JavaScript для инкапсуляции с помощью Shadow DOM. Также затрагивается стилизация внутри и вне пользовательского элемента.

```HTML
<star-rating></star-rating>
```

```HTML
<template id="star-rating-template">
  <style>
    /* Стили для компонента */
    .star {
      cursor: pointer;
      color: gray;
    }
    .star.filled {
      color: gold;
    }
  </style>
  <div class="rating">
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
    <span class="star">★</span>
  </div>
  <slot></slot>
</template>
```

--------------------------------

### Презентационное изображение с описанием

Source: https://hcdev.ru/learn/html5/images

Пример использования атрибута `alt` для предоставления описания презентационного изображения, такого как плакат с изображением человека.

```HTML
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
```

--------------------------------

### Настройки ОС для уменьшения движения

Source: https://hcdev.ru/learn/accessibility/why

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

```text
В Windows эта настройка позитивно оформлена как **Показывать анимацию** и отключена. В Android включается настройка **Убрать анимацию**.
```

--------------------------------

### Стилизация компонента на основе размера контейнера

Source: https://hcdev.ru/learn/design/micro-layouts

Применяет стили к элементу `.media` и его дочерним элементам, если родительский контейнер имеет минимальную ширину 25em. Включает стили для `.media-illustration` и `.media-content`.

```css
.media-illustration{
max-width:200px;
margin:auto;
}

@container(min-width:25em){
.media{
display:flex;
align-items:center;
gap:1em;
}

.media-illustration{
flex:1;
}

.media-content{
flex:3;
}
}
```

--------------------------------

### Gulp: Создание WebP и JPEG изображений

Source: https://hcdev.ru/learn/images/automating

Этот код использует Gulp и плагин gulp-responsive для обработки изображений. Он берет все файлы из директории './src-img/', конвертирует их в форматы WebP и прогрессивный JPEG с качеством 70, и сохраняет результат в директорию './img/'. Исходные файлы остаются нетронутыми.

```javascript
const {src, dest} = require('gulp');
const respimg = require('gulp-responsive');

exports.webp = function() {
  return src('./src-img/*')
    .pipe(
      respimg({
        '*': [
          {
            quality: 70,
            format: ['webp', 'jpeg'],
            progressive: true,
          },
        ],
      })
    )
    .pipe(dest('./img/'));
};
```

--------------------------------

### Автоматизированное кодирование изображений с f_auto

Source: https://hcdev.ru/learn/images/cdn

Добавьте параметр `f_auto` в URL-адрес актива изображения Cloudinary, чтобы указать CDN передавать наиболее эффективную кодировку, поддерживаемую браузером. Это позволяет избежать ручного управления альтернативными кодировками и использования тега `<picture>`.

```HTML
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…"/>
```

--------------------------------

### HTML: Мета-тег Viewport для адаптивного дизайна

Source: https://hcdev.ru/learn/design/intro

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

```HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

--------------------------------

### Gulp: Создание нескольких размеров изображений

Source: https://hcdev.ru/learn/images/automating

Этот код использует Gulp и плагин gulp-responsive для создания нескольких версий изображений с разными размерами. Он обрабатывает файлы из './src-img/', создавая JPEG и WebP версии с суффиксами '-1000', '-800', и '-400' (соответственно ширине 1000, 800 и 400 пикселей), и сохраняет их в './img/'.

```javascript
const {src, dest} = require('gulp');
const respimg = require('gulp-responsive');

exports.default = function() {
  return src('./src-img/*')
    .pipe(
      respimg({
        '*': [
          {
            width: 1000,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-1000' },
          },
          {
            width: 800,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-800' },
          },
          {
            width: 400,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-400' },
          },
        ],
      })
    )
    .pipe(dest('./img/'));
};
```

--------------------------------

### HTML: Мета-тег для поддержки цветовых схем

Source: https://hcdev.ru/learn/design/theming

Этот пример демонстрирует использование мета-тега `supported-color-schemes` в HTML для указания браузеру, какие цветовые схемы (светлая и темная) поддерживает веб-сайт.

```html
<meta name="supported-color-schemes" content="light dark" />
```

--------------------------------

### Установка цвета темы в HTML

Source: https://hcdev.ru/learn/html5/metadata

Этот метатег позволяет задать цвет для настройки интерфейса браузера. Значение `content` используется поддерживающими браузерами для окрашивания строки заголовка, панели вкладок или других компонентов.

```HTML
<meta name="theme-color" content="#226DAA" />
```

--------------------------------

### HTML-структура ссылки "Перейти к содержимому"

Source: https://hcdev.ru/learn/html5/navigation

Этот фрагмент кода демонстрирует базовую HTML-структуру для создания ссылки "Skip to main content". Ссылка имеет класс 'skip-link' и атрибут 'href', указывающий на якорь '#main', который обычно связан с основным элементом контента страницы.

```html
<a href="#main" class="skip-link button">Skip to main</a>
```

--------------------------------

### Пример использования sizes и srcset

Source: https://hcdev.ru/learn/images/descriptive

Этот пример демонстрирует, как использовать атрибуты `sizes` и `srcset` в теге `<img>` для предоставления браузеру информации о размере изображения в макете и наборах доступных источников изображений. Браузер использует эти данные для выбора наиболее подходящего изображения.

```html
<img
    sizes="80vw"
    srcset="
        small.jpg   600w,
        medium.jpg 1200w,
        large.jpg  2000w
    "
    src="fallback.jpg"
    alt="..."
/>
```

--------------------------------

### Details и summary HTML

Source: https://hcdev.ru/learn/html5

Знакомство с элементами `<details>` и `<summary>` для создания интерактивных раскрывающихся секций. Позволяет пользователям отображать или скрывать дополнительную информацию.

```HTML
<details>
  <summary>Нажмите, чтобы развернуть</summary>
  <p>Это дополнительная информация, которая отображается при нажатии на заголовок.</p>
</details>
```

--------------------------------

### Адаптивное изображение с calc() в sizes

Source: https://hcdev.ru/learn/images/descriptive

Пример использования атрибутов `sizes` и `srcset` для создания адаптивного изображения. Атрибут `sizes` использует `calc()` для определения ширины изображения относительно области просмотра с учетом полей.

```HTML
<img
    sizes="calc(100vw-2em)"
    srcset="
        small.jpg    400w,
        medium.jpg   800w,
        large.jpg   1600w,
        x-large.jpg 2400w
    "
    src="fallback.jpg"
    alt="..."
/>
```

--------------------------------

### Оптимизация клавиатуры для ввода электронной почты

Source: https://hcdev.ru/learn/forms/cross-platform-testing

Используйте атрибут `type="email"` для поля ввода электронной почты, чтобы обеспечить отображение оптимизированной экранной клавиатуры с символами, удобными для ввода адресов электронной почты.

```HTML
<input type="email" />
```

--------------------------------

### Резервный вариант для старых браузеров с WebP и JPEG

Source: https://hcdev.ru/learn/images/automating

Пример использования элемента picture с явным указанием резервного источника в атрибуте src элемента img для браузеров, не поддерживающих srcset или WebP.

```HTML
<picture>
    <source
        type="image/webp"
        srcset="
            filename-1000.webp 1000w,
            filename-800.webp   800w,
            filename-400.webp   400w
        "
    />
    <img
        src="filename-1000.jpg"
        srcset="
            filename-1000.jpg 1000w,
            filename-800.jpg   800w,
            filename-400.jpg   400w
        "
        sizes="…"
        alt="…"
    />
</picture>
```

--------------------------------

### HTML: Метатеги для веб-приложений

Source: https://hcdev.ru/learn/html5/metadata

Использует метатеги для указания браузеру, что сайт поддерживает веб-приложения, позволяя ему работать с минимальным пользовательским интерфейсом. Примеры включают "apple-mobile-web-app-capable" и "mobile-web-app-capable".

```HTML
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
```

--------------------------------

### Атрибут srcset для отзывчивых изображений

Source: https://hcdev.ru/learn/images/automating

Пример заполнения атрибута srcset для предоставления браузеру различных версий изображения в зависимости от ширины. Это позволяет браузеру выбрать наиболее подходящее изображение.

```HTML
srcset="filename-1000.jpg 1000w, filename-800.jpg 800w,
filename-400.jpg 400w"
```

--------------------------------

### Анализ производительности форм с помощью PageSpeed Insights и Lighthouse

Source: https://hcdev.ru/learn/forms/testing

Использование инструментов, таких как PageSpeed Insights (PSI) и Lighthouse, для измерения и анализа эффективности ваших HTML-форм. Помогает выявлять общие проблемы и отслеживать производительность.

```General
PageSpeed Insights (PSI)
Lighthouse
Инструменты для выявления общих проблем
Отслеживание работы с формами с помощью PSI и Lighthouse
Анализ формы с использованием аналитики
```

--------------------------------

### HTML: Отзывчивые изображения с srcset и sizes

Source: https://hcdev.ru/learn/images/responsive-images

Использование атрибутов srcset и sizes для предоставления браузеру информации об источниках изображений и их отображении, позволяя браузеру выбирать наиболее подходящий вариант.

```HTML
<img srcset="image-small.jpg 500w, image-large.jpg 1000w"
     sizes="(max-width: 600px) 480px, 800px"
     src="image-fallback.jpg"
     alt="Описание изображения">

```

--------------------------------

### Пример семантического заголовка с форматированием

Source: https://hcdev.ru/learn/html5/overview

Показывает использование семантического тега `<h1>` для заголовка верхнего уровня, включающего элементы `<strong>` для выделенного текста и `<em>` для акцентированного текста. Это демонстрирует структуру контента и базовое форматирование.

```HTML
<h1>
    This header has both <strong>strong</strong> and
    <em>emphasized</em> content
</h1>
```

--------------------------------

### Использование средств оценки доступности (WAVE, axe)

Source: https://hcdev.ru/learn/forms/testing

Средства оценки доступности, такие как WAVE или axe, помогают выявлять проблемы доступности в веб-формах, включая недостающие метки, отсутствие связей между метками и элементами управления, а также недостаточный цветовой контраст.

```text
Можно также использовать средства оценки доступности, такие как WAVE или axe. Эти инструменты сообщают о недостающих метках, отсутствии связей между метками и элементами управления формы, недостаточном цветовом контрасте и многих других проблемах доступности.
```

--------------------------------

### Импорт CSS с помощью @import внутри <style>

Source: https://hcdev.ru/learn/html5/document-structure

Показывает, как импортировать CSS-файл в каскадный слой, используя директиву @import внутри тега <style>. Директивы @import должны быть первыми в блоке <style>.

```css
<style>
@import'styles.css'layer(firstLayer);
</style>
```

--------------------------------

### HTML Структурные Элементы для Семантической Разметки

Source: https://hcdev.ru/learn/design/accessibility

Показывает использование семантических HTML5-элементов, таких как header, nav, main, aside и footer, для структурирования веб-страницы и улучшения доступности.

```HTML
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
```

--------------------------------

### HTML: Метатеги для короткого имени приложения

Source: https://hcdev.ru/learn/html5/metadata

Устанавливает короткое имя для приложения, которое будет отображаться на домашнем экране мобильного устройства. Используются метатеги "apple-mobile-web-app-title" и "application-name".

```HTML
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
```
Tokens:
Raw