Теги, связанные с текстом
Эта статья объясняет теги, относящиеся к тексту.
Объяснение разделено на семантические и несемантические теги.
YouTube Video
Создание CSS для предварительного просмотра
html-tags.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 20px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29}
30
31p, pre {
32 margin: 10px 0;
33 padding: 0;
34}
35
36ul, ol, dl, menu {
37 margin: 0;
38}
39
40pre {
41 background-color: #f0f0f0;
42 border-left: 4px solid #ccc;
43 padding: 10px;
44 overflow-x: auto;
45}
46
47p.sample, .sample {
48 background-color: #e7f4e9;
49 padding: 10px;
50 border-left: 4px solid #7bbd82;
51 color: #333;
52}
53
54p.sample-error, .sample-error {
55 background-color: #f4e7e7;
56 padding: 10px;
57 border-left: 4px solid #bd827b;
58 color: #333;
59}
60
61p.sample-warn, .sample-warn {
62 background-color: #f4f1e7;
63 padding: 10px;
64 border-left: 4px solid #bda97b;
65 color: #333;
66}
67
68code {
69 padding: 2px 4px;
70 border-radius: 4px;
71 font-family: monospace;
72}
73
74span {
75 font-weight: bold;
76}
77
78main {
79 padding-bottom: 100px;
80}
81
82article {
83 background-color: white;
84 padding: 20px;
85 margin-bottom: 10px;
86 border-radius: 8px;
87 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
88}
89
90section {
91 margin-bottom: 20px;
92}
93
94table {
95 width: 100%;
96 border-collapse: collapse;
97}
98
99th, td {
100 border: 1px solid #ddd;
101}Основные теги, связанные с текстом
Тег <div>
1<div>This is a division of content.</div>-
Тег
<div>- это блочный элемент, используемый для создания разделов в HTML. -
Тег
<div>является несемантическим тегом.При сосредоточении на семантическом HTML можно использовать значимые теги (такие как
<section>,<article>). Это помогает поисковым системам и экранным читалкам лучше понимать содержание страницы. -
Сочетая его с CSS и JavaScript, вы можете управлять внешним видом и поведением страницы.
Тег
<div>используется для группировки содержимого на странице как блочный элемент. Он в основном используется в сочетании с CSS и JavaScript для настройки макета страницы, стилей и управления элементами.
Тег <p>
This is a paragraph of text.
1<p>This is a paragraph of text.</p>- Тег
<p>— это элемент, используемый для определения абзаца в HTML. Тег<p>представляет абзац и используется в основном для группировки и отображения текста. Он помогает сделать контент более удобным для чтения за счет визуального разделения частей текста. - Вы не можете размещать другие блочные элементы, такие как другой тег
<p>или тег<div>, внутри тега<p>. Это запрещено спецификацией HTML. Если вы это сделаете, браузер автоматически закроет тег, и он не будет отображаться корректно.
Тег <a>
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>-
Тег
<a>используется для создания ссылок.Тег
<a>используется для создания ссылок на другие страницы, внешние сайты или файлы. Атрибутhrefиспользуется для указания назначения ссылки. -
Он может использоваться для текстовых или графических ссылок, а использование
target="_blank"откроет ссылку в новой вкладке. -
Атрибут
targetиспользуется для указания способа отображения связанной цели._self(по умолчанию): Открывает ссылку в текущем окне или вкладке._blank: Открывает ссылку в новом окне или вкладке._parent: Открывает ссылку во фрейме-родителе._top: Открывает ссылку во всем окне, игнорируя фреймы.
-
Атрибут
titleиспользуется для отображения всплывающей подсказки на ссылке. Когда пользователь наводит курсор на ссылку, отображается указанное название.
1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>- Тег
<a>также используется для перехода к определенным местам на той же странице. Для этого нужно задать атрибутidцелевому элементу и использовать этотidв атрибутеhrefссылки.
Тег <span>
1Here is some <span style="color: red;">highlighted text-
Тег
<span>является встроенным элементом.Тег
<span>является встроенным элементом, поэтому он не разрывает строку при использовании между текстом, ссылками, изображениями или другими встроенными элементами. Он органично вписывается в поток страницы. -
Вы можете частично применять определенные стили.
Когда вы хотите применить стиль только к части документа, вы можете использовать тег
<span>, чтобы назначить CSS-класс или ID и применить стили к определенному диапазону. -
Тег
<span>является несемантическим элементом.Так как тег
<span>не имеет специфического значения или структурной роли, он используется исключительно для оформления стиля или работы скриптов. Когда требуется семантическое выделение, более уместно использовать семантические теги, такие как<strong>или<em>, которые будут объяснены позже.
Тег <br>
line break.
1Here is some text with a <br> line break.-
Тег
<br>является строчным элементом.Так как тег
<br>является встроенным элементом, он не занимает весь блок и вставляет разрыв строки в тексте там, где он используется. В то время как тег<p>добавляет отступы сверху и снизу для разделения абзацев, тег<br>создает разрыв строки без добавления отступов. -
Это автозакрывающийся тег, поэтому закрывающий тег (
</br>) не требуется. -
Лучше избегать чрезмерного использования этого тега и использовать теги
<p>или CSS для разрывов абзацев или настройки макета.При организации текста в абзацы лучше использовать тег
<p>. Также рекомендуется использовать CSS для настройки макета. Например, использование свойстваwhite-spaceв CSS позволяет отображать разрывы строк и пробелы в тексте так, как они есть.
Тег <hr>
This is another section of text.
1This is some text.<hr>This is another section of text.-
Тег
<hr>является блочным элементом.Тег
<hr>используется для вставки горизонтальной линии, чтобы визуально разделить разделы контента. Он также может использоваться для обозначения тематического разрыва, придавая ему значение в зависимости от контекста. -
Это самозакрывающийся тег, поэтому закрывающий тег (
</hr>) не обязателен. -
Вы можете настроить его цвет, длину и толщину с помощью CSS.
Семантические теги, связанные с текстом
От тега <h1> до тега <h6>
Main Heading
Subheading
Sub-subheading
1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>-
Теги
<h1>до<h6>— это теги заголовков, которые используются в HTML.Тег
<h1>представляет самый важный заголовок и обычно используется как основной заголовок всей страницы. В обычной практике в HTML-документе используется только один тег<h1>.Тег
<h2>является следующим по важности после<h1>и используется для заголовков разделов или глав на странице.Тег
<h3>обозначает подзаголовки или более мелкие разделы под<h2>.Теги
<h4>,<h5>и<h6>обозначают заголовки более низкого уровня, используемые для деталей или названий разделов. -
Теги заголовков указывают на важность текста и помогают создать логическую структуру страницы. Поисковые системы также используют теги заголовков для понимания содержания страницы.
Тег <strong>
1<strong>Important text</strong> to emphasize significance.-
Тег
<strong>— это HTML-тег, используемый для указания важности или выделения текста, обычно отображаемого жирным шрифтом. -
Тег
<strong>является семантическим тегом, и его основная цель — добавление смысла.Он может указывать, что текст имеет контекстную важность. Например, он может подчеркнуть важность текста для поисковых систем, что полезно для SEO. Кроме того, он передает важность текста пользователям, использующим программы чтения с экрана. С другой стороны, тег
<b>, который будет представлен позже, просто используется для выделения текста жирным, но не добавляет семантического акцента.
Тег <em>
1<em>Emphasized text</em> for italics and emphasis.-
Тег
<em>— это HTML-тег, используемый для указания важности или выделения в тексте, обычно отображаемого курсивом. -
Тег
<em>является семантическим тегом, и его основное назначение — добавление смысла.Как и тег
<strong>, он может указывать на контекстную важность текста. Тег<strong>обычно отображается жирным, в то время как тег<em>чаще всего отображается курсивом. Оба тега распознаются программами чтения с экрана и поисковыми системами для семантического акцента, однако<strong>указывает на большую важность, тогда как<em>передает эмоциональное выделение. Кроме того, тег<i>, который будет представлен позже, просто делает текст курсивным и не добавляет семантического акцента.
Тег <mark>
1<mark>Highlighted text</mark> for attention.- Тег
<mark>используется для обозначения, что определенный текст имеет контекстную важность. Он полезен для выделения результатов поиска или ключевых моментов. - По умолчанию текст, заключенный в тег
<mark>, отображается на желтом фоне, визуально подчеркивая его важность.
Тег <del>
1<del>Deleted text</del> shows removed content.-
Тег
<del>используется для обозначения, что текст был удален или изменен. Этот тег полезен для отображения истории изменений или правок текста. -
Текст, заключённый в тег
<del>, обычно отображается с зачёркиванием. Это визуально указывает на удалённый контент.Текст, заключённый в тег
<del>, также распознаётся как удалённый screen reader-ами. Это позволяет понять содержание, даже если оно визуально не очевидно.
Тег <ins>
1<ins>Inserted text</ins> shows added content.-
Тег
<ins>используется для указания нового или изменённого текста в документе. Этот тег полезен для отображения истории добавлений или изменений текста. -
В браузерах текст, заключённый в тег
<ins>, обычно отображается с подчёркиванием. Это визуально указывает на добавленный контент.Текст, заключённый в тег
<ins>, также распознаётся как новый screen reader-ами. Это позволяет понять содержание, даже если оно визуально не очевидно.
Тег <abbr>
1<abbr title="World Health Organization">WHO</abbr>- Тег
<abbr>является встроенным элементом и используется для обозначения сокращений или акронимов. Использование этого тега обеспечивает полное значение сокращений и способствует улучшению SEO и доступности. Это особенно помогает читателям, незнакомым с сокращением, и пользователям screen reader-ов лучше понимать его содержание.
Теги, связанные с оформлением текста
Тег <b>
1<b>Bold text</b> without semantic emphasis.- Тег
<b>является встроенным элементом, используемым для выделения текста жирным шрифтом. Как и другие теги, которые мы представим, этот используется для визуального выделения, но не для семантического акцента.
<i> тег
1<i>Italic text</i> for style.- Тег
<i>является встроенным элементом, используемым для выделения текста курсивом.
<u> тег
1<u>Underlined text</u> for decoration.- Тег
<u>является встроенным элементом, используемым для подчёркивания текста.
<small> тег
1<small>This is small text.</small><small>тег — это встроенный элемент, используемый для отображения текста меньшего размера. Он обычно используется для представления дополнительной информации или примечаний, которые являются вторичными по отношению к основному содержанию.
<s> тег
1<s>Strikethrough text</s>- Тег
<s>— это встроенный элемент, который используется для зачёркивания текста.
<sub> тег
1H<sub>2</sub>O<sub>тег — это встроенный элемент, используемый для отображения текста в нижнем индексе.
<sup> тег
1E = mc<sup>2</sup><sup>тег — это встроенный элемент, используемый для отображения текста в верхнем индексе.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.