🤔 На что можно заменить интерфейсы в JS?

В чистом JS — объекты с JSDoc-аннотациями, библиотеки валидации схем (zod, yup, io-ts) или JSON Schema. Эти способы позволяют определять и валидировать структуру данных без TS.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`)
Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как семантически разделять контент?

- section — смысловой блок.
- article — независимая статья/новость.
- aside — побочная информация.
- nav, main, footer — для структуры страницы.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩Возможных значения flex-direction

🟠row:
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
🟠row-reverse:
Основная ось — горизонтальная, элементы располагаются справа налево.
🟠column:
Основная ось — вертикальная, элементы располагаются сверху вниз.
🟠column-reverse:
Основная ось — вертикальная, элементы располагаются снизу вверх.

🚩Примеры использования:

Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое деструктуризация?

Деструктуризация — это синтаксическая возможность в JavaScript, позволяющая распаковывать значения из массивов или свойств из объектов прямо в отдельные переменные.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое async и await?

Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).

🚩Ключевое слово async

Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

🚩Ключевое слово await

Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

🚩Плюсы

➕Улучшение читаемости кода
Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание

➕Упрощение обработки ошибок
В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.

➕Избегание "callback hell"
Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие популярные подходы изобрели для Redux?

Подходы, такие как Redux Toolkit, были созданы для упрощения работы с Redux, минимизации шаблонного кода и улучшения производительности. Также популярны middleware, такие как Redux Thunk и Redux Saga, для обработки побочных эффектов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие знаешь подходы по написанию css?

Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные.

🟠Классический (обычный) CSS
Стандартное написание CSS без структурных ограничений.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

🟠BEM (Block Element Modifier)
BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода.
- Block (Блок) — независимый компонент (.button).
- Element (Элемент) — часть блока (.button__icon).
- Modifier (Модификатор) — изменение блока (.button--primary).

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

🟠OOCSS (Object-Oriented CSS)
OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

🟠CSS-in-JS (Styled Components, Emotion)
Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

🟠Utility-First (Tailwind CSS)
В этом подходе используются готовые утилитарные классы для быстрого стилизации.

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно про дескрипторы?

Property Descriptor — это объект, описывающий свойство:
- value
- enumerable
- configurable
- writable Можно получить через Object.getOwnPropertyDescriptor().

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как проверить правильную иерархию html заголовков?

Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.

🚩Зачем нужна правильная иерархия заголовков?

🟠Логическая структура
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
🟠Доступность
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
🟠SEO
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.

🚩Что значит "правильная иерархия заголовков"?

🟠`<h1>`
Заголовок страницы (должен быть уникальным и только один на странице).
🟠`<h2>`
Подразделы <h1>.
🟠`<h3>`
Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков?

🟠Ручная проверка HTML-кода
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).

🟠Использование браузерных DevTools
В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.

🟠Инструменты для проверки доступности
Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.

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

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков
Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.

🚩Примеры ошибок в структуре и как их исправить

Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое функция высшего порядка?

Функция высшего порядка — это функция, которая принимает другую функцию в аргументы или возвращает функцию как результат. Используется для абстракции, композиции, колбэков.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 К какой категории относятся промисы?

Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами).

Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await, then/catch)

🚩Почему промисы – асинхронная конструкция?

Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк

До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках?

- Указывать атрибут lang в <html> и в текстовых блоках;
- Использовать hreflang в <link> и <a> для указания языковых версий;
- Хранить переводы отдельно и подгружать в зависимости от языка (через i18n).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Расскажи про оптимизацию рендеринга в react?

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

🚩Почему важна оптимизация рендеринга?

🟠Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.
🟠Экономия ресурсов
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.
🟠Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.

🚩Основные подходы к оптимизации рендеринга

🟠Мемоизация компонентов
React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.memo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

🟠Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

🟠Разделение кода и ленивый рендеринг
Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

🟠Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

🟠Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

🟠Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.

🟠Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего используются ключи в JSX?

Ключи помогают React отслеживать элементы списка при рендере и обновлении. Они позволяют эффективно сравнивать текущую и новую версии списка и минимизировать DOM-операции.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чём преимущество синтаксического сахара в виде async await над promise?

Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее.

🟠`async/await` проще читать и писать

Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all()
Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое DNS?

Это система доменных имен, которая преобразует читаемые человеком домены (например, example.com) в IP-адреса серверов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Расскажи про области видимости

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

🚩Глобальная область видимости

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

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

🚩Функциональная область видимости

Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

🚩Блочная область видимости

Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

🚩Область видимости модуля (Module Scope)

При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём разница между debugger и console.log?

- console.log — выводит данные в консоль, не прерывает выполнение.
- debugger — останавливает выполнение кода и открывает DevTools, позволяет пошагово отлаживать.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ?

Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript.

🟠Прямой (inline) SVG-код в HTML
Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>`
Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image`
SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>`
Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>`
SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём отличия HTML5 от HTML4.01 и XHTML1.0?

- HTML5 поддерживает больше API и новых тегов;
- Он не требует строгой валидации и работает в "универсальном" режиме;
- HTML5 заменил множество устаревших элементов;
- XHTML1.0 требует строгий синтаксис и подаётся как XML;
- HTML4.01 ограничен в функциональности, не поддерживает современные API.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний