HTML-теги для текста

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

Вpтег

Этот тег определяет абзац текста.

<p>Some text</p>

Это блочный элемент.

Внутри него мы можем добавить любой встроенный элемент, который нам нравится, напримерspanили жеa.

Мы не можем добавлять блочные элементы.

Мы не можем гнездитьсяpэлементы один в другой.

По умолчанию браузеры задают стиль абзаца с полями сверху и снизу.16pxв Chrome, но точное значение может варьироваться в зависимости от браузера.

Это приводит к тому, что два следующих друг за другом абзаца разделяются, повторяя то, что мы думаем о «абзаце» в печатном тексте.

Вspanтег

Это встроенный тег, который можно использовать для создания раздела в абзаце, на который можно настроить таргетинг с помощью CSS:

<p>A part of the text <span>and here another part</span></p>

Вbrтег

Этот тег представляет собой разрыв строки. Это встроенный элемент и не требует закрывающего тега.

Мы используем его для создания новой строки внутриpтег, не создавая новый абзац.

И по сравнению с созданием нового абзаца, он не добавляет дополнительных интервалов.

<p>Some text<br>A new line</p>

Теги заголовков

HTML предоставляет нам 6 тегов заголовков. От самого важного до наименее важного у нас естьh1,h2,h3,h4,h5,h6.

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

Заголовки, особенно организация заголовков, также важны для SEO, и поисковые системы используют их по-разному.

Браузер по умолчанию будет отображатьh1тег больше, и размер элементов будет меньше, чем число рядом сhувеличивается:

Headings

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

Вstrongтег

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

Браузеры по умолчанию вносят текст в этот тегсмелый.

Вemтег

Этот тег используется для пометки текста внутри него какподчеркнул. Как сstrong, это не визуальная подсказка, а смысловая подсказка.

Браузеры по умолчанию делают текст в этомкурсив.

Цитаты

ВblockquoteHTML-тег полезен для вставки цитат в текст.

Браузеры по умолчанию применяют маржу кblockquoteэлемент. Chrome применяет левое и правое поле 40 пикселей, а также верхнее и нижнее поля 10 пикселей.

ВqHTML-тег используется для встроенных кавычек.

Горизонтальная линия

На самом деле не основано на тексте, ноhrтег часто используется внутри страницы. Это означаетhorizontal rule, и добавляет горизонтальную линию на страницу.

Полезно для разделения разделов на странице.

Блоки кода

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

Обычно это единственное, что делают браузеры. Это CSS, применяемый Chrome:

code {
    font-family: monospace;
}

Этот тег обычно заключен вpreтег, потому чтоcodeэлемент игнорирует пробелы и разрывы строк. Словноpтег.

Хром даетpreэтот стиль по умолчанию:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

который предотвращает сворачивание пустого пространства и делает его блочным элементом.

Списки

У нас есть 3 типа списков:

  • неупорядоченные списки
  • упорядоченные списки
  • списки определений

Неупорядоченные списки создаются с помощьюulтег. Каждый элемент в списке создается сliтег:

<ul>
	<li>First</li>
	<li>Second</li>
</ul>

Упорядоченные списки похожи, но только что созданы с помощьюolтег:

<ol>
	<li>First</li>
	<li>Second</li>
</ol>

Разница между ними в том, что в упорядоченных списках перед каждым элементом стоит номер:

Lists

Списки определений немного отличаются. У вас есть термин и его определение:

<dl>
	<dt>Flavio</dt>
	<dd>The name</dd>
	<dt>Copes</dt>
	<dd>The surname</dd>
</dl>

Браузеры обычно их отображают следующим образом:

Definition list

Надо сказать, что в дикой природе их редко можно увидеть, уж точно не так уж и много.ulиol, но иногда они могут быть полезны.

Другие текстовые теги

Есть ряд тегов с презентационными целями:

  • вmarkтег
  • вinsтег
  • вdelтег
  • вsupтег
  • вsubтег
  • вsmallтег
  • вiтег
  • вbтег

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

Various tags

Вы можете задаться вопросом, какbв отличии от этогоstrong? И какiотличается отem?

Разница заключается в смысловом значении. Покаbиiявляются прямым указанием браузеру выделить текст полужирным или курсивом,strongиemпридать тексту особое значение, а стиль - решать браузеру. Что в точности совпадает сbиi, по умолчанию. Хотя вы можете изменить это с помощью CSS.

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

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML:


Tech Wiki Online!