Как в html сделать подчеркнутый текст: Тег — подчёркнутый текст

Содержание

Теги html для оформления текста, зачеркнутый текст, курсив, подчеркнутый текст

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

Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++.

С помощью редактора мы будем наш документ редактировать, с помощью браузера просматривать, что у нас получилось.

Для того, чтобы изменения вступили в силу необходимо сначала сохранить изменения в редакторе, нажав на дискетку или комбинацию клавиш Ctr+S, а затем обновить этот же документ в браузере.

Заголовки текста разного уровня

Заголовки это не только важная часть оформления текста, но и один из инструментов внутренней оптимизации. В html тексте заголовки задают теги <h>. Для того, чтобы посмотреть, как они будут выглядеть прописываем в документе следующий код:

<h3>Поместите здесь текст, который вы хотите сделать заголовком</h3>

Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.

Жирный, подчеркнутый текст, курсив

Теги <b>, <i>, <u> легко решают эту проблему
<b>Так в html можно задать жирный текст</b>
<i>Вот так задается курсив</i>
<u>Вот это будет подчеркнутый текст</u>

Если нам нужно применить к тексту одновременно несколько свойств, просто вкладываем теги один в другой.

<i><b>Жирный курсив</i></b>

Изменяем размер шрифта

Размер шрифта текста задается в html с помощью тега <font>, у которого есть атрибут «size».

<font size=”5”>Размер шрифта 5</font>

Как поменять цвет текста

Цвет текста задается тем же самым тегом с помощью атрибута «color»

<font color=”red”>Текст красного цвета</font>

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

Текст в таком виде как он был набран

У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд , друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег <pre>

<pre>Этот текст будет выглядеть так как он набран</pre>

Ну вот, пожалуй, и все. Естественно, возможности для видоизменения текста с помощью тегов html довольно ограничены. В большинстве случаев этого не хватает. В этом случае, рекомендуется использовать css. CSS это аббревиатура, которая в переводе на русский означает каскадные таблицы стилей. Подробнее об этом мы поговорим в одном из следующих уроков.

Зачеркнутый текст

Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги <s> и <strike> вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег <del>.

<del>Зачеркнутый текст</del>

Визуально результат использования этого тега ничем не будет отличаться от первых двух. Тем не менее, он несет в себе несколько иной смысл. Предполагается, что этот тег используется для вычеркивания устаревшей или неправильной информации. У данного тега есть 2 атрибута:

cite — предназначен для того, чтобы содержать ссылку на документ, в котором содержится причина удаления данной информации

datetime — предназначен для того, чтобы хранить время последнего редактирования информации.

Подчеркивание текста при использовании CSS



Я довольно новичок в CSS, поэтому хочу убедиться, что правильно его реализую. Мне нужно включить пояснительный абзац на веб-странице. Мне бы хотелось, чтобы он выглядел по-другому, поэтому я включил следующее во внешний файл CSS:

div.usage { font-style: italic; margin-left... margin-right... ; }

а затем включил <div>Explanation</div> в файл HTML. Это работает, как и ожидалось.

Насколько я понимаю,при использовании CSS содержимое и макет разделяются. Как же тогда я подчеркну какой-то текст в своем объяснении? Насколько я понимаю, мне следует избегать следующего: <div>This is <u>very</u> important.</div> .

html css
Поделиться Источник SabreWolfy     17 января 2012 в 10:17

9 ответов




13

Вы правы насчет разделения контента и макета, но в этом случае я бы завернул его в тег. Тег <u/> -это хоть и устаревший,. То, что я бы использовал, это что-то вроде этого:

<div>This is <em>very</em> important.</div>

и

em { text-decoration:underline; }

<em/> означает подчеркнутый текст. По умолчанию используется курсив, поэтому в зависимости от вашего сброса CSS вам может потребоваться также сбросить шрифт-syle до нормального.

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

Поделиться Nix     17 января 2012 в 10:25



4

Как вы говорите, HTML — это содержание, а CSS-стиль. Таким образом, вам не нужно использовать стилистические материалы в вашем HTML. Действительно, когда вы мыслите в HTML, вы должны мыслить содержательно, а также семантически.

Таким образом, класс, который вы используете для вашего div.usage , очень хорошо выбран, потому что он ничего не говорит о своем стиле, но о его семантике. А как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что в семантическом смысле это текст, который вы хотите выделить, и HTML имеет хороший элемент для этого: <strong> . Затем в вашем HTML вы можете переопределить стиль браузера по умолчанию для <strong>

элементов (жирный шрифт)для подчеркивания, которое вы хотите.

<div>This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

Если вы хотите иметь этот стиль только для выделенного текста внутри вашего элемента div.usage , то будьте более конкретны:

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

Конечно, вы не хотите добавлять div в селектор (я имею в виду . usage лучше, чем div.usage ).), таким образом, вы готовы к тому, что будете кодировать, например, список или праграф с семантикой usage .

Поделиться Waiting for Dev…     17 января 2012 в 10:30



1

Свойство «text-decoration: underline» позволяет отменить выравнивание текста.

Поделиться Unknown     17 января 2012 в 10:21


  • подчеркивание поля ввода при вводе текста

    У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и проверку орфографии. Это появляется только на телефонах android jelly bean. <input type=search…

  • CSS подчеркивание меньше ширины заголовка?

    Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom: 5px; border-bottom: 1px #d2202f solid; } Это создает тонкое красное подчеркивание под моими.

    ..



1

Вы должны использовать один из этих тегов: <strong> или <em> и стилизовать их в css.

.usage strong { font-weight: bold; }

В вашем markup вы определяете некоторый контент, который вы хотите подчеркнуть (<em> ) или сильно подчеркнуть ( <strong> ). см. http://www.w3.org/TR/ html4/struct/text. html . Я бы не стал использовать подчеркивание для подчеркивания, так как это сбьет пользователей с толку, думая, что это гиперссылка.

Поделиться nickvane     17 января 2012 в 10:26



1

Просто небольшой дружеский совет: не стоит использовать подчеркивание в интернете, так как его

очень часто путают с кликабельной ссылкой.

Я бы предложил использовать

<strong>this is important</strong>

Который по умолчанию будет выделен жирным шрифтом.

Или, возможно, вы могли бы использовать желтый фон на тексте, как маркер выделения…

<p>text <span>hightlighed</span> text</p>

И положи это в свой CSS

  span.highlight {
    background-color: #FF9;
  }

Поделиться methodofaction     17 января 2012 в 10:32



0

привет для подчеркивания вы можете взять небольшой пример здесь

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

Поделиться Murtaza     17 января 2012 в 10:23



0

В наши дни люди обычно говорят, что <u> markup не следует использовать, но мало кто может подкрепить это фактологическими аргументами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных). Если вы действительно хотите подчеркнуть (что, как правило, не очень хорошая идея в документах HTML, как указано здесь), то <u> -это самый простой и надежный способ. У вас все еще была бы свобода позже решить, что вы хотите использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы могли бы сделать это просто в CSS:

u { text-decoration: none; font-weight: bold; }

Для акцентирования внимания другие методы почти всегда лучше, чем подчеркивание. Но есть ситуации, когда подчеркивание является частью обычной нотации (например, в фонетике или математике), и тогда вы можете использовать <u> (и вы не хотите полагаться на CSS).

Поделиться Jukka K. Korpela     17 января 2012 в 10:50



-1

вы можете попробовать это:

<div>This is <span>very</span> important. </div>

css:

.underline { text-decoration: underline; }

Поделиться

Adaz     17 января 2012 в 10:19



-1

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

.underline {
  text-decoration:underline;
}

<div> This is <span>very</span> important.</div>

Поделиться rahool     17 января 2012 в 10:22


Похожие вопросы:


Ограничьте подчеркивание текста

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…


CSS слишком длинное подчеркивание текста при применении интервала между буквами?

Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа.

Есть ли какой-нибудь способ сделать так,…


удаление зазора в один пиксель при использовании CSS text-decoration: подчеркивание

У меня есть следующие CSS и markup на моем сайте, которые производят подчеркивание, когда я навожу курсор на ссылку Account . По умолчанию подчеркивание отображается на один пиксель от текста. Можно…


Центрированные, подчеркнутые заголовки, где подчеркивание отличается по цвету от текста

Какой самый простой способ стилизовать заголовки HTML таким образом, чтобы они были одновременно подчеркнуты и горизонтально центрированы? Я не хочу, чтобы подчеркивание распространялось на всю…


CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…


подчеркивание поля ввода при вводе текста

У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и…


CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…


CSS: удалить подчеркивание из текста

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…


matplotlib подчеркивание текста

Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…


CSS подчеркивание исчезает при использовании непрозрачности

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…

CSS свойство text-decoration

Содержание web-сайта, в тех или иных случаях, требует оформления его части в виде подчёркнутого, перечёркнутого, а также текста с линией сверху или мигающий вариант отображения, который в прочем в настоящее время мало используется в виду не соответствия с текущими требованиями. Одновременно можно задействовать более одного стиля, перечисляя выбранные значения через пробел.

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.


HTML

<div>
  <p>
    Подчеркнутый текст.
  </p>
</div>


CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}


line-through – вывод перечеркнутого текста.


HTML

<div>
  <p>
    Перечёркнутый текст.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}


none – отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.


HTML

<div>
  <p>
    Отмена эффектов.
  </p>
</div>


CSS

. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}


Менее используемые стили

overline – отображает текст с линией поверх него.


HTML

<div>
  <p>
    Линия над текстом.
  </p>
</div>


CSS

text-decoration : overline;


blink – этот параметр задаёт пульсирующий текст.


HTML

<div>
  <p>
    Пульсирующий текст.
  </p>
</div>


CSS

text-decoration : blink;


HTML ссылки

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

Ссылки в HTML документами называются гипертекстовыми ссылками, или гиперссылками. Для их вставки используют элемент <a>. В качестве ссылки можно использовать как текст, так и изображение.

По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной. Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.

  • не посещенные ссылки: подчеркнутый текст синего цвета
  • посещенные ссылки: подчеркнутый текст фиолетового цвета
  • активные ссылки: подчеркнутый текст красного цвета

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей.

Синтаксис¶

Для того, чтобы сказать браузеру, что данная часть текста является ссылкой, необходимо поместить его в тег <a> </a>․ Адрес документа, на который следует перейти, указывается при помощи атрибута href.

Выглядит это так :

<a href="url">текст ссылки</a>.

Пример¶

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h3>Пример ссылки</h3>
       <a href="https://ru.w3docs.com/">W3Docs.com</a>
   </body>
</html>
Попробуйте сами!

Результат¶

В этом примере мы использовали тег <h3>, чтобы определить подзаголовки и тег <a>, чтобы создать ссылки. Между тегами <a> и </a> мы поместили W3Docs.com. Нажмите на него и будете перенаправлены на домашнюю страницу нашего веб-сайта.

Атрибут target¶

Для того, чтобы ссылка открывалась в новом окне, необходимо добавить атрибут target, значением которого является«_blank» .

<a href="https://ru. w3docs.com" target="_blank">W3Docs.com</a>

Не забудьте добавлять слеш (/) к ссылке.

Атрибут ID¶

Атрибут id используется для создания уникального идентификатора части документа для того, чтобы к нему можно было обращаться.

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

  1. Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее подчеркивание).
    Пример. <a> Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку. </a>
  1. Создать гиперссылку с указанием id, которому предшествует символ решетка #.
    Пример. <a href=»#пример»> Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример” </a>

Теперь давайте посмотрим, как это выглядит в коде HTML.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h3>Пример ссылки с атрибутом id</h3>
       <a>Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку </a>
        <a href="#пример">Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример”</a>
   </body>
</html>
Попробуйте сами!

Результат¶

Как добавить гиперссылку к изображению

Для того, чтобы сделать изображение кликабельным, необходимо добавить в тег <a> изображение. Делаете это при помощи тега <img>, с которым используются следующие атрибуты:

  1. src — источник изображения
  2. alt — альтернативный текст
  3. width — ширина изображения
  4. height — высота изображения

Пример¶

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
      <a href="https://ru. w3docs.com/">
           <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="logo" />
      </a>
  </body>
</html>
Попробуйте сами!

Результат¶

Кликните по изображению внизу, и вы будете перенаправлены на домашнюю страницу нашего сайта.

Об HTML изображениях мы поговорим подробнее в следующей главе.

Форматирование текста в HTML — способы и примеры

Как изменять цвет текста разбивать его на абзацы и производить выравнивание текста в HTML, мы рассмотрели в прошлых уроках.

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

Материалы по теме:

Вначале рассмотрим, каким образом можно изменять вид текста при помощи тега <font> и парного закрывающего его </font>. У тега <font> имеется несколько атрибутов. При помощи атрибута face=»» можно задать шрифт текста. Для этого между кавычек в атрибуте face=»» необходимо прописать название шрифта.

Например: <font face=»Arial»>Ваш текст</font>

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

Записывается это так: <font face=»Arial, Vernada»>Ваш текст</font>

С выбором шрифта нужно быть осторожным. Не нужно указывать различные экзотические шрифты. Потому как их просто может не оказаться на компьютере вашего посетителя. Лучше всего использовать стандартные шрифты, например Arial, Times Roman, Vernada, Tahoma.

