Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

React Senior > HTML > Flashcards

HTML Flashcards

1
Q

Что такое HTML и как он работает?

A

HTML (HyperText Markup Language) — это язык разметки гипертекста, стандартный язык для создания веб-страниц. Он используется для структурирования содержимого веб-страницы, определения его смысла и взаимосвязей между различными частями. HTML не является языком программирования; это язык разметки.

Как работает HTML:

  1. Теги (Tags): HTML-документ состоит из тегов. Тег — это ключевое слово, заключенное в угловые скобки (< и >). Большинство тегов имеют открывающий и закрывающий тег. Закрывающий тег имеет косую черту (/) перед именем тега.
    ```html
    <p>Это абзац текста.</p>```
    В этом примере <p> — открывающий тег абзаца, </p> — закрывающий тег абзаца, а “Это абзац текста.” — содержимое абзаца.
  2. Элементы (Elements): Элемент HTML — это всё, что находится между открывающим и закрывающим тегом, включая сами теги. В примере выше весь <p>Это абзац текста.</p> — это элемент абзаца.
  3. Атрибуты (Attributes): Теги могут иметь атрибуты. Атрибуты предоставляют дополнительную информацию об элементе. Атрибуты указываются в открывающем теге и имеют вид имя="значение".
    html
<a href="https://www.example.com">Ссылка на example.com</a>

    В этом примере <a> — тег ссылки, href — атрибут, указывающий URL, на который ведет ссылка, а “https://www.example.com” — значение атрибута href. “Ссылка на example.com” — текст ссылки.
  4. Структура HTML-документа: HTML-документ имеет определенную структуру:
    ```html
    <!DOCTYPE html>
    <html>
    <head>
    <meta></meta>
    <meta></meta>
    <title>Заголовок страницы</title>
    </head>
    <body>
    <h1>Главный заголовок</h1>
    <p>Абзац текста.</p>
    <img></img>
    </body>
    </html>```
    • <!DOCTYPE html>: Объявление типа документа. Сообщает браузеру, что это HTML5-документ.
    • <html>: Корневой элемент HTML-документа.
      • lang="ru": Атрибут, указывающий язык документа (в данном случае русский).
    • <head>: Содержит метаданные о документе (информацию, которая не отображается на странице).
      • <meta charset="UTF-8">: Указывает кодировку документа (UTF-8).
      • <meta name="viewport" ...>: Настройки viewport для адаптивного дизайна.
      • <title>: Заголовок страницы (отображается во вкладке браузера).
    • <body>: Содержит видимое содержимое страницы.
      • <h1>: Заголовок первого уровня.
      • <p>: Абзац текста.
      • <img>: Изображение.
        • src: Атрибут, указывающий путь к изображению.
        • alt: Атрибут, содержащий альтернативный текст для изображения (отображается, если изображение не загрузилось, и используется скринридерами).
  5. Вложенность (Nesting): Элементы HTML могут быть вложены друг в друга. Это означает, что один элемент может содержать другие элементы.
    ```html
    <div>
    <p>Это абзац <em>внутри</em> div.</p>
    </div>```
    В этом примере элемент <p> вложен в элемент <div>, а элемент <em> (курсив) вложен в элемент <p>.
  6. Браузер (Browser): Браузер (Chrome, Firefox, Safari, Edge и т.д.) интерпретирует HTML-код и отображает веб-страницу. Браузер читает HTML-документ сверху вниз, анализирует теги, атрибуты и содержимое и строит DOM (Document Object Model) — объектное представление документа. Затем браузер использует DOM для отображения страницы.
  7. Семантика (Semantics): HTML5 ввел множество семантических тегов, которые имеют определенное значение и помогают структурировать контент более осмысленно. Примеры:
    • <header>: Шапка сайта или раздела.
    • <nav>: Навигация по сайту.
    • <main>: Основное содержимое страницы.
    • <article>: Статья, запись в блоге, новость и т.д.
    • <aside>: Боковая панель (сайдбар).
    • <footer>: Подвал сайта.
    • <section>: Раздел документа.
    • <figure> и <figcaption>: Изображение и подпись к нему.
    Использование семантических тегов улучшает доступность (accessibility) сайта, SEO (Search Engine Optimization) и читаемость кода.

Основные теги HTML:

  • Текстовые теги:
    • <p>: Абзац.
    • <h1> - <h6>: Заголовки (от <h1> — самый важный, до <h6>).
    • <span>: Строчный элемент (используется для выделения части текста).
    • <strong>: Важный текст (жирный).
    • <em>: Акцентированный текст (курсив).
    • <br>: Перенос строки (одиночный тег).
    • <hr>: Горизонтальная линия (одиночный тег).
  • Ссылки:
    • <a>: Ссылка. Атрибут href указывает URL.
  • Изображения:
    • <img>: Изображение. Атрибуты src (путь к изображению) и alt (альтернативный текст).
  • Списки:
    • <ul>: Ненумерованный список.
    • <ol>: Нумерованный список.
    • <li>: Элемент списка.
  • Таблицы:
    • <table>: Таблица.
    • <tr>: Строка таблицы.
    • <th>: Ячейка заголовка таблицы.
    • <td>: Ячейка данных таблицы.
  • Формы:
    • <form>: Форма.
    • <input>: Поле ввода.
    • <textarea>: Многострочное поле ввода.
    • <button>: Кнопка.
    • <select>: Выпадающий список.
    • <option>: Элемент выпадающего списка.
    • <label>: Метка для элемента формы.
  • Блочные и строчные элементы:
    • Блочные (Block-level): Занимают всю доступную ширину. Начинаются с новой строки. Примеры: <div>, <p>, <h1> - <h6>, <form>, <ul>, <ol>, <li>, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>.
    • Строчные (Inline): Занимают только ту ширину, которая необходима для их содержимого. Не начинаются с новой строки. Примеры: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <textarea>, <select>.
  • Контейнеры:
    • <div>: Блочный контейнер (используется для группировки элементов).
    • <span>: Строчный контейнер.

