Работа с текстом и списки в HTML
Привет, друзья! Сегодня мы погрузимся в мир работы с текстом и списками в HTML. Эти знания помогут вам создавать красивые и удобные веб-страницы. Готовы? Тогда начнем!
Работа с текстом
Текст — это основа любой веб-страницы. И HTML предоставляет множество возможностей для работы с текстом, от заголовков до абзацев и форматирования.
Заголовки
Заголовки — это как заголовки глав в книге. Они помогают структурировать контент и сделать его более читабельным. В HTML у нас есть шесть уровней заголовков, от <h1> до <h6>, где <h1> — самый важный и большой, а <h6> — самый маленький.
<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
Заголовки важны не только для читателей, но и для поисковых систем. Так что не забудьте использовать их, чтобы ваша страница была удобной и хорошо ранжировалась в поисковых системах.
Абзацы
Абзацы — это основные блоки текста на вашей странице. В HTML абзацы создаются с помощью тега <p>. Представьте их как отдельные мысли или идеи, которые вы хотите выразить.
<p>Это первый абзац текста.</p>
<p>А это второй абзац, потому что у нас много интересного!</p>
Форматирование текста
Иногда вам нужно выделить текст, чтобы он привлекал внимание. HTML предлагает несколько тегов для форматирования:
<strong>— выделяет важный текст жирным шрифтом. Это как кричать “Обратите внимание!”.<em>— выделяет текст курсивом, добавляя легкий акцент. Это как шептать “Это важно…”.<mark>— выделяет текст, как если бы вы его подчеркнули маркером.
<p>Это <strong>очень важный</strong> текст.</p>
<p>А это <em>важный</em>, но не столь громкий текст.</p>
<p>И это <mark>выделенный маркером</mark> текст.</p>
Списки
Теперь поговорим о списках. Списки — это отличный способ организовать информацию. В HTML у нас есть два основных типа списков: нумерованные и ненумерованные.
Ненумерованные списки
Ненумерованные списки (<ul>) — это списки с маркерами. Они отлично подходят для перечисления элементов, которые не нужно сортировать по порядку.
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Каждый элемент списка создается с помощью тега <li>. Представьте их как пункты вашего списка покупок, где порядок не важен.
Нумерованные списки
Нумерованные списки (<ol>) — это списки с числами. Они идеально подходят для шагов или инструкций, где важен порядок.
<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
<li>Третий шаг</li>
</ol>
В каждом элементе списка также используется тег <li>. Это как пошаговая инструкция для сборки мебели — каждый шаг на своем месте.
Вложенные списки
Что если у вас есть список внутри списка? Без проблем! HTML позволяет создавать вложенные списки. Просто добавьте новый список внутри элемента <li>.
<ul>
<li>Элемент 1
<ul>
<li>Подэлемент 1</li>
<li>Подэлемент 2</li>
</ul>
</li>
<li>Элемент 2</li>
</ul>
Итог
Теперь вы знаете, как работать с текстом и списками в HTML. Заголовки помогают структурировать контент, абзацы разделяют ваши мысли, а форматирование выделяет важное. Списки же организуют информацию, будь то нумерованные шаги или ненумерованные пункты.
Ссылка на предыдущую статью данного мини курса: Блочная и строчная модель
Ссылка на следующую статью данного мини курса: Тэг <div> в современной верстке
