<!-- Подключение таблицы стилей -->
<link rel="stylesheet" href="styles.css">

<!-- Ссылка на альтернативную версию страницы -->
<link rel="alternate" hreflang="en" href="example.com/en">

<!-- Обычная ссылка с атрибутом rel -->
<a href="https://example.com" rel="noopener noreferrer">Перейти</a>

Атрибут rel важен для SEO, безопасности и улучшения пользовательского опыта.

<div class="text">Тень у текста</div>

<style>
  .text {
    font-size: 24px;
    font-weight: bold;
    color: darkblue;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Тень с размитием */
  }
</style>

const numbers = [1, 3, 5, 7];

// Проверяем, есть ли число 5 в массиве
console.log(numbers.includes(5)); // true

const text = "Привет, мир!";
console.log(text.includes("мир")); // true

<!-- Открытие ссылки в новой вкладке -->
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Открытие ссылки в том же окне -->
<a href="https://example.com" target="_self">Открыть в этом же окне</a>

<!-- Открытие в новом окне без доступа к родительскому -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Открыть безопасно</a>

Атрибут target важен для управления поведением ссылок и безопасности веб-страниц.

<img src="image.jpg" class="responsive-img" alt="Пример изображения">

<style>
  .responsive-img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* Заполняет контейнер, обрезая лишнее */
  }
</style>

const text = "JavaScript — крутой язык!";

// Проверяем, начинается ли строка с "Java"
console.log(text.startsWith("Java")); // true

// Проверяем с учетом позиции
console.log(text.startsWith("крутой", 13)); // true

<!-- Кнопка без видимого текста, но с доступным описанием -->
<button aria-label="Открыть меню">
  <img src="menu-icon.svg" alt="">
</button>

Атрибут aria-label помогает делать сайты доступными для всех и соответствует стандартам Web Accessibility (WCAG).

<div class="box">Этот текст слишком длинный для блока и может выходить за его границы.</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    overflow: hidden; /* Обрезаем лишний контент */
  }
</style>

const text = "frontend — это круто!";

// Проверяем, заканчивается ли строка на "круто!"
console.log(text.endsWith("круто!")); // true

// Проверяем с ограничением по длине
console.log(text.endsWith("frontend", 8)); // true

<!-- Иконка, не нужная для экранных читалок -->
<span aria-hidden="true">🔔</span>

<!-- Видимый, но скрытый от читалок текст -->
<p aria-hidden="true">Этот текст будет проигнорирован</p>

Атрибут aria-hidden помогает создавать семантически корректные интерфейсы, соответствующие стандартам Web Accessibility (WCAG).