Как это всё связано с веб-разработкой:

HTML — это основа любой веб-страницы. CSS (Cascading Style Sheets) используется для стилизации HTML-элементов (определения цвета, шрифтов, расположения и т.д.). JavaScript используется для добавления интерактивности (обработки событий, изменения содержимого страницы, отправки запросов на сервер и т.д.). Вместе HTML, CSS и JavaScript составляют основу фронтенд-разработки.

Пример простого сайта:

```html
<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<title>My Simple Website</title>
<style>

        body {
            font-family: sans-serif;
            margin: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            line-height: 1.5;
        }
        .highlight {
            background-color: yellow;
        }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple example of an HTML page.</p>
<p>It includes a heading, some text, and a <span>highlighted</span> word.</p>
<img></img>
<p><a>Visit Example.com</a></p>
</body>
</html>

~~~

Этот пример показывает базовую структуру HTML-документа, использование заголовков, абзацев, стилей (встроенных в тег <style>), изображений и ссылок. Это очень простой пример, но он демонстрирует основные принципы работы HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Какую роль играет семантическая разметка в HTML?

A

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

Роли семантической разметки:

  1. Улучшение доступности (Accessibility):
    • Скринридеры (Screen Readers): Скринридеры — это программы, которые читают содержимое веб-страницы вслух для людей с нарушениями зрения. Семантические теги помогают скринридерам понять структуру страницы и правильно её интерпретировать. Например, скринридер может объявить: “Заголовок первого уровня: Добро пожаловать на наш сайт”, “Навигация”, “Основное содержимое”, “Подвал”. Без семантической разметки скринридеру было бы сложно определить, где находится основное содержимое, а где — навигация.
    • Навигация с клавиатуры: Пользователи, которые не могут использовать мышь, перемещаются по странице с помощью клавиатуры. Семантические теги, такие как <nav>, <header>, <footer>, <main>, <aside>, помогают им быстро переходить к нужным разделам страницы.
    • Понимание структуры: Семантические теги помогают всем пользователям, включая тех, кто использует вспомогательные технологии, лучше понимать структуру и организацию контента на странице.
  2. Улучшение SEO (Search Engine Optimization):
    • Поисковые роботы: Поисковые роботы (краулеры) анализируют HTML-код страницы, чтобы понять её содержание и проиндексировать её. Семантические теги помогают поисковым роботам лучше понять, о чём страница, какие части контента являются наиболее важными, и как страница связана с другими страницами.
    • Ранжирование: Правильное использование семантических тегов может положительно повлиять на ранжирование страницы в результатах поиска.
    • Rich Snippets (Расширенные сниппеты): Семантическая разметка (особенно микроразметка, schema.org) может помочь поисковым системам создавать расширенные сниппеты (rich snippets) в результатах поиска, которые содержат дополнительную информацию о странице (например, рейтинг, цену, автора, дату публикации).
  3. Улучшение поддерживаемости и читаемости кода:
    • Разработчики: Семантический HTML-код легче читать и понимать другим разработчикам (и вам самим в будущем). Вместо множества <div> и <span> вы видите чёткую структуру: <header>, <nav>, <main>, <article>, <aside>, <footer>. Это упрощает внесение изменений и исправление ошибок.
    • Совместная работа: В командной разработке семантическая разметка помогает всем членам команды понимать структуру кода и работать с ним более эффективно.
  4. Повторное использование и переносимость:
    • Стилизация: Семантические теги упрощают стилизацию контента с помощью CSS. Вы можете использовать селекторы по тегам (header, nav, article и т.д.) вместо того, чтобы полагаться только на классы и идентификаторы.
    • Переносимость: Семантический HTML-код более переносим. Его легче использовать в разных контекстах (например, в мобильных приложениях, RSS-ридерах) и адаптировать к различным устройствам.

Примеры семантических тегов:

  • <header>: Шапка сайта или раздела. Обычно содержит логотип, название сайта, навигацию.
  • <nav>: Навигация по сайту. Содержит ссылки на основные разделы сайта.
  • <main>: Основное содержимое страницы. Должен быть только один <main> на странице.
  • <article>: Независимый, самодостаточный блок контента (статья, запись в блоге, новость, комментарий). Может быть несколько <article> на странице.
  • <aside>: Боковая панель (сайдбар). Содержит контент, который относится к основному содержимому, но не является его частью (например, реклама, ссылки на похожие статьи, облако тегов).
  • <footer>: Подвал сайта. Обычно содержит информацию об авторских правах, контактную информацию, ссылки на социальные сети.
  • <section>: Раздел документа. Используется для группировки тематически связанного контента.
  • <figure> и <figcaption>: Изображение и подпись к нему.
  • <time>: Дата и/или время.
  • <address>: Контактная информация.
  • <mark>: Выделенный текст (например, результаты поиска).
  • <details> и <summary>: Сворачиваемый блок контента.

Пример несемантической разметки:

```html