Следующий атрибут тега <font> это size=»». При помощи данного атрибута, можно задавать размер шрифта. Для этого между кавычек необходимо указать цифру от 1 до 7.

Например: <font face=»Arial, Vernada» size=»5″>Ваш текст</font>

Кроме этого существует еще одна группа HTML тегов применяемых для форматирования текста, при помощи их текст можно выделить жирным, курсивом, подчеркнуть или зачеркнуть.

Сделать текст жирным можно при помощи тега <b> и парного закрывающего его </b>. Текст, размещенный между этими тегами, будет жирным. Кроме этого жирным текст можно сделать при помощи тега <strong> и парного закрывающего его </strong>. Для выделения ключевых слов на странице лучше пользоваться вторым тегом.

Например: <strong>Жирный текст</strong>

Сделать текст курсивом можно при помощи тега <i> и парного закрывающего его тега </i> текст, размещенный между этими двумя тегами, будет иметь наклон вправо.

Например: <i>Текст курсивом </i>

Подчеркнутый текст можно сделать при помощи тега <u> и парного закрывающего его тега </u>. Под текстом, размещенным между этими тегами, будет проходить линия.

Например: <u>Подчеркнутый текст</u>

Перечеркнутый текст можно создать при помощи тега <s> и парного закрывающего его тега </s> текст, заключенный между этими тегами, будет по центру, перечеркнут линией.

Например: <s>Перечеркнутый текст</s>

Следующий тег HTML, применяемый для форматирования текста это <big> и парный закрывающий его </big>. Текст, заключенный между этими тегами будет больше относительно основного.

Например: <big>Большой текст</big>

Тег <small> и парный закрывающий его </small> прямая противоположность тегу рассмотренному чуть выше. Текст, заключенный между этими тегами будет меньше по размеру относительно основного текста.

Например: <small>Маленький текст</small>

Ну и наконец, нам осталось рассмотреть еще два тега это теги <sup></sup>, которые определяют верхний индекс, т. е. текст, расположенный между этими тегами будет меньше по размеру и отображаться вверху относительно основного шрифта.

Например: <sup>Верхний индекс</sup>

И теги <sub></sub> определяют нижний индекс. Тест, заключенный межу эти тегами будет располагаться ниже основного текста.

Например: <sub>Нижний индекс</sub>

Вот собственно при помощи данных тегов вы можете определить тот или иной стиль шрифта и производить форматирование текста в html.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 13 Январь 2010

Просмотров: 20217

Как сделать текст жирным, курсивом, подчеркнутым и так далее.

Самоучитель HTML

Возможно с этой главы нужно было начинать, после определения основного, т.к. эта глава html самоучителя самая простая…
Да и рассказывать здесь особо нечего , а нужно сразу показывать!!! Но хотел бы обобщить эти теги только тем что они все являются контейнерами.

Как сделать текст жирным?, е просто нужно поместить в тег<b>текст</b> он же <bold>текст</bold>

Альтернативой тега B(BOLD) есть <strong>текст</strong>
Я вам немного рассказывал об оптимизации страниц, так вот, чтобы ваши страницы находили посетители нужно не только ключевой запрос вставлять в тег TITLE и h2(h3), но и хотя-бы 2-3 раза повториться на странице и плюс к этому попытаться сделать словосочетания из ключевого запроса, а потом выделить эти запросы жирным или строгим(strong), это повышает шансы вашего сайта на поисковую выдачу.

Как сделать текст подчеркнутый?, его помещаем в тег <U>текст</U>

Как сделать текст курсивом?, его нужно поместить тег контейнер <i>текст</i>

Чтобы текст был перечеркнутый его нужно поместить в тег <S>текст</S>

Как сделать текст больше базового без тега FONT?, при помощи тега <big>текст</big>

Так-же текст можно сделать немного меньше базового при помощи тега <small>текст</small>

Так же есть возможность сделать моноширинный текст <tt>текст</tt>

Чтобы текст был немного выше его нужно поместить в тег-контейнер <sup>текст</sup>, зачем это нужно? например чтобы написать формулу воды H2O

Так-же есть тег для нижнего индекса(под индекс) текста <sub>текст</sub>, например: 3/4

Подобных тегов намного больше, но с остальными также проблема что и с тегом <BASEFONT>, т. е. содержимое этих тегов каждый пользовательский агент отображает по разному…

Я вам демонстрировал эти теги по одиночке, но этого делать не обязательно, можно к одному участку текста использовать несколько тегов:
Этот текст <B> будет жирным, <tt> шрифт как у пишущей машинки, <u> здесь подчеркнут</u>, <s> а здесь перечеркнут</s> </tt> </B>
Результат:
Этот текст будет жирным, шрифт как у пишущей машинки, здесь подчеркнут, а здесь перечеркнут
Обратите внимание как правильно закрывать теги, главное чтобы они не пересекались!!!

Теги форматирования текста в HTML

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

<strong> — важный фрагмент текста, жирный;
<em> — акцентирование внимания, курсив;
<mark> — подсвеченный участок текста;
<b> — жирный шрифт;
<i> — курсив, наклонный шрифт;
<s> — зачеркнутый текст;
<small> — текст меньшего размера;
<sup> — верхний индекс;
<sub> — нижний индекс;
<pre> — предварительно отформатированный текст;
<dfn> — термин;
<h2> — <h6> — заголовки;
<q> — короткая внутристрочная цитата;
<blockquote> — цитата;
<cite> — сноска на название материала;
<code> — программный код;
<samp> — результат вывода компьютерной программы;
<kbd> — клавиатурный ввод;
<var> — переменная компьютерной программы. ;
<time> — дата и/или время.

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Теги выделения фрагментов текста

Тег <strong> используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега <strong> жирным шрифтом. <strong> — тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.

<strong>Важный фрагмент текста</strong>

Тег <em> используется для акцентирования внимания, «подчеркивания» фрагмента текста. Браузеры обычно отображают текст внутри тега <em> курсивом. <em> — тег логического выделения.

<em>Акцентированный фрагмент</em>

Тег <mark> используется для подсветки фрагмента текста.

<mark>Подсвеченный фрагмент</mark>

Тег <b> используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег <b> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<b>Текст жирным шрифтом</b>

Тег <i> используется для написания текста курсивом. Используйте тег <i> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<i>Текст курсивом</i>

Тег <s> используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега <s> выводится перечеркнутым.

<s>Перечеркнутый текст</s>

Тег <small> используется для написания текста шрифтом меньшего размера.

<small>Текст меньшего размера</small>

