Знакомство с HTML
- 1 ноября 2023
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
<h1>
— это тег для главного заголовка.<p>
— это тег для абзаца текста.<img>
— это тег для изображения.
Теги обычно идут парами: открывающий тег <tag>
и закрывающий тег </tag>
. Например:
<h1>Мой заголовок</h1>
<p>Это мой первый абзац. Привет, мир!</p>
Некоторые теги можно не закрывать:

Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега <img>
атрибут src
указывает путь к изображению:
<img src="мой_котик.jpg" alt="Фото моего котика">
Атрибут alt
описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
<form action="/" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="user_name">
<input type="submit" value="Отправить">
</form>
Здесь:
<form>
— это тег формы.action
— куда отправляются данные.method
— метод отправки (обычноget
илиpost
).<input>
— поле для ввода данных. Типtext
означает текстовое поле.<label>
— метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов <ol>
(ordered list) и <li>
(list item):
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
Неупорядоченные списки используют теги <ul>
и <li>
:
<ul>
<li>Элемент списка с маркером</li>
<li>Еще один элемент с маркером</li>
</ul>
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — <a>
, атрибут href
указывает на адрес, куда должна вести ссылка:
<a href="https://www.example.com">Посетить сайт Example</a>
Таблицы
Таблицы в HTML создаются с помощью тега <table>
и включают в себя строки (<tr>
), заголовки колонок (<th>
) и ячейки данных (<td>
):
<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Джон</td>
<td>30</td>
</tr>
<tr>
<td>Элис</td>
<td>25</td>
</tr>
</table>
Использование изображений
Мы уже упоминали тег <img>
для вставки изображений, но помимо src
и alt
есть и другие атрибуты, например, width
и height
для указания размеров изображения:
<img src="мой_котик.jpg" alt="Фото моего котика" width="500" height="600">
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
<header>
для шапки сайта<footer>
для подвала<article>
для статьи<section>
для раздела содержимого<nav>
для навигации
<article>
<header>
<h1>Заголовок статьи</h1>
</header>
<section>
<p>Первый абзац статьи...</p>
</section>
<footer>
<p>Автор статьи</p>
</footer>
</article>
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! 🚀
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

8 решений из HTML и CSS, которые пора забыть в 2025
Раньше простые на первый взгляд задачи требовали довольно много возни. Центрировать блок? Нужно позиционирование и расчёты. Сделать сетку? Пропорции вручную и осторожное управление отступами. Обновить страницу автоматически? Либо писать скрипт, либо настраивать сервер. Работало, но всегда казалось, что можно проще.
И проще стало. Современные HTML и CSS позволяют решать привычные задачи буквально парой строк. Никаких лишних обёрток, сложных костылей и вечных проверок на совместимость. Всё честно, прозрачно и работает сразу — берёшь и используешь.
- 26 апреля 2025

10 идей для вайб-кодинга на пару свободных часов
Есть кодинг по задаче. А есть — по вайбу.
Вайб-кодинг — это когда вы садитесь за ноут не потому, что надо, а потому что хочется. Без целей, дедлайнов и фич-реквестов. Просто чтобы почувствовать, как работает браузер, как оживает DOM, как строчка за строчкой рождается нечто, чего не было.
Это может быть бесполезно с точки зрения результата, но не бессмысленно. Хороший вайб-проект — это миниатюрная лаборатория, где вы пробуете новые подходы, фреймворки, библиотеки. Или наоборот — возвращаетесь к HTML и CSS, чтобы снова почувствовать радость простоты.
Но. Иногда хочется, чтобы результат всё же приносил пользу. Пусть даже самую крошечную. Ниже — десять идей проектов, которые можно использовать каждый день. Все они — настоящие, живые, с возможностью доработать, передать другу или выложить в портфолио.
Каждая идея — с подробным первым поисковым запросом, чтобы сразу можно было начать. Погнали.
- 24 апреля 2025
HTML-коды популярных эмодзи
Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!
Эмодзи | Название | HTML-код |
---|---|---|
😀 | Улыбающееся лицо | 😀 |
😂 | Лицо со слезами радости | 😂 |
😍 | Лицо с глазами в форме сердца | 😍 |
😎 | Лицо в солнцезащитных очках | 😎 |
😭 | Плачущий | 😭 |
😊 | Смущённая улыбка | 😊 |
😢 | Грустное лицо | 😢 |
😅 | Лицо с каплей пота | 😅 |
🤔 | Задумчивое лицо | 🤔 |
👍 | Большой палец вверх | 👍 |
👎 | Большой палец вниз | 👎 |
👏 | Аплодисменты | 👏 |
🙏 | Сложенные руки | 🙏 |
❤ | Красное сердце | ❤ |
💔 | Разбитое сердце | 💔 |
🔥 | Огонь | 🔥 |
💯 | Сто баллов | 💯 |
🎉 | Конфетти | 🎉 |
🎂 | Торт | 🎂 |
🌟 | Звезда | 🌟 |
✨ | Сияние | ✨ |
🌈 | Радуга | 🌈 |
☀ | Солнце | ☀ |
☁ | Облако | ☁ |
🌧 | Дождь | 🌧 |
❄ | Снег | ❄ |
🌍 | Земной шар | 🌍 |
💡 | Лампочка | 💡 |
💤 | Сон | 💤 |
🎵 | Нота | 🎵 |
🎶 | Музыка | 🎶 |
📱 | Телефон | 📱 |
💻 | Ноутбук | 💻 |
🚗 | Машина | 🚗 |
🚀 | Ракета | 🚀 |
✈ | Самолёт | ✈ |
🚲 | Велосипед | 🚲 |
🐶 | Собака | 🐶 |
🐱 | Кошка | 🐱 |
🐭 | Мышь | 🐭 |
🦊 | Лиса | 🦊 |
🐻 | Медведь | 🐻 |
🍎 | Яблоко | 🍎 |
🍕 | Пицца | 🍕 |
🍔 | Бургер | 🍔 |
🍩 | Пончик | 🍩 |
🍉 | Арбуз | 🍉 |
- 15 ноября 2024

Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024

Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023

Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023

Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport
.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport
, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport
, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport
тоже нужен.
- 18 сентября 2023

Атрибут class в HTML на примерах
Атрибут class
используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023

В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>
, <cite>
и <q>
. Давайте разберёмся в их различиях.
- 12 сентября 2023

Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023