Топ 11 HTML-тегов, которые должен знать каждый блоггер и владелец сайта

Рекламное объявление

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

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

Прежде чем мы начнем, позвольте мне познакомить вас с некоторыми основными правилами, которые, как мы надеемся, облегчат понимание тегов HTML:

• HTML использует теги разметки, которые заключены в угловые скобки, например:
• Теги, которые выглядят как в примере выше, называются начальными тегами. Каждый начальный тег должен сопровождаться конечным тегом в какой-то момент, например так:
• Некоторые теги не описывают контент. Однако, чтобы соответствовать действующим стандартам, они все еще должны заканчиваться. Следовательно, они объединяют начальный и конечный тег, например:
  

Форматирование текста

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

Входные данные:жирный
Выход: жирный

Входные данные:курсивный
Выход:курсивный

Входные данные:подчеркнутый
Выход:подчеркнутый

Входные данные:зачеркнуть текст
Выход:зачеркнуть текст

Создание гипертекста

Простые URL-адреса могут выглядеть довольно некрасиво. Добавление гиперссылки к тексту, то есть создание гипертекста, намного более стильно и сэкономит место, особенно если ссылка очень длинная.

Входные данные:MakeUseOf
Выход:MakeUseOf

Как видите, этот HTML-тег немного сложнее, поэтому давайте рассмотрим его подробнее. Фактический тег и дополнительные элементы являются атрибутами, которые определяют дополнительные характеристики. Атрибут HREF = указывает ссылку и название = определяет подсказку при наведении мыши. Обязательно используйте кавычки, чтобы заключить ссылку и заголовок, иначе вы можете получить неработающую ссылку.

Встраивание изображений

Картинка может сказать более тысячи слов. Мы должны использовать их чаще. И вот как вы можете вручную вставить один, используя HTML:

Входные данные:
Выход:

Давайте также проанализируем этот тег. Опять же, фактический тег и обязательные атрибуты SRC = и альт =. Первый указывает на местоположение изображения, то есть его URL, а второй предоставляет альтернативный текст, который отображается в случае, если отображение изображений заблокировано или ссылка не работает. Опять же, используйте кавычки, чтобы избежать битых ссылок.

tag также является примером тега, который не нужно «заканчивать», и, следовательно, закрывается прямой чертой в начальном теге, т.е. скорее, чем .

Перерывы и параграфы

Чтобы создать структурированный текст, вам нужно использовать разрывы строк и абзацы. И вот теги, которые вам нужно знать:

Входные данные:

Выход: Этот тег создает разрыв строки. Обратите внимание, что это еще один тег, который объединяет начальный и конечный тег в одном.

Входные данные:

Текст внутри вашего абзаца.

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

Списки

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

Входные данные:

1. Пункт первый


2. Второй пункт

Выход:

1. Пункт первый
2. Второй пункт

Входные данные:

• Пункт первый


• Второй пункт

Выход:

• Пункт первый
• Второй пункт

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

тег используется для определения элемента в списке.

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

• 5 шагов к пониманию основного кода HTML 5 шагов к пониманию базового HTML-кодаHTML является основой каждой веб-страницы. Если вы новичок, давайте проведем вас через основные шаги для понимания HTML. Прочитайте больше
• 5 советов по HTML для создания быстрой загрузки бесплатного сайта 5 советов по HTML для создания быстрой загрузки бесплатного сайта Прочитайте больше
• 7 интересных HTML-эффектов, которые каждый может добавить на свой сайт 8 интересных HTML-эффектов, которые каждый может добавить на свой сайтВам не нужно знать CSS или PHP, чтобы создать модный сайт. Используйте эти интересные трюки HTML для создания потрясающих эффектов. Прочитайте больше

Чувствуете ли вы себя более уверенно в использовании тегов HTML сейчас? Если вы ранее регулярно занимались «ручным кодированием», какие теги, по вашему мнению, отсутствуют?

Кредиты изображений: Kentoh