Тег <sub> используется для создания текста нижнего индекса.

<sub>Текст нижнего индекса</sub>

Тег <sup> используется для создания текста верхнего индекса.

<sup>Текст верхнего индекса</sup>

Тег <pre> указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.

<pre>Предварительно отформатированный текст</pre>

Теги устанавливающие суть содержимого

Теги <h2> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h2> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

<h2>Заголовок</h2>

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

<dfn>Термин</dfn>

Тег <q> используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.

<q>Короткая цитата</q>

Тег <blockquote> указывает, что содержимое является цитатой. Содержимое тега выводится в отдельном блоке.

<blockquote>Цитата</blockquote>

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

<cite>Название материала</cite>

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

<code>Код компьютерной программы</code>

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

<samp>Результат вывода компьютерной программы</samp>

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

<kbd>Клавиатурный ввод</kbd>

Тег <var> указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега <var> курсивом.

<var>Переменная компьютерной программы</var>

Тег <time> указывает, что содержимое является датой, временем, периодом времени или событием, относящемся к указаному в атрибуте datatime времени.

<time>Дата и/или время</time>

: элемент неартикулированной аннотации (подчеркивание) — HTML: язык разметки гипертекста

HTML-элемент представляет собой диапазон встроенного текста, который должен отображаться таким образом, чтобы указать, что он имеет нетекстовую аннотацию. По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.

Этот элемент раньше назывался элементом «Подчеркнутый» в старых версиях HTML, и до сих пор иногда используется неправильно.Чтобы подчеркнуть текст, вы должны вместо этого применить стиль, который включает свойство CSS text-decoration , для которого установлено значение underline .

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

Наряду с другими элементами чистого стиля, исходный элемент подчеркивания HTML ( ) объявлен устаревшим в HTML 4; однако был восстановлен в HTML 5 с новым семантическим значением: пометить текст как имеющий некоторую форму нетекстовой аннотации.

Будьте осторожны, избегайте использования элемента с его стилем по умолчанию (подчеркнутого текста) таким образом, чтобы его можно было спутать с гиперссылкой, которая также по умолчанию подчеркнута.

Сценарии использования

Допустимые варианты использования элемента включают аннотирование орфографических ошибок, применение метки имени собственного для обозначения имен собственных в китайском тексте и другие формы аннотации.

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

Другие элементы, которые следует учитывать при использовании

В большинстве случаев следует использовать элемент, отличный от , например:

  • для обозначения акцента напряжений
  • , чтобы привлечь внимание к тексту
  • <отметка> для обозначения ключевых слов или фраз
  • указывает на важность текста
  • для обозначения названий книг или других публикаций
  • для обозначения технических терминов, транслитерации, мыслей или названий судов в западных текстах

Чтобы предоставить текстовые аннотации (в отличие от нетекстовых аннотаций, созданных с помощью ), используйте элемент .

Чтобы применить подчеркнутый внешний вид без какого-либо семантического значения, используйте значение свойства text-decoration underline .

Указывает на орфографическую ошибку

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

HTML
  

Этот абзац включает предупреждение написанное слово.

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

CSS
  u.spelling {
  оформление текста: красное волнистое подчеркивание;
}  

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

Результат

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

Избегайте

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

Несемантическое подчеркивание

Чтобы подчеркнуть текст без какого-либо семантического значения, используйте элемент со свойством text-decoration , установленным на «подчеркивание» , как показано ниже.

HTML
   Сегодняшнее специальное предложение 

Куриный суп с лапшой и морковью
CSS
  . underline {
  оформление текста: подчеркивание;
}  
Результат
Представляем название книги

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

HTML
  

Класс прочитал Моби Дик в первом семестре.

Результат со стилем по умолчанию

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

  cite {
  стиль шрифта: нормальный;
  оформление текста: подчеркивание;
}  
Результат с нестандартным стилем

таблицы BCD загружаются только в браузере

HTML-тег »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает тег HTML ?
Элемент изначально использовался для обозначения текста, который должен быть подчеркнут. Этот элемент устарел в HTML 4.01, но в HTML5 он был переопределен для представления текста, который должен отображаться в виде неартикулированного , но стилистически отличного от окружающего текста. Например, одним из правильных способов использования элемента является определение терминов с ошибками.
Дисплей
встроенный
Использование
семантика

Пример кода

  

Вот слово, которое подчеркнуто с помощью & lt; u & gt; элемент.

Вот слово, которое подчеркнуто с помощью CSS.

Вот слова, окруженные тегами & lt; u & gt; со стилем без артикуляции, но с явным отображением .

<стиль> .underline { оформление текста: подчеркивание; } u.unarticulated { текстовое оформление: нет; цвет: # 000080; стиль шрифта: курсив; }

Вот слово , подчеркнутое элементом .

Вот слово, подчеркнутое с помощью CSS.

Вот слова, окруженные тегами с неартикулированными, но явно визуализированными стилями .

Когда использовать элемент

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

Это означает, что старые теги, такие как , которые изначально были задуманы с расчетом на представление, должны быть переделаны с семантическим значением или исключены и удалены из спецификации HTML.

Итак, какое семантическое значение этот элемент передает в современном HTML? В соответствии со спецификацией HTML5, опубликованной W3C:

Элемент u представляет собой отрезок текста с неартикулированной, хотя и явно визуализированной нетекстовой аннотацией…

Вы сожалеете, что даже спросили, не так ли? Давайте немного поясним это определение.

Во-первых, что такое нетекстовая аннотация? Что ж, добавить аннотацию — значит добавить пояснение или примечание. Однако в этом случае аннотация не является текстовой, что означает, что аннотация не имеет ничего общего с содержанием текста.

Во-вторых, аннотация — это неартикулированная , но явно отрисованная. Другими словами, браузер и веб-разработчик могут выбрать отображение аннотации любым способом. По умолчанию браузеры будут отображать текст, окруженный тегами и , как подчеркнуто, но это не обязательно и не является частью спецификации HTML.Аннотации должны выглядеть так: unarticulated , покажите как хотите. Просто убедитесь, что аннотацию легко заметить, другими словами: явно отрисовано .

Давайте сложим по кусочкам. Элемент и используется для:

  • Добавить аннотацию, которая сообщает нам что-то о самом выделенном тексте, а не о содержании или сообщении текста.
  • Способ добавления аннотации не артикулирован. Слова между тегами и не должны быть подчеркнуты, любой метод аннотации приемлем, если…
  • Аннотации должны быть явно отображены, то есть: их легко заметить.

Итак, какие варианты использования существуют для такого нишевого тега? Чаще всего используется для определения слов с ошибками. Допустим, вы представляете текст, который содержит слова с намеренными ошибками, которые должны броситься в глаза читателю. Элемент будет отличным выбором для идентификации этих слов.

Адам — ​​технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.

Как подчеркнуть текстовое содержимое с помощью HTML?

Как подчеркнуть текстовое содержимое с помощью HTML?

В этой статье мы создадим подчеркнутый текст с помощью тега в документе.Он обозначает подчеркивание и используется для подчеркивания текста, заключенного в тег . Этот тег обычно используется для подчеркивания слов с ошибками. Для этого тега требуется как начальный, так и конечный тег.
Синтаксис:

  Содержание ...  

Пример 1: В этом примере тег используется для создания подчеркнутого текста.

html

< html >

000 000 0004 >

Как подчеркнуть текст

содержимое с помощью HTML?

название >

< стиль >

текст по центру текст по центру

}

