Основы языка разметки HTML

Введение в HTML: Синтаксис, структура документа и базовые теги

Добро пожаловать на курс «Основы языка разметки HTML». Вы делаете первый и самый важный шаг в мир веб-разработки. Прежде чем мы начнем писать код, давайте разберемся с фундаментальным вопросом, который вы задали в теме урока.

Что такое HTML?

Аббревиатура HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки).

Важно сразу прояснить распространенное заблуждение: HTML — это не язык программирования. В нем нет переменных, циклов, функций или логических операций, присущих таким языкам, как Python, Java или C++. HTML отвечает не за поведение программы, а за структуру и содержание веб-страницы.

Представьте, что создание сайта — это строительство дома:

* HTML — это фундамент, стены и перекрытия (каркас). * CSS — это обои, краска и декор (внешний вид). * JavaScript — это электричество, водопровод и умный дом (функциональность).

Сегодня мы учимся строить каркас.

Синтаксис HTML: Теги, элементы и атрибуты

HTML-документ состоит из элементов. Элементы создаются с помощью тегов. Теги — это ключевые слова, заключенные в угловые скобки.

Анатомия элемента

Большинство HTML-элементов являются парными и состоят из трех частей:

!Анатомия HTML-элемента на примере параграфа

Пример кода:

Атрибуты

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

Формат записи: имя_атрибута="значение"

Пример ссылки с атрибутом href (куда ведет ссылка):

Вложенность

Элементы могут быть вложены друг в друга, как матрешки. Это создает иерархическую структуру страницы.

Правильно:

Неправильно (пересечение тегов):

Структура HTML-документа

Любая веб-страница имеет строгую структуру. Браузер ожидает увидеть определенный набор тегов, чтобы корректно отобразить сайт.

Рассмотрим базовый шаблон:

Разберем каждую строку:

!Иерархическая структура HTML-документа

Базовые теги для разметки текста

Теперь, когда у нас есть каркас, давайте наполним его содержимым.

Заголовки (Headings)

Существует 6 уровней заголовков, от <h1> до <h6>.

* <h1> — самый важный заголовок (обычно название статьи или страницы). На странице должен быть только один <h1>. * <h2> — заголовки разделов. * <h3> — заголовки подразделов и так далее.

Параграфы и перенос строк

Для обычного текста используется тег <p> (paragraph). Браузеры автоматически добавляют отступы сверху и снизу от параграфа.

Если вам нужно перенести текст на новую строку внутри параграфа, не создавая новый абзац, используйте одиночный тег <br> (line break). У него нет закрывающего тега.

Списки

Списки бывают двух основных видов:

Внутри обоих типов списков каждый пункт оборачивается в тег <li> (list item).

Пример маркированного списка:

Изображения

Для вставки картинок используется одиночный тег <img>. У него есть два обязательных атрибута:

* src (source) — путь к файлу изображения. * alt (alternative text) — текстовое описание картинки. Оно появится, если картинка не загрузится, и важно для скринридеров (программ для незрячих пользователей).

Ссылки

Самый важный элемент интернета — гиперссылка. Она создается тегом <a> (anchor).

* href — адрес, куда ведет ссылка. * target="_blank" — необязательный атрибут, который открывает ссылку в новой вкладке.

Семантика и форматирование

В старых версиях HTML часто использовали теги <b> (bold) для жирного текста и <i> (italic) для курсива. В современном HTML5 принято разделять визуальное оформление и смысл.

* <strong> — важный текст (отображается жирным). Используется для логического выделения важности. <em> — акцентированный текст* (отображается курсивом). Используется для изменения интонации при чтении.

> Совет: Старайтесь использовать <strong> и <em> вместо <b> и <i>, так как это помогает поисковым системам лучше понимать контент вашей страницы.

Заключение

Мы рассмотрели фундамент языка HTML. Теперь вы знаете, что это язык разметки, понимаете структуру тегов и умеете создавать базовый каркас страницы с заголовками, текстом, списками и изображениями.

В следующей статье мы углубимся в работу с атрибутами и научимся создавать сложные таблицы и формы обратной связи.

Работа с текстом: Заголовки, абзацы, списки и гиперссылки