<div>
<div>...</div>
<div>...</div>
</div>

<div>
<div>...</div>
<div>...</div>
</div>

<div>...</div>

<div>...</div>

**Пример семантической разметки:**

```html
<header>
    <img src="logo.png" alt="Логотип">
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>

Важно:

  • Семантическая разметка не заменяет <div> и <span>. <div> и <span> по-прежнему используются, но только тогда, когда нет более подходящего семантического тега.
  • Не стоит использовать семантические теги только ради того, чтобы использовать семантические теги. Тег должен соответствовать смыслу контента.
  • Семантическая разметка — это не только теги HTML5. Это и правильное использование заголовков (<h1> - <h6>), списков (<ul>, <ol>, <li>), ссылок (<a>), изображений (<img> с атрибутом alt) и других элементов HTML.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Чем отличаются блочные и строчные элементы?

A

В HTML элементы делятся на две основные категории: блочные (block-level) и строчные (inline). Это различие определяет, как элементы отображаются на странице и как они взаимодействуют друг с другом.

Блочные элементы (Block-level elements):

  1. Занимают всю доступную ширину: Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину родительского элемента (или окна браузера, если родительского элемента нет). Даже если содержимое элемента занимает меньше места, чем доступная ширина, следующий элемент всё равно начнётся с новой строки.
  2. Можно задавать ширину и высоту: Вы можете явно задавать ширину (width) и высоту (height) блочных элементов с помощью CSS.
  3. Можно задавать отступы (margin и padding) со всех сторон: Вы можете задавать внешние (margin) и внутренние (padding) отступы со всех четырёх сторон (сверху, снизу, слева, справа) блочных элементов.
  4. Примеры:
    • <div> (универсальный блочный контейнер)
    • <p> (абзац)
    • <h1> - <h6> (заголовки)
    • <form> (форма)
    • <ul>, <ol>, <li> (списки)
    • <header>, <nav>, <main>, <article>, <aside>, <footer>, <section> (семантические блочные элементы HTML5)
    • <hr> (горизонтальная линия)
    • <pre> (форматированный текст)
    • <table> (таблица)
    • <figure>
    • <video>
    • <canvas>
    • <address>
    • <blockquote>

Строчные элементы (Inline elements):

  1. Занимают только ту ширину, которая необходима для их содержимого: Строчный элемент не начинается с новой строки и занимает только ту ширину, которая необходима для отображения его содержимого. Следующий элемент будет располагаться рядом с ним (если есть место).
  2. Нельзя задавать ширину и высоту: Вы не можете явно задавать ширину (width) и высоту (height) строчных элементов. Их размеры определяются их содержимым.
  3. Ограниченные возможности для задания отступов:
    • Вы можете задавать горизонтальные внешние (margin-left, margin-right) и внутренние (padding-left, padding-right) отступы.
    • Вертикальные внешние (margin-top, margin-bottom) отступы игнорируются.
    • Вертикальные внутренние (padding-top, padding-bottom) отступы применяются, но не влияют на расположение соседних элементов. Они могут перекрывать соседние элементы.
  4. Примеры:
    • <span> (универсальный строчный контейнер)
    • <a> (ссылка)
    • <img> (изображение)
    • <strong> (важный текст, жирный)
    • <em> (акцентированный текст, курсив)
    • <br> (перенос строки)
    • <input> (поле ввода)
    • <button> (кнопка)
    • <textarea> (многострочное поле ввода)
    • <select> (выпадающий список)
    • <label> (метка для элемента формы)
    • <code> (код)
    • <kbd> (клавиша)
    • <samp> (пример вывода)
    • <var> (переменная)
    • <cite> (цитата)
    • <q> (короткая цитата)
    • <time> (дата/время)
    • <mark> (выделенный текст)
    • <small> (мелкий текст)
    • <sub> (нижний индекс)
    • <sup> (верхний индекс)

Ключевые отличия (таблица):

display property (CSS):

Свойство display в CSS позволяет изменять поведение элементов. Вы можете сделать блочный элемент строчным и наоборот:

  • display: block; — делает элемент блочным.
  • display: inline; — делает элемент строчным.
  • display: inline-block; — делает элемент строчно-блочным. Это гибрид:
    • Элемент ведёт себя как строчный (не начинается с новой строки, занимает ширину содержимого).
    • Но при этом можно задавать ширину, высоту и вертикальные отступы (как у блочного элемента).

Пример:

```html
<!DOCTYPE html>

<html>
<head>
<title>Block vs Inline</title>
<style>

  .block {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
    width: 200px; /* Работает */
    height: 100px; /* Работает */
    border: 1px solid blue;
  }

  .inline {
    background-color: lightgreen;
    margin: 10px; /* Вертикальные margin игнорируются */
    padding: 20px; /* Вертикальные padding применяются, но не влияют на соседей */
    width: 200px; /* Игнорируется */
    height: 100px; /* Игнорируется */
    border: 1px solid green;
  }

  .inline-block {
    background-color: lightcoral;
    margin: 10px; /* Работает */
    padding: 20px; /* Работает */
    width: 200px; /* Работает */
    height: 100px; /* Работает */
    border: 1px solid red;
    display: inline-block; /* Строчно-блочный */
  }