.gfg {

font-size: 40px;

font-weight: жирный;

цвет: зеленый;

}

.geeks {

font-size: 25px;

font-weight: жирный;

}

p {

font-size: 20px;

}

стиль >

головка >

000 000

000 000 корпус < div класс = "gfg" >

GeeksforGeeks

000 000 000 000 div class = "вундеркиндов" >

HTML5: Как подчеркнуть текст

в документе HTML

< п >

9 0005 GeeksforGeeks: A < u > компьютер

наука u > портал для компьютерных фанатов

body >

html >

Выход:

Пример: 2 тег для подчеркивания текста.В этом примере мы будем использовать свойство CSS text-decoration для подчеркивания текстового содержимого.



html

0

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Как выделить жирным шрифтом, курсивом и иным образом отформатировать текст в HTML

Работая почти исключительно в Google Docs и CMS Hub, я привык возможность выделять жирным шрифтом, курсивом и подчеркивать текст одним нажатием кнопки.

Но что, если ваша панель инструментов не предлагает тот вариант форматирования, который вам нужен? Или вы не работаете в текстовом редакторе или системе управления контентом?

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

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

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

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

На снимке экрана ниже показано введение из книги «Наиболее важные различия между Squarespace и WordPress».Обратите внимание, что «Squarespace» и «WordPress» выделены жирным шрифтом. Это помогает выделить основную тему сообщения в блоге и отличает эти два ключевых слова от неформатированных абзацев, а также от форматированной внутренней ссылки и CTA.

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

Как выделить текст в HTML полужирным шрифтом

Есть несколько способов выделить текст в HTML полужирным шрифтом.Вы можете использовать сильный тег, чтобы указать, что текст имеет большую важность или срочность. Браузеры прочитают этот тег и выделят текст полужирным шрифтом. Если вы хотите выделить текст полужирным шрифтом просто для украшения, вы должны использовать свойство CSS font-weight и установить для этого свойства значение «полужирный».

Есть еще один способ выделить текст в HTML полужирным шрифтом: тег . Но это должно использоваться только в крайнем случае, потому что это может затруднить локализацию контента и будущую проверку в соответствии со спецификацией HTML5.По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.

Как выделить текст в HTML полужирным шрифтом с помощью сильного элемента

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

Вот HTML:

  

Использование сильного элемента HTML

Это нормальный абзац.

Этот абзац очень важен!


Вот результат:

Источник изображения

Как выделить текст в HTML полужирным шрифтом с помощью свойства CSS Font-Weight

Если вы хотите просто выделить текст жирным шрифтом для украшения, вы должны использовать свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце жирным шрифтом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-weight только к элементу span.

Вот код CSS:

  
span {

font-weight: жирный;

}

Вот HTML:

  

Использование свойства CSS Font-Weight

Это ключевое слово , поэтому я хочу выделить его жирным шрифтом с помощью CSS.


Вот результат:

Источник изображения

Как выделить текст в HTML курсивом

Есть несколько способов выделить текст в HTML курсивом.Вы можете использовать тег em, чтобы указать, что в тексте выделено ударение. Браузеры прочитают этот тег и выделят текст курсивом. Если вы хотите выделить текст курсивом просто для украшения, вы должны использовать свойство CSS font-style и установить для этого свойства значение «курсив».

Есть еще один способ выделить текст в HTML курсивом: тег . Как и тег , он предназначен для использования в крайнем случае. По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.

Как выделить текст в HTML курсивом с помощью элемента акцента

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

Вот HTML:

  

Использование элемента выделения HTML

Это нормальный абзац.

Этот абзац выделен!


Вот результат:

Источник изображения

Как выделить текст в HTML курсивом с помощью свойства стиля шрифта CSS

Если вы хотите просто выделить текст курсивом для украшения, вы должны использовать свойство CSS font-style вместо элемента выделения HTML.Следуя приведенному выше полужирному примеру, скажем, вы хотите выделить слово в абзаце курсивом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-style только к элементу span.

Вот код CSS:

  
span {

шрифт: курсив;

}

Вот HTML:

  

Использование свойства CSS Font-Style

Иди в школу сейчас !

Я хотел, чтобы читатель услышал это слово другим тоном, поэтому я выделил его курсивом с помощью CSS.


Вот результат:

Источник изображения

Как подчеркнуть текст в HTML

Чтобы подчеркнуть текст в HTML, используйте свойство CSS text-decoration и установите для этого свойства значение «подчеркивание».

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

Рассмотрим оба метода ниже.

Как подчеркнуть текст в HTML с помощью неартикулированного элемента аннотации

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

Вот HTML:

  

Использование неартикулированного элемента аннотации HTML

В этом абзаце нет орфографической ошибки.

В этом абзаце есть орфографические ошибки .


Вот результат:

Источник изображения

Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration

Если вы хотите подчеркнуть текст для украшения, а не для представления нетекстовой аннотации, вы должны использовать свойство CSS text-decoration. Вы также можете использовать это свойство для представления орфографической ошибки, как это делает текстовый процессор.

Поскольку text-decoration является сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, вы можете подчеркнуть орфографическую ошибку красной волнистой линией, а грамматическую ошибку - зеленой. Например.

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

Вот код CSS:

  
.орфография {

text-decoration: # FF0000 волнистое подчеркивание;

}

.grammar {

оформление текста: # 008000 волнистое подчеркивание;

}

Вот HTML:

  

Использование свойства CSS Text-Decoration

В этом абзаце есть орфографические ошибки .

В этом абзаце есть грамматическая ошибка .


Вот результат:

Источник изображения

Как отрисовать зачеркнутый текст в HTML

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

Если вы хотите, чтобы текст был зачеркнут по другой причине, вы должны использовать свойство CSS text-decoration-line и установить для этого свойства значение «line-through».

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