Добро пожаловать на второй урок курса «Основы языка разметки HTML». В прошлой статье мы заложили фундамент: разобрали структуру HTML-документа, узнали, что такое теги и атрибуты, и создали нашу первую страницу. Теперь пришло время заняться отделкой и наполнением интерьера. Ведь пустые стены — это скучно, верно?

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

Иерархия заголовков: Структура превыше всего

Текст в интернете — это не просто поток слов. Это структурированная информация. Чтобы пользователь (и робот поисковой системы) мог быстро понять, о чем ваша страница, текст разбивается на логические секции с помощью заголовков.

В HTML существует ровно шесть уровней заголовков: от <h1> до <h6>.

Главный заголовок <h1>

Тег <h1> — это король вашей страницы. Он обозначает самую важную тему документа. Обычно это название статьи или имя товара в интернет-магазине.

Золотое правило: На одной странице должен быть только один тег <h1>. Если вы используете несколько <h1>, поисковые системы (Google, Яндекс) могут запутаться в том, что именно является главной темой страницы, что негативно скажется на её рейтинге.

Подзаголовки <h2> — <h6>

Остальные заголовки используются для создания вложенной структуры.

* <h2> делит основной контент на крупные разделы.

* <h3> делит разделы внутри <h2> на подразделы.

* <h4>, <h5> и <h6> используются для еще более глубокой детализации, хотя на практике уровни ниже 4-го встречаются редко.

!Визуализация иерархии заголовков на примере газетной статьи

Важно: Не используйте заголовки только для того, чтобы сделать текст жирным или крупным. Для визуального оформления существует CSS. Заголовки в HTML несут семантический (смысловой) характер. Скринридеры (программы для незрячих людей) используют заголовки для навигации по странице, позволяя пользователю «перепрыгивать» от раздела к разделу.

Пример правильной структуры:

Абзацы и особенности отображения текста

Как мы уже знаем, основной текст оборачивается в тег <p> (paragraph). Однако у браузеров есть свои особенности обработки текста, которые часто сбивают с толку новичков.

Схлопывание пробелов

Попробуйте написать внутри тега <p> много пробелов подряд или сделать несколько переносов строки клавишей Enter в редакторе кода.

Браузер проигнорирует ваше форматирование. На экране вы увидите: «Привет, мир! Как твои дела?». Это называется схлопыванием пробелов. Любое количество пробелов и переносов строк в коде превращается браузером в один единственный пробел на экране.

Принудительный перенос строки

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

Тематический разрыв

Иногда нужно визуально отделить одну часть текста от другой горизонтальной линией. Для этого используется одиночный тег <hr> (horizontal rule). Семантически он означает смену темы повествования.

Акцентирование текста: Семантика против стиля

В прошлом уроке мы упоминали теги <strong> и <em>. Давайте разберем их подробнее и сравним с устаревшими аналогами.

Жирный текст: <b> vs <strong>

* <b> (bold) — делает текст жирным визуально, но не добавляет ему важности. Используется крайне редко, когда нужно просто выделить слово (например, ключевые слова в абзаце), не акцентируя на нем внимание роботов.

* <strong> — означает важный текст. Браузер отображает его жирным, но главное здесь — смысл. Голосовые помощники могут читать такой текст с усиленной интонацией.

Курсив: <i> vs <em>

* <i> (italic) — делает текст курсивным. Часто используется для обозначения терминов, названий кораблей, иностранных фраз или иконок (в связке с CSS-библиотеками).

<em> (emphasis) — означает смысловое ударение*. Представьте, что вы произносите фразу и голосом выделяете определенное слово. Вот для этого нужен <em>.

Другие полезные строчные теги

Списки: Порядок и хаос

Списки помогают структурировать информацию по пунктам. В HTML есть три основных вида списков.

Маркированный список <ul>

Используется, когда порядок элементов не важен. Тег <ul> (Unordered List) создает контейнер списка, а каждый пункт внутри него должен быть обернут в тег <li> (List Item).

Нумерованный список <ol>

Используется, когда важна последовательность действий. Тег <ol> (Ordered List) автоматически проставит цифры (1, 2, 3...) перед каждым пунктом <li>.

Списки определений <dl>

Менее популярный, но очень полезный тип списка для словарей, глоссариев или описания характеристик «ключ-значение». Состоит из трех тегов:

Вложенные списки