</style>
</head>
<body>

<div>Это блочный элемент (div).</div>
<p>Это блочный элемент (p).</p>

<span>Это строчный элемент (span).</span>
<a>Это строчный элемент (a).</a>

<div>Это строчно-блочный элемент (div).</div>
<span>Это строчно-блочный элемент (span).</span>

</body>
</html>

~~~

Важные замечания:

  • В HTML5 некоторые теги, которые раньше были строчными, стали блочными (например, <canvas>, <video>).
  • Внутри строчных элементов нельзя размещать блочные элементы. Это невалидный HTML. Внутри блочных элементов можно размещать как блочные, так и строчные элементы.
  • Свойство display: none; полностью скрывает элемент (он не отображается и не занимает места на странице).

Понимание разницы между блочными и строчными элементами — это основа верстки в HTML и CSS. Это знание необходимо для правильного расположения элементов на странице и создания адаптивного дизайна.

Свойство | Блочные элементы | Строчные элементы |
| ———————- | ———————————————- | ———————————————- |
| Начало с новой строки | Да | Нет |
| Ширина | Занимают всю доступную ширину | Занимают ширину содержимого |
| Задание ширины/высоты | Можно | Нельзя |
| Вертикальные отступы | margin и padding работают со всех сторон | margin сверху/снизу игнорируются, padding сверху/снизу не влияет на соседей |
| Горизонтальные отступы | margin и padding работают | margin и padding работают |

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Что такое DOCTYPE и зачем он нужен?

A

DOCTYPE (Document Type Declaration, объявление типа документа) — это инструкция, которая сообщает веб-браузеру, какую версию HTML (или XML) использует документ. DOCTYPE не является HTML-тегом; это именно инструкция. Он располагается в самом начале HTML-документа, перед тегом <html>.

Зачем нужен DOCTYPE:

  1. Выбор режима рендеринга (Rendering Mode): DOCTYPE определяет, в каком режиме браузер будет отображать страницу:
    • Стандартный режим (Standards Mode): Браузер интерпретирует HTML и CSS в соответствии со спецификациями W3C (World Wide Web Consortium). Это желаемый режим, обеспечивающий наиболее предсказуемое и кросс-браузерное поведение.
    • Режим совместимости (Quirks Mode): Браузер пытается эмулировать поведение старых браузеров (например, Internet Explorer 5). Этот режим предназначен для поддержки старых веб-сайтов, которые были написаны без учёта стандартов. В режиме совместимости могут быть ошибки в отображении и работе JavaScript.
    • Почти стандартный режим (Almost Standards Mode): Промежуточный режим между стандартным и режимом совместимости.
    Без DOCTYPE или с неправильным DOCTYPE браузер может перейти в режим совместимости, что приведёт к непредсказуемому отображению страницы.
  2. Валидация HTML: DOCTYPE используется валидаторами HTML (например, W3C Markup Validation Service) для проверки соответствия кода стандартам. Валидатор использует DOCTYPE, чтобы определить, по каким правилам проверять документ.
  3. Поддержка современных возможностей: Правильный DOCTYPE гарантирует, что браузер будет поддерживать все современные возможности HTML и CSS, определённые в спецификации.

Виды DOCTYPE:

  • HTML5 (рекомендуется):
    html
<!DOCTYPE html>

    Это самый простой и рекомендуемый DOCTYPE. Он сообщает браузеру, что документ использует HTML5. HTML5 — это текущий стандарт HTML.
  • HTML 4.01:
    • Strict:
      html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      Этот DOCTYPE предписывает строгое соответствие стандарту HTML 4.01. Он не допускает использования устаревших элементов и атрибутов.
    • Transitional:
      html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      Этот DOCTYPE допускает использование некоторых устаревших элементов и атрибутов.
    • Frameset:
      html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

      Этот DOCTYPE используется для документов, использующих фреймы (frames). Фреймы устарели и не рекомендуются к использованию.
  • XHTML 1.0:
    • Strict:
      html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • Transitional:
      html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • Frameset:
      html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1:
    html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ключевые моменты:

  • Всегда используйте <!DOCTYPE html>: Для современных веб-сайтов всегда используйте <!DOCTYPE html>. Это самый простой и правильный способ указать, что вы используете HTML5.
  • Регистр не важен: DOCTYPE не чувствителен к регистру. <!DOCTYPE html>, <!doctype html>, <!DoCtYpE hTmL> — все эти варианты эквивалентны.
  • Расположение: DOCTYPE должен быть первой строкой в HTML-документе, перед любыми другими тегами.
  • Не HTML-тег: DOCTYPE — это не HTML-тег, а инструкция для браузера.
  • Устаревшие DOCTYPE: Не используйте устаревшие DOCTYPE (HTML 4.01, XHTML).

Влияние на CSS:

DOCTYPE влияет не только на интерпретацию HTML, но и на работу CSS. В стандартном режиме браузеры применяют CSS в соответствии со спецификациями, а в режиме совместимости могут быть отклонения.

Пример (правильный HTML5-документ):

