JavaRush /Курси /Frontend SELF UA /Форматування тексту в HTML

Форматування тексту в HTML

Frontend SELF UA
Рівень 5 , Лекція 5
Відкрита

10.1 Початок форматування

Форматування тексту за допомогою тегів <b>, <strong>, <i>, <em>, <u> і <small> дозволяє веб-розробникам покращувати читабельність і акцентувати увагу на певних частинах тексту. У кожного з цих тегів є своє специфічне використання:

  • <b>: жирний текст без додаткового значення
  • <strong>: жирний текст з акцентом на важливість
  • <i>: курсивний текст для стилістичного виділення
  • <em>: курсивний текст з логічним або смисловим акцентом
  • <u>: підкреслений текст для візуального виділення
  • <small>: маленький текст для другорядної інформації

Розуміння і правильне використання цих тегів допомагає створювати зрозуміліші та візуально привабливіші веб-сторінки.

Основні теги для форматування тексту

Тег <b> і <strong>

Тег <b> використовується для виділення тексту напівжирним шрифтом, але без особливого семантичного значення. Тег <strong> теж робить текст напівжирним, але додає йому додаткового семантичного значення, вказуючи на важливість або значущість тексту.

HTML
    
      <p>Цей текст <b>жирний</b>, а цей текст <strong>дуже важливий і виділений жирним</strong>.</p>
    
  

Тег <i> і <em>

Тег <i> використовується для виділення тексту курсивом без особливого семантичного значення. Тег <em> робить текст курсивом і вказує на акцент або важливість тексту.

HTML
    
      <p>Цей текст <i>курсивний</i>, а цей текст <em>дуже важливий і курсивний</em>.</p>
    
  

Тег <u> і <ins>

Тег <u> використовується для підкреслення тексту. Тег <ins> також підкреслює текст, але використовується для позначення вставленого тексту, що є доречним у контексті відстеження змін.

HTML
    
      <p>Цей текст <u>підкреслений</u>, а цей текст <ins>вставлений і підкреслений</ins>.</p>
    
  

Тег <s> і <del>

Тег <s> використовується для закресленого тексту. Тег <del> також закреслює текст, але вказує на видалення тексту, що є доречним у контексті відстеження змін.

HTML
    
      <p>Цей текст <s>закреслений</s>, а цей текст <del>видалений і закреслений</del>.</p>
    
  

Тег <mark>

Тег <mark> використовується для виділення тексту, який має особливе значення або важливість в поточному контексті. Текст у межах <mark> відображається з жовтим фоном.

HTML
    
      <p>Цей текст <mark>виділений</mark> для привернення уваги.</p>
    
  

Тег <small>

Тег <small> використовується для відображення тексту меншого розміру у порівнянні зі звичайним текстом.

HTML
    
      <p>Це основний текст, а це <small>маленький текст</small>.</p>
    
  

Тег <sub> і <sup>

Теги <sub> і <sup> використовуються для створення підстрочного і надстрочного тексту відповідно.

HTML
    
      <p>Це текст з підстрочним індексом H<sub>2</sub>O і надстрочним індексом x<sup>2</sup>.</p>
    
  

10.2 Перерви рядків

Тег <br>

Тег <br> використовується для вставки розриву рядка, який переносить текст на новий рядок без створення окремого абзацу.

HTML
    
      <p>Це текст з розривом рядка<br>всередині одного абзацу.</p>
    
  

Тег <hr>

Тег <hr> використовується для вставки горизонтальної лінії, яка візуально розділяє контент на веб-сторінці.

HTML
    
      <p>Текст вище лінії.</p>
      <hr>
      <p>Текст нижче лінії.</p>
    
  
1
Опитування
Таблиці, рівень 5, лекція 5
Недоступний
Таблиці
Таблиці
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