Списки можно вкладывать друг в друга. Главное правило: вложенный список (<ul> или <ol>) должен находиться внутри тега <li>, а не просто болтаться внутри родительского списка.

Правильно:

!Структура вложенного списка: список внутри элемента списка

Гиперссылки: Кровеносная система веба

Ссылка создается тегом <a> (от слова anchor — якорь). Самый важный атрибут — href (hypertext reference), указывающий адрес назначения.

Абсолютные и относительные ссылки

Понимание разницы между ними критически важно для разработчика.

!Принципы построения относительных путей к файлам

Предположим, у вас такая структура файлов: * index.html (вы здесь) * about.html * pages/ (папка) * contacts.html

Примеры относительных ссылок из index.html:

* На about.html: <a href="about.html">О нас</a> * На contacts.html: <a href="pages/contacts.html">Контакты</a>

Если вы находитесь в pages/contacts.html и хотите вернуться на главную, нужно выйти из папки на уровень вверх с помощью ../:

* На index.html: <a href="../index.html">На главную</a>

Якорные ссылки

Ссылки могут вести не только на другие страницы, но и на конкретное место на текущей странице. Для этого элементу, к которому мы хотим прокрутить страницу, нужно задать уникальный атрибут id.

Атрибут target

По умолчанию ссылки открываются в той же вкладке. Чтобы открыть ссылку в новой вкладке, используйте атрибут target="_blank". Это полезно для внешних ссылок, чтобы пользователь не уходил с вашего сайта окончательно.

Ссылки на почту и телефон

Вы можете создавать ссылки, которые открывают почтовую программу или запускают звонок на смартфоне:

* Email: <a href="mailto:user@example.com">Написать нам</a> * Телефон: <a href="tel:+79990000000">Позвонить</a>

Спецсимволы (HTML Entities)

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

Для этого используются специальные коды — мнемоники. Они всегда начинаются с амперсанда & и заканчиваются точкой с запятой ;.

Популярные спецсимволы:

| Символ | Код | Описание | | :--- | :--- | :--- | | < | < | Меньше (less than) | | > | > | Больше (greater than) | | & | & | Амперсанд | | © | © | Знак копирайта | | |   | Неразрывный пробел |

Неразрывный пробел ( ) очень полезен, когда вы не хотите, чтобы строка разрывалась между двумя словами. Например, между инициалами и фамилией (А.С. Пушкин) или числом и валютой (100 руб.).

Заключение

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

В следующей статье мы добавим на нашу страницу красок: научимся работать с изображениями, аудио и видео, а также узнаем, какие форматы графики лучше всего подходят для веба.

Мультимедиа на странице: Вставка изображений, аудио и видео

Добро пожаловать на третий урок курса «Основы языка разметки HTML». Мы уже научились возводить стены нашего цифрового дома (структура документа) и клеить обои (текстовый контент). Но согласитесь, дом без картин на стенах, без телевизора и музыки кажется пустым и неуютным.

Сегодня мы вдохнем жизнь в наши веб-страницы. Мы разберем, как работать с мультимедиа: добавлять фотографии, иллюстрации, музыку и видеоролики. Вы узнаете, почему существует так много форматов изображений, как заставить видео работать во всех браузерах и что такое «окно в другой сайт».

Изображения в HTML: Больше, чем просто картинка

В первом уроке мы вскользь упоминали тег img. Теперь пришло время разобрать его детально. Изображения — это самый тяжелый контент на странице, и неправильная работа с ними может замедлить загрузку сайта в разы.

Тег img и его атрибуты

Тег img (от англ. image) — это одиночный тег. Ему не нужен закрывающий парный тег, так как он не содержит текста внутри себя. Вся информация передается через атрибуты.

Базовый синтаксис:

Зачем нужен alt? * Доступность: Скринридеры (программы для незрячих) читают этот текст вслух. Без него пользователь услышит просто «изображение», что не несет смысла. * SEO: Поисковые роботы не «видят» картинку, но они читают alt, чтобы понять, что на ней изображено. * Подстраховка: Если картинка не загрузится (плохой интернет или удаленный файл), пользователь увидит этот текст.

Размеры изображения: width и height

Всегда рекомендуется указывать ширину и высоту изображения прямо в HTML.