```html
<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<title>Document</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

~~~

В этом примере <!DOCTYPE html> сообщает браузеру, что это HTML5-документ, и браузер должен отображать его в стандартном режиме.

В заключение, DOCTYPE — это важная часть HTML-документа, которая сообщает браузеру, как интерпретировать код. Использование правильного DOCTYPE (<!DOCTYPE html>) обеспечивает кросс-браузерную совместимость, поддержку современных возможностей HTML и CSS, а также правильную работу валидаторов.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Как работают метатеги (meta charset, viewport и т. д.)?

A

Метатеги (meta tags) в HTML — это специальные теги, которые предоставляют метаданные о HTML-документе. Метаданные — это данные о данных; в контексте HTML метатеги описывают сам HTML-документ, но не отображаются непосредственно на веб-странице. Метатеги размещаются внутри элемента <head>.

Основные атрибуты метатегов:

  • name: Определяет имя метаданных (например, description, keywords, author, viewport).
  • content: Определяет значение метаданных, связанных с именем (name).
  • http-equiv: Предоставляет HTTP-заголовок для информации/значения атрибута content. Может использоваться для эмуляции HTTP-заголовка ответа.
  • charset: Определяет кодировку символов для HTML-документа (например, UTF-8). Этот атрибут используется в единственном метатеге <meta charset="...">.

Рассмотрим наиболее важные и часто используемые метатеги:

  1. charset (Кодировка):```html<meta></meta>```
    • Назначение: Указывает кодировку символов, используемую в HTML-документе.
    • UTF-8: Рекомендуемая кодировка. Поддерживает практически все символы всех языков мира.
    • Важность:
      • Правильное отображение текста: Если кодировка не указана или указана неверно, браузер может неправильно отобразить текст (вместо кириллицы могут появиться “кракозябры”).
      • SEO: Поисковые системы учитывают кодировку при индексации страницы.
    • Расположение: Должен быть первым элементом внутри <head> и находиться в пределах первых 1024 байт документа.
    • Замечание: Это единственный метатег, использующий атрибут charset вместо name и content.
  2. viewport (Адаптивный дизайн):```html<meta></meta>```
    • Назначение: Управляет тем, как страница отображается на мобильных устройствах. Без этого метатега мобильные браузеры часто отображают страницы в уменьшенном масштабе, как если бы они были предназначены для настольных компьютеров.
    • width=device-width: Устанавливает ширину области просмотра (viewport) равной ширине экрана устройства.
    • initial-scale=1.0: Устанавливает начальный масштаб страницы равным 100%.
    • Другие значения (менее распространённые):
      • minimum-scale: Минимальный масштаб.
      • maximum-scale: Максимальный масштаб.
      • user-scalable: Разрешает или запрещает пользователю масштабировать страницу (yes/no). Не рекомендуется использовать user-scalable=no, так как это ухудшает доступность.
    • Важность: Критически важен для создания адаптивных (responsive) веб-сайтов, которые хорошо выглядят на любых устройствах.
  3. description (Описание):```html<meta></meta>```
    • Назначение: Предоставляет краткое описание содержимого страницы.
    • Важность:
      • SEO: Описание может использоваться поисковыми системами для отображения в результатах поиска (сниппетах). Хотя описание не является прямым фактором ранжирования, оно влияет на CTR (click-through rate) — отношение числа кликов к числу показов. Хорошее описание может привлечь больше пользователей на сайт.
      • Пользователи: Описание помогает пользователям понять, о чём страница, ещё до перехода на неё.
    • Рекомендации:
      • Длина: Оптимальная длина — 150-160 символов. Более длинные описания могут быть обрезаны.
      • Содержание: Описание должно быть точным, информативным и привлекательным. Используйте ключевые слова, но не переусердствуйте.
      • Уникальность: Описание должно быть уникальным для каждой страницы сайта.
  4. keywords (Ключевые слова):```html<meta></meta>```
    • Назначение: Содержит список ключевых слов, относящихся к содержимому страницы.
    • Важность (в настоящее время): Практически не важен. Большинство поисковых систем (включая Google) игнорируют этот метатег при ранжировании, так как он часто использовался для спама (перечисления множества нерелевантных ключевых слов).
    • Рекомендации: Можно не использовать. Если используете, не перечисляйте слишком много ключевых слов.
  5. author (Автор):```html<meta></meta>```
    • Назначение: Указывает автора документа.
    • Важность: Не влияет на SEO или отображение страницы. Может использоваться для информационных целей.
  6. robots (Управление индексацией):```html<meta></meta>```
    • Назначение: Управляет поведением поисковых роботов (краулеров).
    • Значения content:
      • index: Разрешить индексирование страницы.
      • noindex: Запретить индексирование страницы.
      • follow: Разрешить переход по ссылкам на странице.
      • nofollow: Запретить переход по ссылкам на странице.
      • none: Эквивалентно noindex, nofollow.
      • all: Эквивалентно index, follow (значение по умолчанию).
      • noarchive: Запретить поисковым системам показывать кэшированную копию страницы.
      • nosnippet: Запретить поисковым системам показывать сниппет (описание) страницы в результатах поиска.
      • notranslate: Запретить поисковым системам предлагать перевод страницы.
      • noimageindex: Запретить индексирование изображений на странице.
    • Важность: Позволяет контролировать, какие страницы сайта будут проиндексированы поисковыми системами.
    • Замечание: Это рекомендации для поисковых роботов, а не строгие директивы. Поисковые роботы могут их игнорировать. Более надёжный способ запретить индексацию — использовать файл robots.txt.
  7. http-equiv (Эмуляция HTTP-заголовков):
    • refresh (Перенаправление):
      ```html
      <meta></meta>```
      • Назначение: Перенаправляет пользователя на другую страницу через указанное количество секунд.
      • content: 5;url=https://www.example.com/ — перенаправление на https://www.example.com/ через 5 секунд.
      • Не рекомендуется: Лучше использовать серверные редиректы (например, 301 редирект).
    • content-type (Тип контента и кодировка):
      ```html
      <meta></meta>```
      • Назначение: Устанавливает тип контента и кодировку документа. Эквивалентно HTTP-заголовку Content-Type.
      • Устарело: В HTML5 рекомендуется использовать <meta charset="UTF-8">.
    • X-UA-Compatible (Режим совместимости Internet Explorer):
      ```html
      <meta></meta>```
      • Назначение: Указывает Internet Explorer использовать наиболее современный доступный режим рендеринга.
      • IE=edge: Рекомендуемое значение.
      • Важность: Важен для поддержки старых версий Internet Explorer.
  8. Open Graph (Социальные сети):```html<meta></meta><meta></meta><meta></meta><meta></meta><meta></meta>```
    • Назначение: Используется социальными сетями (Facebook, Twitter, LinkedIn и др.) для отображения информации о странице при публикации ссылки на неё.
    • og:title: Заголовок страницы.
    • og:description: Описание страницы.
    • og:image: URL изображения, которое будет отображаться в превью.
    • og:url: Канонический URL страницы.
    • og:type: Тип контента (website, article, video.movie, etc.).
    • Важность: Улучшает внешний вид ссылок на ваш сайт в социальных сетях и может увеличить CTR.
  9. Twitter Cards (Twitter):```html<meta></meta><meta></meta><meta></meta><meta></meta><meta></meta>```
    * Назначение: Аналогично Open Graph, но для Twitter.
    * twitter:card: Тип карточки (summary, summary_large_image, player, app).
    * twitter:site: Twitter-аккаунт сайта.
    * twitter:title: Заголовок.
    * twitter:description: Описание.
    * twitter:image: Изображение.
  10. Другие метатеги:
    • <meta name="theme-color" content="#ffffff">: Устанавливает цвет темы для мобильных браузеров (например, цвет адресной строки в Chrome на Android).
    • <meta name="application-name" content="Название приложения">: Имя веб-приложения (для PWA).
    • <meta name="generator" content="Название CMS">: Указывает, какая CMS использовалась для создания страницы.

Пример:

```html
<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>

