Что такое HTML?
HTML (HyperText Markup Language) - это язык гипертекстовой разметки, который используется для создания структуры веб-страниц и веб-приложений. Он состоит из тегов, которые определяют элементы страницы и их функциональность. Браузеры интерпретируют HTML-код и отображают его содержимое в соответствии с заданной разметкой.
Из каких основных тегов состоит структура HTML-документа?
HTML5-документ состоит из объявления типа документа <!DOCTYPE html>, корневого элемента <html>, тегов <head> и <body>, где head описывает метаданные и ресурсы, а body — содержимое, участвующее в формировании DOM
Что такое теги?
Теги в HTML — это специальные элементы разметки, которые используются для создания структуры веб-страницы. Теги заключаются в угловые скобки < > и бывают парными (<p></p>) или одиночными (<img/>). Парные теги могут содержать текст или другие теги, создавая вложенную структуру страницы. Но важно соблюдать правила вложенности — например, нельзя помещать ссылку в ссылку или вкладывать в список что-то кроме li. Такая структура может вызвать непредсказуемое поведение в различных браузерах и ухудшить доступность контента.
Расскажи про блочные теги
Блочное, строчное или строчно-блочное поведение элементов определяется значением свойства display, которое браузер задаёт по умолчанию.
Блочные элементы:
- Занимают всю доступную ширину родительского контейнера.
- Начинаются с новой строки.
- Можно задавать ширину, высоту, отступы.
Примеры:
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <dl>, <dt>, <dd>, <header>, <footer>, <section>, <article>, <aside>, <nav>, <main>, <form>, <fieldset>, <legend>, <hr>, <pre>, <blockquote>, <figure>, <figcaption>, <address>
Расскажи про строчные теги
Строчные элементы:
- Занимают столько места, сколько нужно для их содержимого.
- Не начинаются с новой строки.
- Нельзя задавать ширину, высоту, вертикальные отступы (margin-top, margin-bottom).
Примеры:
<span>, <a>, <strong>, <em>, <b>, <i>, <u>, <s>, <sup>, <sub>, <small>, <abbr>, <cite>, <code>, <kbd>, <samp>, <var>, <time>, <mark>, <q>, <dfn>, <br>, <wbr>
Расскажи про строчно-блочные теги
Строчно-блочные элементы:
Не начинаются с новой строки, но им можно задавать ширину, высоту и отступы. Различаются в разных браузерах.
Примеры:
<button>, <input>, <textarea>, <select>, <option>, <optgroup>, <label>, <progress>, <meter>, <img>, <video>, <audio>, <iframe>, <canvas>, <svg>, <object>, <embed>, <picture>, <source>
Что такое HTML-атрибут и как он записывается?
Атрибуты в HTML — это дополнительные свойства, которые добавляются к тегам для изменения их поведения, внешнего вида или предоставления дополнительной информации. Атрибуты всегда указываются внутри открывающего тега и обычно состоят из пары имя=”значение”. Некоторые атрибуты не требуют значения, так как их наличие уже указывает на true, к примеру, checked.
Что такое глобальные атрибуты? Приведи примеры.
Глобальные атрибуты — это атрибуты, которые могут применяться к любым HTML-элементам, например: id, class, style, hidden, title, data-*.
Для чего нужны data-* атрибуты?
Data-атрибуты предназначены для хранения пользовательских данных непосредственно в HTML-элементах с возможностью безопасного доступа к ним из JavaScript. Они позволяют связать с элементом любую дополнительную информацию, которую затем можно использовать в JavaScript для логики приложения или в CSS для стилизации. Доступ к этим данным осуществляется через свойство dataset.
<div id="user" data-user-id="12345">Пользователь</div>
const user = document.getElementById('user');
console.log(user.dataset.userId); // 12345Что такое мета-теги (<meta></meta>) и где они размещаются?
Meta-теги используются для передачи браузеру и внешним системам (поисковикам, соцсетям) метаинформации о документе: кодировки, вьюпорта, описания и др. Таких метатегов может быть любое количество, они различаются набором атрибутов и их значений и все они размещаются внутри тега <head>. Могут влиять на отображение страниц в выдаче.
Для чего нужен атрибут charset в мета-теге и какое у него важное правило размещения?
Атрибут charset задает кодировку страницы. Кодировка определяет, как браузер интерпретирует байты документа в символы. Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега <head>. В вебе стандартом является UTF-8, так как она поддерживает большинство языков и символов.<meta charset="UTF-8">
Какие атрибуты есть в <meta> и чем они отличаются?
Основные атрибуты <meta></meta>:
- charset для кодировки страницы
- name используется для описательной метаинформации и предоставляет структурированную информацию о странице для поисковых систем, роботов и браузеров (автор, описание, ключевые слова).
- http-equiv передает инструкции браузеру, имитируя HTTP-заголовок ответа сервера. Браузер обрабатывает их до отображения страницы.
- content используется с name и http-equiv для указания значения
Перечисли распространенные значения атрибута name в мета-теге и их функцию.
Почему важно использовать <meta></meta>?
<meta></meta>
используется поисковыми системами для формирования сниппета (текст под заголовком сайта в поисковой выдаче) и влияет на кликабельность результата, хотя напрямую не влияет на ранжирование.
Перечисли 2 распространенных значения атрибута http-equiv в мета-теге и их функцию.
Атрибут, который может изменять поведение страницы или серверов.
- “default-style” — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента <link></link>, который связан с таблицей CSS-стилей, или заголовок элемента <style>, который содержит таблицу CSS-стилей.
- "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.</style>
Что такое семантическая верстка?
Семантическая верстка — это подход к разметке веб-страницы, который предполагает использование HTML-тегов в соответствии с их ролью и предназначением.
Для чего используются теги <div> и <span> и в чем их ключевое отличие?</span>
div и span несемантические контейнеры, используемые для группировки элементов и стилизации, они полезны в ситуациях, когда ни один существующий семантический тег не подходит. <div> — это блочный элемент (block-level element). Он занимает всю доступную ширину родительского контейнера и начинается с новой строки. Чаще всего <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.<span> — это строчный элемент (inline-level element). Он занимает только столько места, сколько нужно для его содержимого, и не начинает новую строку. <span> используется для выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее.
Зачем нужна семантика?
Семантика позволяет вспомогательным технологиям, таким как screen readers, корректно интерпретировать структуру страницы, что делает интерфейс доступным для пользователей с ограниченными возможностями.
Поисковые системы используют семантику для понимания структуры и содержания страницы, что положительно влияет на SEO и качество сниппетов.
Для разработчиков семантическая разметка упрощает чтение, поддержку и развитие кода, снижая вероятность ошибок при дальнейшем расширении интерфейса.
Что такое категории контента в HTML5 и зачем они нужны?
Категории контента в HTML5 определяют роль элементов и правила их вложенности, помогая браузерам и разработчикам корректно строить структуру документа.
Перечисли 7 основных категорий контента.
Flow content (Потоковый контент)
Metadata content (Метаданные)
Sectioning content (Секционный контент)
Heading content (Заголовочный контент)
Phrasing content (Фразовый контент)
Embedded content (Встроенный контент)
Interactive content (Интерактивный контент)
Какие элементы относятся к Flow content (Потоковый контент)?
Flow content — это основная категория HTML-элементов, которые используются для формирования содержимого документа. Большинство элементов HTML относятся к flow content.
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> и текст
Какие элементы относятся к Metadata content (Метаданные)?
Это элементы, которые изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.
Элементами метаданных являются:
<base>, <link>, <meta>, <noscript>, <script>, <style> и <title>
Какие элементы относятся к Sectioning content (Секционный контент)?
Секционный контент является подмножеством основного потока, он создаёт разделы документа.
Элементы этой категории это:
<article>, <aside>, <nav> и <section>
Какие элементы относятся к Phrasing content (Фразовый контент)?
Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.
К данной категории принадлежат следующие элементы:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> и обычный текст.