Если вы не укажете размеры, браузер не будет знать, сколько места зарезервировать под картинку, пока она полностью не загрузится. Это приводит к неприятному эффекту «прыгающего текста» (Layout Shift), когда текст смещается вниз по мере подгрузки изображений.

Форматы изображений: Какой выбрать?

В вебе используется несколько основных форматов графики. Выбор правильного формата критически важен для качества и скорости загрузки.

!Сравнение популярных форматов изображений для веба

| Формат | Расшифровка | Для чего лучше всего подходит | | :--- | :--- | :--- | | JPEG (JPG) | Joint Photographic Experts Group | Фотографии, изображения с множеством цветов и градиентов. Хорошо сжимается, но не поддерживает прозрачность. | | PNG | Portable Network Graphics | Изображения с прозрачным фоном, чертежи, текст на картинке. Сжатие без потери качества. | | SVG | Scalable Vector Graphics | Логотипы, иконки, простая графика. Это векторный формат: он не теряет качества при любом увеличении. | | GIF | Graphics Interchange Format | Простые анимации. Имеет ограничение в 256 цветов. | | WebP | Web Picture | Современный формат от Google. Сочетает лучшее от JPEG и PNG: отличное сжатие и поддержка прозрачности. |

> Совет: Старайтесь использовать формат WebP для большинства задач, так как он обеспечивает наименьший размер файла при высоком качестве.

Подписи к изображениям: <figure> и <figcaption>

Часто картинке требуется видимая подпись. Раньше для этого использовали обычный параграф <p> под картинкой, но браузер не понимал, что этот текст относится именно к изображению.

В HTML5 появились семантические теги для этой задачи:

* figure — контейнер для иллюстрации. * figcaption — описание (легенда) иллюстрации.

Аудио на странице

До появления HTML5 вставка звука была настоящей головной болью и требовала сторонних плагинов (например, Flash). Теперь это делается одним нативным тегом <audio>.

Простой пример

Атрибут controls добавляет стандартный плеер браузера с кнопками Play/Pause, громкостью и полосой прокрутки. Без этого атрибута аудио будет добавлено на страницу, но пользователь не увидит интерфейса управления.

Поддержка форматов

Разные браузеры «любят» разные форматы аудио. Чтобы звук гарантированно заработал у всех пользователей, используют вложенный тег <source>.

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

Полезные атрибуты аудио

* autoplay — автоматическое воспроизведение после загрузки (многие браузеры блокируют это, чтобы не пугать пользователей). * loop — зацикливание трека. * muted — воспроизведение без звука (полезно в комбинации с autoplay).

Видео на странице

Работа с видео очень похожа на работу с аудио. Для этого используется парный тег <video>.

Структура тега

!Алгоритм выбора источника видео браузером

Атрибут poster

Обратите внимание на атрибут poster. В нем указывается путь к картинке, которая будет отображаться в плеере до того, как пользователь нажмет кнопку Play. Если не задать постер, браузер покажет первый кадр видео, который часто бывает черным экраном.

Форматы видео

Два основных формата покрывают 99% потребностей:

Встраивание контента: iframe

Хранить видео на собственном хостинге — дорого и сложно. Видеофайлы занимают много места, и если ваш сайт посетят тысячи людей одновременно, сервер может не выдержать нагрузки. Поэтому чаще всего видео загружают на YouTube или Vimeo, а на сайт вставляют «окно» с этим видео.

Для этого используется тег <iframe> (inline frame — встроенная рамка).

Тег iframe буквально вырезает дырку в вашей странице и показывает внутри нее другую веб-страницу. С его помощью можно вставлять не только видео, но и: * Интерактивные карты (Google Maps, Яндекс.Карты). * Виджеты соцсетей. * Рекламные баннеры.

> Важно: Используйте iframe с осторожностью. Загрузка содержимого с чужого сайта может замедлить вашу страницу и создать потенциальные уязвимости в безопасности.

Заключение

Теперь ваш арсенал веб-разработчика пополнился мощными инструментами. Вы умеете:

Ваша страница стала живой и интерактивной. Но пока она выглядит как простой документ: все элементы идут друг за другом сверху вниз. В следующем модуле мы начнем изучать таблицы для структурирования данных и формы, чтобы пользователи могли отправлять вам информацию.

До встречи в следующем уроке!

Таблицы и формы: Структурирование данных и взаимодействие с пользователем