<title>Заголовок страницы</title>

<!-- Open Graph -->
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>

<!-- Twitter Card -->
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
</head>
<body>
...
</body>
</html>

~~~

В этом примере показано использование наиболее важных метатегов: charset, viewport, description, robots, X-UA-Compatible, Open Graph и Twitter Card.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Что такое Progressive Enhancement и Graceful Degradation?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Чем отличается <section> от <article> и <div>?

A

Давайте разберём отличия <div>, <article> и <section>, чтобы понять, когда и какой элемент использовать.

<div> (Division - Раздел):

  • Назначение: <div> — это универсальный блочный контейнер. Он не несёт никакой семантической нагрузки. Используется для группировки элементов в целях стилизации (с помощью CSS) или управления ими с помощью JavaScript. <div> сам по себе ничего не “говорит” о содержимом, которое он в себе заключает.
  • Когда использовать:
    • Когда вам нужен контейнер для применения стилей (например, фон, отступы, границы) к группе элементов.
    • Когда вам нужно сгруппировать элементы для манипуляций с помощью JavaScript (например, показать/скрыть группу элементов).
    • Когда нет более подходящего семантического элемента.
  • Пример (плохой, без семантики):```html<div>
    <div>Заголовок новости</div>
    <div>Текст новости...</div>
    </div>```
  • Пример (лучше, с семантикой):```html<article>
    <h2>Заголовок новости</h2>
    <p>Текст новости...</p>
    </article>```

<article> (Статья):

  • Назначение: <article> — это семантический элемент HTML5, который представляет собой независимый, самодостаточный блок контента. Это означает, что содержимое <article> должно иметь смысл само по себе, даже если его вырвать из контекста страницы. Примеры:
    • Статья в блоге или журнале.
    • Новость.
    • Сообщение на форуме.
    • Комментарий.
    • Виджет (например, прогноз погоды).
  • Когда использовать:
    • Когда у вас есть блок контента, который является самостоятельной единицей информации.
    • Когда этот контент можно было бы перенести на другой сайт или в RSS-ленту, и он всё равно имел бы смысл.
    • Когда контент имеет заголовок (обычно <h1> - <h6>).
  • Вложенность: <article> может содержать другие <article> (например, комментарии внутри статьи). <article> может содержать <header>, <footer>, <section>.
  • Пример:```html<article>
    <header>
    <h1>Заголовок статьи</h1>
    <p>Автор: Иван Иванов, Дата: <time>26 января 2024</time></p>
    </header>
    <p>Текст статьи...</p>
    <section>
    <h2>Подзаголовок</h2>
    <p>...</p>
    </section>
    <footer>
    <p>Теги: HTML, семантика</p>
    </footer>
    </article>```