Давайте посмотрим на примеры трех методов, поддерживаемых в текущей версии HTML.

Как зачеркнуть текст в HTML с помощью зачеркнутого элемента

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

Вот HTML:

  

Использование зачеркнутого HTML-элемента

Есть еще несколько лепешек.

ПРОДАНО


Вот результат:

Источник изображения

Как зачеркнуть текст в HTML с помощью удаленного текстового элемента

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

Вот HTML:

  

Использование удаленного текстового элемента HTML

Событие начинается с 7 p.м. ET 18:00 ET. Приносим извинения за ошибку.


Вот результат:

Источник изображения

Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line

Если вы хотите зачеркнуть текст для другой цели, вы должны использовать свойство CSS text-decoration-line.

В приведенном ниже примере мы включим имена классов рядом с некоторыми элементами списка. Таким образом, мы можем применить свойство text-decoration-line к этим конкретным позициям, а не ко всему списку.

Вот код CSS:

  
.purchased {

text-decoration-line: line-through;

}

Вот HTML:

  

Использование свойства CSS Text-Decoration-Line

Список покупок

  • Халапеньо
  • Сумка замороженной кукурузы
  • сыр Cotija
  • Mayo
  • Chili Powder
  • Cilantro
  • Лайм

Вот результат:

Источник изображения

Как сделать текстовый индекс в HTML

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

Для создания подстрочного текста в HTML используйте элемент . Ниже приведен пример, показывающий формулу создания угольной кислоты.

Вот HTML:

  

Использование элемента нижнего индекса HTML

Вот как это выглядит с тегом нижнего индекса.

CO 2 + H 2 O ↔ H 2 CO 3

Вот как это выглядит без нижнего тега.

CO2 + h3O ↔ h3CO3


Вот результат:

Источник изображения

Как сделать текстовый надстрочный индекс в HTML

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

Чтобы создать надстрочный текст в HTML, используйте элемент .Ниже приведен пример, который показывает всю формулу создания бикарбонат-иона.

Вот HTML:

  

Использование верхнего индекса HTML

Вот как это выглядит с тегами нижнего и верхнего индекса.

CO 2 + H 2 O ↔ H 2 CO 3 ↔ H + + HCO 3 -

Вот как это выглядит без тегов.

CO2 + h3O ↔ h3CO3 ↔ H + + HCO3


Форматируя текст любым из описанных выше способов, вы можете помочь своим читателям лучше понять и сохранить информацию с вашего сайта. Если вы хотите выделить ключевые слова жирным шрифтом или включить подстрочный индекс в химические формулы, форматирование текста требует только базовых знаний HTML и CSS.

Как подчеркивание в тексте может улучшить UX

Подчеркивание - это горизонтальная линия, расположенная непосредственно под частью текста.В повседневной жизни мы подчеркиваем, чтобы выделить ключевые части текста, иногда рисуя подчеркивание вручную под напечатанным текстом. Но у подчеркивания есть свое место в мире цифрового дизайна. Фактически, подчеркнутый текст стал одной из самых распространенных и узнаваемых особенностей нашего онлайн-опыта. Когда мы видим подчеркнутое слово или предложение на веб-странице, мы сразу же принимаем это за ссылку.

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

Исторический контекст

Текст подчеркивался еще до изобретения Интернета. Его использовали дизайнеры полиграфии, чтобы выделить важные части текста.

Изображение Marcin Wichary

Было использовано в рекламе.

Реклама Wrigley’s Spearmint (1915 г.).

Мы даже находим это в нашем ближайшем окружении.

Некоторые дорожные знаки с важной информацией содержат подчеркнутый текст. Изображение Тайлера Б.

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

Подчеркивание ссылок

Когда Тим Бернерс-Ли впервые представил концепцию Всемирной паутины в 1991 году, он заявил: «[Всемирная паутина] состоит из документов и ссылок». С тех пор ссылки стали фундаментальным элементом онлайн-опыта, клеем, скрепляющим Интернет.

Набор инструментов первых веб-дизайнеров был слишком ограничен - только простые шрифты и ограниченное количество цветов (цветные мониторы отображали только 16 цветов, а многие были только черно-белыми).Но акцент на ссылках с другим стилем был необходим, чтобы ранние последователи могли понять, какие элементы на странице важны. Самым простым решением было подчеркнуть. С тех пор подчеркивание текста стало стандартным украшением гиперссылок HTML. И хотя дизайнеры пробовали разные стили для ссылок в течение последних 30 лет, многие веб-дизайнеры по-прежнему отдают предпочтение подчеркиванию.

Гиперссылка, подчеркнутая синим цветом, является одним из наиболее широко понимаемых правил Интернета. Изображение Cern

Подчеркнутые ссылки имеют несколько основных преимуществ.

  • Знакомство. Подчеркивание - это одно из наиболее широко понимаемых в Интернете правил. Подчеркивание обеспечивает очевидную возможность кликабельности - подавляющее большинство пользователей понимают, что подчеркнутый текст является ссылкой.
  • Возможность сканирования. Подчеркнутый текст - отличный визуальный сигнал, который гарантирует видимость ссылки при сканировании текста. Когда мы сканируем страницы по вертикали, любая горизонтальная линия будет проходить прямо через линию нашего обзора. Подчеркивание направляет пользователей к важной информации во время беглого просмотра.
  • Доступность. Когда для различения интерактивных элементов используется только цвет, у некоторых групп пользователей (например, дальтоников) могут возникнуть проблемы с идентификацией ссылок. Согласно WCAG 2.0, цвет не должен быть единственным визуальным индикатором потенциального действия. Если вы хотите, чтобы ваш веб-сайт был доступен, вам придется добавить еще одну визуальную подсказку к ссылкам, и подчеркивание - логичный выбор.

Несмотря на все свои преимущества, подчеркивание может в некоторой степени затруднить взаимодействие с пользователем.

  • Читаемость. Прерывистый характер подчеркивания отлично подходит для беглого бега, но может повлиять на удобочитаемость. Исследование Гамбургского университета показывает, что подчеркивание пагубно влияет на читаемость текста. Основываясь на исследовании, избегайте подчеркивания, когда основная цель содержания - понимание.
  • Эстетика. Подчеркивание добавляет визуального шума к тексту и общему дизайну. Большое количество подчеркиваний, распространенных по всему блоку текста, может сделать вид занятым.

Создание идеального подчеркивания

Прежде чем мы углубимся в детали создания идеального подчеркивания, стоит определить нашу цель. Мы хотим создать заметное, но ненавязчивое подчеркивание. Пользователи должны понимать, что элемент является интерактивным - когда они его видят, они должны сразу понимать, что это ссылка, но он не должен привлекать к себе слишком много внимания или выделяться.