Добро пожаловать на четвертый урок курса «Основы языка разметки HTML». Мы уже проделали большой путь: создали каркас страницы, наполнили его текстом и украсили мультимедийными элементами. Наш цифровой дом выглядит неплохо, но пока он статичен. Пользователь может только смотреть на него, но не может взаимодействовать.

Сегодня мы превратим наш сайт из простой «доски объявлений» в полноценный инструмент. Мы научимся двум фундаментальным вещам:

Таблицы в HTML: Порядок в хаосе данных

На заре интернета таблицы использовались для всего: даже для создания макета сайта (расположения колонок, шапки и подвала). Это считалось плохой практикой, и сегодня для верстки макетов используется CSS. Однако для своего прямого назначения — отображения табличных данных — тег <table> незаменим.

Анатомия таблицы

Таблица в HTML строится построчно. Представьте, что вы рисуете таблицу на листе бумаги: сначала вы проводите горизонтальные линии (создаете строки), а затем делите их на ячейки.

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

* <table> — контейнер, обозначающий начало и конец таблицы. * <tr> (table row) — строка таблицы. * <td> (table data) — ячейка с данными внутри строки. * <th> (table header) — заголовочная ячейка. Текст в ней обычно жирный и выровнен по центру.

!Структура вложенности тегов в таблице

Рассмотрим код простой таблицы 2x2:

Семантическая группировка строк

Для больших таблиц хорошим тоном считается явное разделение на «голову», «тело» и «подвал». Это помогает браузерам правильно отображать таблицу (например, при печати длинной таблицы заголовок может дублироваться на каждой странице).

* <thead> — шапка таблицы (заголовки столбцов). * <tbody> — основное содержимое. * <tfoot> — подвал таблицы (например, строка «Итого»).

Объединение ячеек

Иногда структура данных требует объединить несколько ячеек в одну. Для этого у тегов <td> и <th> есть специальные атрибуты:

Значение атрибута — это число ячеек, которые нужно занять.

Пример объединения двух столбцов:

Формы: Диалог с пользователем

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

Тег <form>

Любая форма начинается с парного тега <form>. Он служит контейнером для всех элементов управления. У него есть два критически важных атрибута:

Универсальный солдат: тег <input>

Самый главный элемент формы — одиночный тег <input>. Его внешний вид и поведение кардинально меняются в зависимости от атрибута type.

Рассмотрим самые популярные типы:

* type="text" — обычное однострочное текстовое поле (имя, логин). * type="password" — поле для пароля (символы скрываются точками). * type="email" — поле для почты (браузер проверит наличие символа @). * type="checkbox" — галочка. Позволяет выбрать несколько вариантов из предложенных. * type="radio" — радиокнопка. Позволяет выбрать только один вариант из группы. * type="date" — календарь для выбора даты. * type="file" — кнопка выбора файла с компьютера.

Важность атрибута name

Каждый элемент ввода (input, select, textarea) должен иметь атрибут name. Это «имя переменной», которое увидит сервер.

Если вы создадите поле <input type="text"> без имени, пользователь сможет ввести туда текст, но при отправке формы сервер не поймет, что это за данные, и просто проигнорирует их.

Лейблы: Связь текста и поля

Просто разместить текст рядом с полем ввода недостаточно. Нужно связать их программно с помощью тега <label>. Это важно для доступности и удобства: при клике на текст курсор автоматически активирует связанное поле.

Связь создается двумя способами:

Способ 1: Вкладывание (простой)

Способ 2: Через атрибут for (профессиональный) Атрибут for у лейбла должен совпадать с атрибутом id у инпута.

Другие элементы управления

Не все задачи решаются тегом <input>. Есть и другие важные теги:

1. Текстовая область <textarea> Используется для ввода большого объема текста (комментарий, биография). В отличие от input, это парный тег.

2. Выпадающий список <select> Экономит место на экране, предлагая выбрать один вариант из списка. Варианты задаются тегами <option>.

3. Кнопка <button> Чтобы отправить форму, нужна кнопка. Внутри формы кнопка с типом submit (по умолчанию) отправляет данные на сервер.

!Соответствие HTML-кода и внешнего вида формы

Полезные атрибуты полей

Чтобы сделать форму удобнее, используйте дополнительные атрибуты:

* placeholder — текст-подсказка внутри поля, который исчезает при начале ввода (например, «ivan@example.com»). * required — делает поле обязательным. Браузер не даст отправить форму, если поле пустое. * value — предустановленное значение поля. * disabled — блокирует поле для ввода.

Пример готовой формы входа:

Заключение

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

В следующем уроке мы перейдем к самой творческой части курса — CSS (Cascading Style Sheets). Мы узнаем, как раскрасить наши серые таблицы, как сделать красивые кнопки и как превратить скучный HTML-каркас в произведение искусства.

Семантическая верстка HTML5, блочная модель и основы SEO

Добро пожаловать на пятый урок курса «Основы языка разметки HTML». Мы с вами проделали огромную работу: научились создавать структуру документа, работать с текстом, добавлять мультимедиа, строить таблицы и создавать интерактивные формы. По сути, вы уже умеете верстать веб-страницы.

Однако, чтобы стать профессионалом, недостаточно просто знать теги. Нужно понимать, как браузеры и поисковые системы «видят» ваш код. Сегодня мы переходим от вопроса «как это отобразить?» к вопросу «какой в этом смысл?». Мы поговорим о семантической верстке, разберем фундаментальную концепцию блочной модели и узнаем, как сделать так, чтобы ваш сайт полюбили Google и Яндекс.

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

Слово семантика в лингвистике означает изучение смысла слов. В контексте HTML семантика — это использование тегов в соответствии с их предназначением и смыслом, а не внешним видом.

До появления стандарта HTML5 верстка большинства сайтов выглядела как бесконечный набор тегов <div>. Тег <div> (division) — это безликий контейнер, который ничего не сообщает о своем содержимом.

Сравните два примера кода:

Несемантическая верстка (старая школа):

Семантическая верстка (HTML5):

Визуально для пользователя ничего не изменится. Но для поисковых роботов и скринридеров (программ, читающих экран вслух для незрячих) разница колоссальная. Во втором случае робот точно знает: «Ага, вот здесь навигация, здесь основная статья, а здесь подвал сайта».

!Структура типичной веб-страницы с использованием семантических тегов HTML5

Основные семантические теги HTML5

Давайте разберем «великолепную семерку» тегов, которые формируют каркас современного сайта.

1. <header>

2. <nav>

3. <main>

4. <article>

5. <section>

6. <aside>

7. <footer>

Блочная модель (Box Model)

Теперь перейдем к одной из самых важных концепций в веб-разработке. Если вы поймете блочную модель, вы поймете 50% проблем с версткой, которые возникают у новичков.

В глазах браузера каждый элемент HTML — это прямоугольный ящик (box). Даже если вы видите круглую кнопку или текст сложной формы, технически они находятся внутри невидимого прямоугольника.

Этот прямоугольник состоит из четырех слоев, как луковица.

!Визуальное представление блочной модели CSS: контент, внутренние отступы, границы и внешние отступы

Разберем слои изнутри наружу:

Блочные и строчные элементы

Поведение этих «ящиков» зависит от типа элемента. В HTML элементы делятся на две большие группы:

Блочные элементы (Block-level): * Всегда начинаются с новой строки. * Занимают всю доступную ширину родителя (растягиваются от края до края). * Примеры: <div>, <p>, <h1>-<h6>, <ul>, <li>, <header>, <footer>.

Строчные элементы (Inline): * Располагаются в одной строке с другими элементами. * Занимают ровно столько ширины, сколько нужно их контенту. * Игнорируют верхние и нижние отступы (margin). * Примеры: <span>, <a>, <strong>, <em>, <img>.

> Важно: В современном CSS можно изменить тип отображения любого элемента, но по умолчанию браузеры следуют именно этим правилам.

Основы SEO: Как понравиться поисковикам

SEO (Search Engine Optimization) — это поисковая оптимизация. Это комплекс мер, чтобы ваш сайт появлялся на первых строчках в Google или Яндексе. HTML-разметка играет здесь роль фундамента.

Вот чек-лист базовой SEO-оптимизации, которую вы можете сделать прямо в HTML-коде:

1. Правильный тег <title>

* Плохо: <title>Главная</title> * Хорошо: <title>Купить горный велосипед в Москве — Магазин «ВелоДрайв»</title>

2. Мета-описание (Description)