<section> (Раздел):

  • Назначение: <section> — это семантический элемент HTML5, который представляет собой тематический раздел документа или приложения. <section> группирует контент, который связан общей темой. В отличие от <article>, <section> не является самодостаточным.
  • Когда использовать:
    • Когда вам нужно разделить страницу на логические разделы (например, “Введение”, “Основные положения”, “Заключение”).
    • Когда у раздела есть заголовок (обычно <h1> - <h6>).
    • Когда контент внутри раздела объединён общей темой.
  • Вложенность: <section> может содержать другие <section> (например, подразделы внутри раздела). <section> может содержать <article>, <header>, <footer>.
  • Пример:```html<main>
    <section>
    <h1>Введение</h1>
    <p>...</p>
    </section>
    <section>
    <h1>Основные положения</h1>
    <article>
    <h2>Первый пункт</h2>
    <p>...</p>
    </article>
    <article>
    <h2>Второй пункт</h2>
    <p>...</p>
    </article>
    </section>
    <section>
    <h1>Заключение</h1>
    <p>...</p>
    </section>
    </main>```

Ключевые отличия (таблица):

Элемент | Семантика | Самодостаточность | Пример использования

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Что такое ARIA-атрибуты и зачем они нужны?

A

ARIA (Accessible Rich Internet Applications) атрибуты — это набор специальных атрибутов HTML, которые добавляют семантическую информацию и улучшают доступность веб-контента и веб-приложений для людей с ограниченными возможностями, использующих вспомогательные технологии (скринридеры, экранные лупы, голосовое управление и т.д.). ARIA не меняет внешний вид или поведение элементов на странице, а предоставляет дополнительную информацию для вспомогательных технологий.

Зачем нужны ARIA-атрибуты:

  1. Улучшение доступности динамического контента: ARIA особенно полезна для динамически изменяющегося контента (например, контента, загружаемого с помощью AJAX, виджетов, одностраничных приложений). Без ARIA вспомогательным технологиям сложно понять, что изменилось на странице и как с этим взаимодействовать.
  2. Дополнение семантики HTML: ARIA расширяет семантику HTML, позволяя описывать роли, состояния и свойства элементов, которые не могут быть адекватно описаны стандартными HTML-тегами.
  3. Создание доступных пользовательских элементов управления: ARIA позволяет создавать доступные пользовательские элементы управления (например, нестандартные слайдеры, вкладки, деревья), которые ведут себя как стандартные элементы управления, но имеют нестандартный внешний вид.
  4. Улучшение навигации: ARIA помогает структурировать контент и улучшать навигацию по странице с помощью вспомогательных технологий.
  5. Соответствие стандартам доступности: Использование ARIA является важной частью обеспечения соответствия веб-сайтов стандартам доступности, таким как WCAG (Web Content Accessibility Guidelines).

Основные типы ARIA-атрибутов:

  1. Роли (Roles):
    • Определяют тип элемента или его назначение.
    • Примеры: role="button", role="navigation", role="tablist", role="tab", role="alert", role="dialog", role="checkbox", role="slider", role="search", role="main", role="complementary", role="banner", role="contentinfo".
    • role="application": Указывает, что область страницы является веб-приложением, а не документом. Использовать с осторожностью.
    • role="none" or role="presentation": Указывает, что элемент не имеет семантической роли (используется для элементов, которые нужны только для визуального оформления).
    • Важно: Не переопределяйте роли существующих HTML-элементов без необходимости (например, не используйте role="button" для ссылки <a>). Используйте правильные HTML-элементы, а ARIA — для дополнения семантики.
  2. Свойства (Properties):
    • Описывают характеристики элемента, связанные с его ролью.
    • Примеры: aria-label, aria-labelledby, aria-describedby, aria-required, aria-hidden, aria-disabled, aria-expanded, aria-selected, aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-current.
  3. Состояния (States):
    • Описывают текущее состояние элемента.
    • Примеры: aria-pressed, aria-expanded, aria-selected, aria-checked, aria-hidden, aria-disabled, aria-busy.
    • Состояния часто изменяются динамически с помощью JavaScript в ответ на действия пользователя.

Рассмотрим наиболее важные ARIA-атрибуты:

  • aria-label:
    • Предоставляет текстовую метку для элемента.
    • Используется, когда у элемента нет видимого текстового содержимого, которое могло бы служить меткой.
    • Пример:
      html
<button aria-label="Закрыть">
    <svg>...</svg>  <!-- Иконка "крестик" -->
