HTML - Phrase Elements: Giving Your Text More Meaning
Привет, будущие веб-разработчики! Я рад стать вашим проводником в этом захватывающем путеше ствии в мир HTML-фразовых элементов. Как кто-то, кто teaches HTML более десяти лет, я с нетерпением жду возможности поделиться этими мощными инструментами, которые помогут вам создавать более значимые иExpressive веб-контент. Так что погружаемся!
Что такое HTML-фразовые элементы?
Прежде чем мы углубимся в детали, давайте поймем, что такое фразовые элементы. Представьте их как особые теги, которые добавляют дополнительное значение или акцент на части вашего текста. Они как приправы в вашем любимом блюде - они добавляют вкус и глубину вашему контенту!
Вот краткий обзор фразовых элементов, с которыми мы будем работать:
| Элемент | Описание |
|---|---|
<em> |
Подчеркнутый текст |
<mark> |
Подчеркнутый или выделенный текст |
<strong> |
Важный текст |
<abbr> |
Аббревиатура |
<dfn> |
Определение термина |
<q> |
Короткая цитата |
<cite> |
Цитирование |
<code> |
Компьютерный код |
<kbd> |
Ввод клавиатуры |
<var> |
Переменная в программировании или математике |
<samp> |
Пример вывода из программы |
<address> |
Контактная информация |
Теперь давайте рассмотрим каждый из этих элементов подробнее!
Подчеркнутый текст: элемент <em>
Когда вы хотите подчеркнуть слово или фразу, как вы делаете это в речи, элемент <em> - ваш goto инструмент.
<p>Я <em>люблю</em> учиться HTML!</p>Это будет отображаться как:
Я люблю учиться HTML!
Браузеры обычно отображают подчеркнутый текст курсивом, но помните, это о значении, а не о стиле. Screen readers часто изменяют тон при встрече с тегами <em>, делая ваш контент более доступным.
Выделенный текст: элемент <mark>
Когда вы когда-либо использовали маркер на своих учебниках, элемент <mark> делает exactly это в HTML!
<p>Самая важная часть предложения находится <mark>здесь</mark>.</p>Это будет отображаться как:
Самая важная часть предложения находится здесь.
Он идеально подходит для привлечения внимания к определенным частям вашего текста, как я делал с моим лазерным указателем на занятиях!
Важный текст: элемент <strong>
Когда вам нужно указать, что текст имеет большое значение, <strong> - ваш супергерой.
<p>Предупреждение: <strong>Всегда делайте резервное копирование файлов перед обновлением системы!</strong></p>Это будет отображаться как:
Предупреждение: Всегда делайте резервное копирование файлов перед обновлением системы!
Браузеры обычно отображают этот текст жирным шрифтом, но снова, это о семантическом значении. Это как кричать: "Эй, обрати внимание на это!"
Текст аббревиатуры: элемент <abbr>
Мы все любим наши аббревиатуры, не так ли? Но не все могут знать, что они значат. Вот где <abbr> comes в handy.
<p>Я работаю с <abbr title="HyperText Markup Language">HTML</abbr> каждый день.</p>Это будет отображаться как:
Я работаю с HTML каждый день.
Наведите указатель мыши на "HTML" в браузере, и вы увидите полное имя! Это как иметь тайный декодер для ваших аббревиатур.
Определение терминов: элемент <dfn>
Когда вы introduces новый термин или концепцию, <dfn> - ваш лучший друг.
<p><dfn>HTML</dfn> - это стандартный язык разметки для создания веб-страниц.</p>Это говорит браузерам и поисковым системам: "Эй, мы определяем что-то важное здесь!"
Цитирование текста: элемент <q>
Для тех времен, когда вы хотите включить короткую цитату в абзац, <q> идеально подходит.
<p>Как мой любимый учитель всегда говорил, <q>Единственный глупый вопрос - это тот, который вы не задаете.</q></p>Это будет отображаться как:
Как мой любимый учитель всегда говорил, "Единственный глупый вопрос - это тот, который вы не задаете."
Большинство браузеров автоматически добавляют кавычки вокруг текста внутри тегов <q>.
Цитирование текста: элемент <cite>
Когда вы ссылаетесь на книгу, фильм или любое другое произведение, <cite> - ваш суперзвезда цитирования.
<p>Моя любимая книга - <cite>Путеводитель по Галактике</cite> Дугласа Адамса.</p>Это обычно отображается курсивом:
Моя любимая книга - Путеводитель по Галактике Дугласа Адамса.
Компьютерный код: элемент <code>
Для всех вас, начинающих программистов, когда вы хотите отобразить фрагменты кода, <code> - ваш лучший друг.
<p>Функция <code>console.log()</code> используется для вывода сообщений в консоль в JavaScript.</p>Это будет отображаться как:
Функция console.log() используется для вывода сообщений в консоль в JavaScript.
Текст клавиатуры: элемент <kbd>
Когда вам нужно указать ввод клавиатуры, <kbd> comes на помощь.
<p>Чтобы сохранить файл, нажмите <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>Это будет отображаться как:
Чтобы сохранить файл, нажмите Ctrl + S.
Переменные в программировании: элемент <var>
Для тех времен, когда вы обсуждаете переменные в контексте программирования или математики, <var> - ваш virtuoso переменных.
<p>В уравнении <var>E</var> = <var>mc</var><sup>2</sup>, <var>E</var> represents energy.</p>Это обычно отображается курсивом:
В уравнении E = mc2, E represents energy.
Пример вывода из программы: элемент <samp>
Когда вы хотите показать пример вывода из программы, <samp> - ваш суперзвезда образца.
<p>Если вы запустите этот код, вы увидите: <samp>Hello, World!</samp></p>Это часто отображается в моноширинном шрифте:
Если вы запустите этот код, вы увидите: Hello, World!
Текст адреса: элемент <address>
Последний, но не менее важный, когда вам нужно предоставить контактную информацию, <address> - ваш goto элемент.
<address>
Написано Джоном Доу.<br>
Посетите нас по адресу:<br>
Example.com<br>
Коробка 564, Диснейленд<br>
США
</address>Это обычно отображается курсивом и часто с отступом перед и после.
И вот вы и learned о чудесном мире HTML-фразовых элементов. Помните, эти элементы не просто о том, чтобы изменить вид текста - они о добавлении значения и структуры вашему контенту. Они делают ваши веб-страницы более доступными, более семантически богатыми и, в конечном итоге, более профессиональными.
Пока мы заканчиваем, я вспоминаю студента, который однажды сказал мне: "Учиться HTML - это как учиться новому языку, но вместо того чтобы разговаривать с людьми, я разговариваю с компьютерами!" И вы знаете что? Она была абсолютно права. С этими фразовыми элементами в вашем арсенале, вы на пути к тому, чтобы стать fluent в языке веба.
Продолжайте практиковаться, продолжайте исследовать и, самое главное, продолжайте наслаждаться HTML. Before you know it, вы будете создавать веб-страницы, которые не только выглядят красиво, но и meaningful и доступные. Happy coding, everyone!
Credits: Image by storyset