Не подчеркивайте текст, не являющийся ссылкой.

Не подчеркивайте текст, не являющийся ссылкой (даже если ваши ссылки не подчеркнуты).Подчеркивание обеспечивает очевидную возможность кликабельности, и пользователи будут сбиты с толку и расстроены, если подчеркнутый текст не соответствует их ожиданиям. Если вам нужно выделить определенные слова или предложения, гораздо безопаснее использовать курсив или полужирный шрифт.

Будьте краткими

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

Сделайте текст привязки осмысленным

Текст привязки - это интерактивный текст в ссылке.Он должен быть описательным - пользователи должны уметь предугадывать, что они получат, щелкнув ссылку. По этой причине избегайте якорного текста, такого как «щелкните здесь», потому что он почти ничего не говорит о содержании ссылки и заставляет пользователей искать дополнительную информацию о том, на что именно они будут нажимать. Ссылки «Щелкните здесь» также делают веб-сайт менее доступным для людей, использующих программы чтения с экрана. Большинство программ чтения с экрана говорят «ссылка» перед каждой ссылкой. Например, ссылка «автомобили» будет прочитана JAWS как «ссылочные автомобили».Таким образом, вы можете ожидать, что JAWS прочитает ссылку «нажмите здесь» как «ссылку нажмите здесь», что совершенно неинформативно.

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

Само по себе «щелкнуть здесь» совершенно бессмысленно. Вторая ссылка устанавливает ожидание того, что пользователь получит, щелкнув ссылку.

Последовательное проектирование ссылок

Последовательность - ключ к обучению пользователей тому, как ссылки выглядят на вашем веб-сайте.Не должно быть ситуации, когда некоторые ссылки на вашем веб-сайте подчеркнуты, а некоторые - нет. Использование разных визуальных обозначений на разных страницах может легко запутать посетителей. Выберите дизайн ссылки и придерживайтесь его.

Согласованность дизайна важна не только для небольших веб-сайтов. Например, разные разделы веб-сайта CNN имеют разные стили для ссылок. В стиле CNN используется подчеркнутый текст.

Все ссылки в статье подчеркнуты (см. Пример «Давид де Руэда»).Между тем CNN Sport использует цвет, чтобы визуально различать ссылки. Все ссылки в статье визуально разделены другим цветом (см. «ЧИТАЙТЕ: Внутри Кодокана - духовного дома дзюдо»).

Избегайте сбоев устройства опускания

Отказ устройства опускания - это, пожалуй, вторая по значимости проблема, вызванная подчеркиванием (после беспорядка). Это происходит, когда символы, содержащие нижние элементы (например, строчные p, g, j, y и q), не учитываются, а подчеркивание касается букв.Это может привести к беспорядку и уродливому виду и сделать текст менее разборчивым.

Нижние элементы y, g и p врезаются в подчеркивание, что ухудшает читаемость.

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

Вот пример подчеркнутого текста в Adobe XD. Подчеркивание используется только там, где оно не касается глифа и не приближается к нему.

Как предотвратить сбой устройства для спуска? Ссылки в Интернете имеют свойство text-decoration - по умолчанию подчеркивание CSS.К сожалению, это свойство не учитывает нижние элементы.

Среди решений, решающих эту проблему, самым простым является свойство CSS text-decoration-skip. Он указывает, какие части содержимого элемента следует пропускать при оформлении текста. Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.

Свойство text-decoration-skip пока поддерживается не всеми браузерами. Альтернативы (такие как box-shadow) стоит изучить, если ваш текст трудно читать без него.

Если ваш браузер поддерживает свойство пропуска оформления текста, вы заметите, что нижние элементы (например, y и p) имеют небольшое белое пространство вокруг них.

Color

Color - мощный инструмент в наборе дизайнеров. Его можно использовать, чтобы отличать ссылки от другого текста.

Избегайте раскрашивания неинтерактивного текста

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

Ссылки должны быть синими?

Не обязательно.По словам Якоба Нильсена, «оттенки синего обеспечивают самый сильный сигнал для ссылок, но другие цвета работают почти так же». Однако, если вы можете выбрать цвет для ссылок, лучше всего всегда будет синий. Это по-прежнему цвет с самой сильной предполагаемой возможностью кликабельности - опытный веб-пользователь ассоциирует «синий и подчеркнутый» со ссылками. И у цвета есть одно существенное преимущество перед другими - он наиболее доступен для людей с дефицитом цвета (его могут видеть люди, страдающие протанопией и дейтеранопией).

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

Используйте разные цвета для посещенных и непосещенных ссылок

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

Не подчеркивать списки ссылок

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

Нет необходимости подчеркивать каждый элемент в этом списке. Изображение Wisegeek.

Рекомендации для мобильных устройств

Сегодня почти 50 процентов пользователей выходят в Интернет с мобильных устройств. Оптимизация работы в Интернете для мобильных пользователей - главный приоритет веб-дизайнеров.

Избегайте ссылок в мобильных приложениях

Не используйте подчеркнутые ссылки в мобильных приложениях. Подчеркнутые ссылки являются частью модели веб-сайта, а не модели приложения. В приложениях должны быть кнопки, а не ссылки. Приложение

TD Bank для iOS.

Сделайте ссылки достаточно большими

Использование большого пальца для нажатия ссылок может быть болезненным, особенно если у вас возникли проблемы с обнаружением ссылки, а затем вам нужно увеличить масштаб, чтобы нажать на нее. На сенсорном экране размеры объектов имеют решающее значение. Делайте интерактивные элементы достаточно большими, чтобы их было легко увидеть и с ними было легко взаимодействовать.

Заключение

Ссылки делают Интернет тем, чем он является. В своей классической книге по юзабилити Не заставляйте меня думать Стив Круг пишет: «Поскольку большая часть того, что люди делают в Интернете, - это поиск следующего объекта, на который нужно щелкнуть, важно сделать очевидным, на что можно нажать а что нет ». Надежный визуальный дизайн важен для того, чтобы сделать путешествие пользователя приятным. Хотя у подчеркивания есть свои недостатки, оно остается одним из наиболее явных способов указать на наличие ссылки.Подчеркивание текста упрощает поиск и понимание ссылок для посетителей.

Как изменить подчеркивание HTML-ссылки на веб-странице

Что нужно знать

  • Удалите подчеркивание в текстовых ссылках с помощью свойства CSS text-decoration, набрав a {text-decoration: none; } .
  • Измените подчеркивание на точки с помощью свойства стиля border-bottom a {text-decoration: none; нижняя граница: 1px с точками; } .
  • Измените цвет подчеркивания, набрав a {text-decoration: none; нижняя граница: сплошной красный 1px; } .Замените сплошной красный другим цветом.

В этой статье объясняется несколько способов использования CSS для изменения внешнего вида текстовых ссылок на веб-странице по умолчанию, удалив подчеркивание, изменив его на пунктирную линию или изменив его цвет. Дополнительная информация включена для замены подчеркивания пунктирной линией или двойным подчеркиванием.

Как удалить подчеркивание в текстовых ссылках

По умолчанию в веб-браузерах есть определенные стили CSS, которые они применяют к определенным элементам HTML.Если вы не перезаписываете эти значения по умолчанию собственными таблицами стилей вашего сайта, то применяются значения по умолчанию. Для гиперссылок стиль отображения по умолчанию заключается в том, что любой связанный текст выделяется синим цветом и подчеркивается. При желании вы можете изменить внешний вид этих подчеркиваний или полностью удалить их со своей веб-страницы.

Чтобы удалить подчеркивание из текстовых ссылок, используйте свойство CSS text-decoration. Вот CSS, который вы пишете для этого:

а {текст-украшение: нет; } 
class = "ql-syntax">

С помощью этой единственной строки CSS вы удаляете подчеркивание со всех текстовых ссылок на своей веб-странице.Несмотря на то, что это очень общий стиль (в нем используется селектор элементов), он все же имеет большую специфичность, чем стили браузеров по умолчанию. Поскольку именно эти стили по умолчанию создают подчеркивание с самого начала, это то, что вам нужно перезаписать.

Предупреждение об удалении подчеркивания

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

Не подчеркивать не ссылки

Еще одно предостережение относительно ссылок и подчеркиваний: не подчеркивайте текст, который не является ссылкой, чтобы подчеркнуть его. Люди привыкли ожидать, что подчеркнутый текст будет ссылкой, поэтому, если вы подчеркиваете контент, чтобы добавить акцента (вместо того, чтобы делать его жирным или курсивом), вы отправляете неправильное сообщение и запутаете пользователей сайта.

Как изменить подчеркивание на точки или тире

Если вы хотите сохранить подчеркивание текстовой ссылки, но изменить стиль подчеркивания по умолчанию, то есть «сплошная» линия, вы тоже можете это сделать. Вместо этой сплошной линии вы можете использовать точки, чтобы подчеркивать ссылки. Для этого вы все равно удалите подчеркивание, но замените его свойством стиля border-bottom:

а {текст-украшение: нет; нижняя граница: 1px с точками; } 

Поскольку вы удалили стандартное подчеркивание, появляется только пунктирная линия.

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

а {текст-украшение: нет; нижняя граница: пунктирная линия 1px; } 

Как изменить цвет подчеркивания

Еще один способ привлечь внимание к своим ссылкам - изменить цвет подчеркивания. Просто убедитесь, что цвет соответствует вашей цветовой гамме.

а {текст-украшение: нет; нижняя граница: сплошной красный 1px; } 

Двойное подчеркивание

Уловка использования двойных подчеркиваний заключается в том, что вам нужно изменить ширину границы.Если вы создадите границу шириной 1 пиксель, вы получите двойное подчеркивание, которое выглядит как одинарное подчеркивание.

а {текст-украшение: нет; нижняя граница: 3px двойной; } 

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

{border-bottom: 1px двойной; } 

Не забывайте о состояниях связи

Вы можете добавить стиль нижней границы к своим ссылкам в разных состояниях, таких как: hover,: active или: посещено.Это может создать для посетителей приятный опыт в стиле «наведения», когда вы используете псевдокласс «hover». Чтобы при наведении курсора на ссылку появлялась вторая пунктирная линия подчеркивания:

а {текст-украшение: нет; } 
a: hover {border-bottom: 1px с точками; }

Что такое подчеркивание?

Обновлено: 12.04.2021, Computer Hope

Подчеркнутый может относиться к любому из следующего:

1. Подчеркнутый - это фрагмент текста в документе, под словами которого проходит линия.Например, , этот текст должен быть подчеркнут . Подчеркнутый текст обычно используется для привлечения внимания к тексту. Сегодня подчеркивание обычно используется для обозначения гиперссылки на веб-странице.

Что такое клавиша подчеркивания?

На клавиатуре компьютера клавиша подчеркивания отсутствует. Однако некоторые пользователи могут называть клавишу подчеркивания клавишей подчеркивания. Инструкции по подчеркиванию текста см. В следующих разделах.

Создать подчеркнутый текст в HTML

Чтобы создать подчеркивание в HTML, вы можете использовать тег или CSS.Однако, как упоминалось ранее, имейте в виду, что большинство людей связывают подчеркивание с гиперссылкой, и любой другой подчеркнутый текст может сбивать с толку.

Этот текст должен быть подчеркнут

Создание подчеркивания текста в текстовом процессоре, например Microsoft Word

Ниже приведены общие шаги по созданию подчеркнутого текста в текстовом редакторе, таком как Microsoft Word, Google Docs или LibreOffice Writer.

  1. Выделите текст, который нужно подчеркнуть.
  2. Нажмите кнопку U , которая часто находится рядом с кнопками B и I , выделенными жирным шрифтом и курсивом, как показано на рисунке.

Как удалить подчеркивание в текстовом процессоре

Ниже приведены инструкции по удалению подчеркивания текста в текстовом редакторе, таком как Microsoft Word, Google Docs или LibreOffice Writer.

  1. Выделите весь или часть подчеркнутого текста.
  2. Нажмите кнопку U , которая часто находится рядом с кнопками B и I, выделенными жирным шрифтом и курсивом, как показано на рисунке.
Кончик

Сочетание клавиш для подчеркивания текста часто: Ctrl + U на ПК и Command + U на Mac.

2. Линия также может быть подчеркнута волнистой линией, чтобы указывать на ошибки в документе. Здесь изображены три подчеркивания разного цвета в документе Microsoft Word.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован.

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

< html >

000 > 000 title >

Как подчеркнуть текст

контент с помощью HTML?

название >

< стиль >

текст по центру текст по центру

}

.gfg {

font-size: 40px;

font-weight: жирный;

цвет: зеленый;

}

.geeks {

font-size: 25px;

font-weight: жирный;

}

p {

font-size: 20px;

}

интервал {

текстовое оформление: подчеркивание;

}

стиль >

головка >

000 000

000

000 000

000

000 < div класс = "gfg" >

GeeksforGeeks

000 000 000 div class = «компьютерщиков» >

HTML5: как подчеркнуть

текст в документе HTML

000

< п >

9 0005 GeeksforGeeks: A < span >

информатика span >

портал для geeks 000 000 9000 >

body >

html >