</button>
  • aria-labelledby:
    • Указывает ID другого элемента (или элементов), который содержит текстовую метку для текущего элемента.
    • Используется, когда метка элемента находится в другом месте на странице.
    • Пример:```html<div>Настройки</div><div>
      ...
      </div>```
  • aria-describedby:
    • Указывает ID другого элемента (или элементов), который содержит описание текущего элемента.
    • Используется для предоставления дополнительной информации об элементе (например, подсказки, инструкции).
    • Пример:```html
      <label>Пароль:</label>
      <input></input><p>Пароль должен содержать не менее 8 символов, одну заглавную букву и одну цифру.</p>```
  • aria-hidden:
    • Указывает, что элемент (и все его потомки) должен быть скрыт от вспомогательных технологий.
    • aria-hidden="true": Скрыть элемент.
    • aria-hidden="false": Показать элемент (значение по умолчанию).
    • Важно: Не путать с CSS-свойством display: none или атрибутом hidden. aria-hidden скрывает элемент только от вспомогательных технологий, но не визуально. display: none и hidden скрывают элемент и визуально, и от вспомогательных технологий.
    • Пример:```html<div>
      Этот контент скрыт от скринридеров.
      </div>```
  • aria-disabled:
    • Указывает, что элемент отключен (неактивен).
    • aria-disabled="true": Элемент отключен.
    • aria-disabled="false": Элемент включен (значение по умолчанию).
    • Важно: Не путать с HTML-атрибутом disabled. aria-disabled сообщает о состоянии элемента вспомогательным технологиям, но не предотвращает взаимодействие с элементом (например, клики). disabled предотвращает взаимодействие и сообщает о состоянии. Для стандартных HTML-элементов управления (например, <button>, <input>) используйте disabled. aria-disabled используйте для пользовательских элементов управления.
    • Пример:```html<div>Нажать</div>```
  • aria-expanded:
    • Указывает, раскрыт или свёрнут элемент (например, выпадающее меню, аккордеон).
    • aria-expanded="true": Элемент раскрыт.
    • aria-expanded="false": Элемент свёрнут.
    • Пример:```html
      <button>Меню</button><ul>
      ...
      </ul>``````javascript
      // JavaScript для переключения состояния
      const button = document.querySelector(‘button’);
      const menu = document.getElementById(‘menu’);button.addEventListener(‘click’, () => {
      const expanded = button.getAttribute(‘aria-expanded’) === ‘true’;
      button.setAttribute(‘aria-expanded’, !expanded);
      menu.hidden = expanded;
      });
      ```
  • aria-selected:
    • Указывает, выбран ли элемент (например, вкладка в наборе вкладок, элемент списка).
    • aria-selected="true": Элемент выбран.
    • aria-selected="false": Элемент не выбран.
    • Пример (вкладки):```html<div>
      <button>Вкладка 1</button>
      <button>Вкладка 2</button>
      </div><div>Содержимое вкладки 1</div><div>Содержимое вкладки 2</div>```
  • aria-checked:
    • Указывает, отмечен ли элемент (checkbox, radio button).
    • aria-checked="true": Элемент отмечен.
    • aria-checked="false": Элемент не отмечен.
    • aria-checked="mixed": Используется для чекбоксов, которые могут находиться в “смешанном” состоянии (например, когда отмечены только некоторые дочерние элементы).
    • Важно: Для стандартных HTML-элементов <input type="checkbox"> и <input type="radio"> используйте атрибут checked. aria-checked используйте для пользовательских элементов управления.
  • aria-live:
    • Указывает, что область страницы является “живой” и может динамически обновляться. Скринридеры будут отслеживать изменения в этой области и сообщать о них пользователю.
    • Значения:
      • aria-live="off" (по умолчанию): Обновления не объявляются.
      • aria-live="polite": Объявлять об обновлениях, когда скринридер не занят.
      • aria-live="assertive": Объявлять об обновлениях немедленно (использовать с осторожностью, так как может прервать пользователя).
    • Пример:```html<div>
      <!-- Сюда динамически добавляются сообщения -->
      </div>```
  • aria-atomic:
    • Используется вместе с aria-live. Указывает, нужно ли скринридеру объявлять всю “живую” область целиком или только изменившуюся часть.
    • aria-atomic="true": Объявлять всю область.
    • aria-atomic="false" (по умолчанию): Объявлять только изменившуюся часть.
  • aria-relevant:
    • Используется вместе с aria-live. Указывает, какие типы изменений в “живой” области важны.
    • Значения (можно комбинировать через пробел):
      • additions: Добавление новых узлов.
      • removals: Удаление узлов.
      • text: Изменение текстового содержимого.
      • all: Все изменения (additions removals text).
    • Пример:```html<div>
      <!-- Сюда динамически добавляются сообщения -->
      </div>```
  • aria-current:
    • Указывает текущий элемент в наборе (например, текущая страница в навигации, текущий шаг в мастере).
    • Значения: page, step, location, date, time, true, false.
    • Пример:
      ```html
      <nav>
      <ol>
      <li><a>Home</a></li>
      <li><a>Products</a></li>
      <li><a>Shoes</a></li>
      </ol>
      </nav>```

Пример (пользовательский слайдер):

```html

<div>
</div>

~~~

В этом примере <div> превращается в доступный слайдер с помощью ARIA-атрибутов.

Важные замечания:

  • Используйте HTML-семантику, где это возможно: ARIA — это дополнение к HTML, а не замена. Всегда используйте правильные HTML-элементы (например, <button>, <nav>, <form>), а ARIA — только для тех случаев, когда HTML не справляется.
  • Не злоупотребляйте ARIA: Избыточное использование ARIA может ухудшить доступность.
  • Тестируйте с помощью вспомогательных технологий: Обязательно тестируйте свой сайт с помощью скринридеров (например, NVDA, JAWS, VoiceOver), чтобы убедиться, что он действительно доступен.
  • ARIA не заменяет JavaScript: ARIA сообщает о семантике и состоянии элементов, но не обрабатывает события и не изменяет поведение элементов. Для этого нужен JavaScript.
  • Валидация: Проверяйте свой HTML-код на наличие ошибок, связанных с ARIA, с помощью валидатора (например, W3C Markup Validation Service).

ARIA — мощный инструмент для создания доступных веб-сайтов и приложений. Правильное использование ARIA позволяет людям с ограниченными возможностями полноценно взаимодействовать с вашим контентом.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly

React Senior (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions