Тег html подчеркнутый текст в: Тег | htmlbook.ru

13.10.1975 Разное

Содержание

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

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

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

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

<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
  <h2>Заголовок 1-го уровня</h2>
</body>
</html>

Собственно, здесь уже имеются элементы форматирования: тег <h2>, который делает текст внутри тега крупным, более того, это идёт, как заголовок, поэтому дальнейшие элементы располагаются уже под ним. Также мы здесь задали цвет текста (green) в атрибуте

text тега <body>.

Теперь поговорим о других возможностях по форматированию текста.

Первое, что можно сделать — это узнать, как сделать различный вид текста: курсив, подчёркнутый, жирный и различные комбинации.

Начнём с курсива. Текст будет курсивным, если он находится внутри тега <i>. Поэтому давайте напишем так:

<i>Это курсив</i>

Если Вы запустите браузер, то Вы сможете увидеть текст в виде курсива.

Также текст может быть жирным. Делается это с помощью тега <b>. Например, так:

<b>Это жирное начертание</b>

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег <u>.

<u>Подчёркнутый текст</u>

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

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

Также можно записать и так:

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

Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным. Суть, думаю, понятна. Единственное правило, но ОЧЕНЬ важное правило — это соблюдать принцип вложенности. То есть сначала закрываются все внутренние теги, и только потом закрываются внешние теги. Таким образом, НЕЛЬЗЯ писать так:

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

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

, соблюдение которого обязательно!

Теперь поговорим о размере шрифта текста. Изменить размер текста можно с помощью тега <font>, а, точнее, с помощью его атрибута «size«, значение которого и означает размер шрифта. Давайте перейдём на следующую строку с помощью тега <br> и напишем такую строчку:

<font size = "5">Это текст c size = "5"</font>

Обновив страницу в браузере, Вы увидите, что текст стал крупнее, чем раньше. Это и сделал атрибут «size» тега <font>. Чем больше значение атрибута «size«, тем крупнее шрифт, впрочем, думаю, что Вам это очевидно.

Цвет текста можно задавать также с помощью тега <font>, так как у этого тега имеется ещё один атрибут — «color«. Значение данного атрибута может быть любой цвет. Давайте напишем так:

<font size = "5" color = "red">Это увеличенный красный текст</font>

Вот это и были основные способы по изменению внешнего вида текста.

Напоследок, напишем строчку, в которой намешано абсолютно всё, что мы сегодня узнали. Сначала, правда, давайте перейдём на следующую строку, с помощью уже знакомого нам тега <br>. Обратите внимание, что необходимо соблюдать принцип вложенности: пока не закрыт внутренний тег — внешний не закрывается.

<font size = "4" color = "navy">
  <b>
    <i>
      <u>Это текст, в котором намешано очень многое</u>
    </i>
  </b>
</font>

Таким образом, код нашей страницы стал таким:

<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
  <h2>Заголовок 1-го уровня</h2>
  <i>Это курсив</i>
  <b>Это жирное начертание</b>
  <u>Подчёркнутый текст</u>
  <i>
     <b>Жирный курсивный текст</b>
  </i>
  <b>
    <i>Жирный курсивный текст</i>
  </b>
  <br>
    <font size = "5">Это текст c size = "5"</font>
    <font size = "5" color = "red">Это увеличенный красный текст</font>
  <br>
  <font size = "4" color = "navy">
    <b>
      <i>
        <u>Это текст, в котором намешано очень многое</u>
      </i>
    </b>
  </font>
</body>
</html>

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

Всего Вам доброго, увидимся в следующей статье.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 26.04.2010 17:56:24
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>…</b> и <strong>…</strong>. Все, что находится в тегах <b>…</b> и <strong>…</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения жирным текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега b делаем <b>жирный шрифт</b>.
  </p>
    <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p>
  </body>
</html>

Получим следующий результат:

Курсив — наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов <i>…</i> и <em>…</em>. Все, что находится в тегах курсива <i>…</i> и <em>…</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения курсивом текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
    <p>С помощью тега em делаем <em>текст курсивом</em>.</p>
  </body>
</html>

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега <u>. ..</u>. Все, что находится внутри тега <u>…</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример подчеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
  </body>
</html>

Получим следующий результат:

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

Зачеркнуть текст в HTML можно с помощь тега

<strike>…</strike>. Все, что находится внутри тега <strike>…</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример зачеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>. </p>
  </body>
</html>

Получим следующий результат:

Моноширинный шрифт

Содержимое элемента <tt>…</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример моноширинного шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
  </body>
</html>

Получим следующий результат:

Верхний индекс

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример верхнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
  </body>
</html>

Получим следующий результат:

Нижний индекс

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример нижнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sub делаем нижний<sub>индекс</sub>. </p>
  </body>
</html>

Получим следующий результат:

Вставленный текст

Содержимое внутри тега <ins>…</ins> отображается в HTML как вставленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример вставленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Удаленный текст

Содержимое внутри тега <del>…</del> отображается в HTML как удаленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример удаленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег. </p>
  </body>
</html>

Получим следующий результат:

Большой текст

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример большого текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега big делаем <big>текст больше</big>.</p>
  </body>
</html>

Получим следующий результат:

Маленький текст

Содержимое внутри тега <small>…</small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример маленького текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега small делаем <small>текст меньше</small>. </p>
  </body>
</html>

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы <div> и <span> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <div>
      <a href="/index.html">ГЛАВНАЯ</a> / 
      <a href="/about.html">О НАС</a> / 
      <a href="/contacts. html">КОНТАКТЫ</a>
    </div>
  
    <div>
      <h2>Название статьи</h2>
      <p>Содержимое страницы...</p>
    </div>
  </body>
</html>

Получим следующий результат:

С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:

Пример с тегом <span>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <p>Группировки элементов с помощью <span>тега span</span>.</p>
  </body>
</html>

Получим следующий результат:

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

Поделитесь:

Редакция и форматирование текста. Учебник html

Глава 2

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

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

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

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

Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align=»center»>Привет мир!!!</p>

По левому краю:

<p align=»left»>Привет мир!!!</p>

По правому краю:

<p align=»right»>Привет мир!!!</p>

Или же обоим краям документа:

<p align=»justify»>Привет мир!!! — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align=»center»>Привет мир!!!</p>
<br>
<p align=»justify»>
Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</p>
</body>
</html>

Так уже лучше, не правда ли?

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

<p>
<p>
</p>
</p>

Нельзя! — это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align=»left» для параграфа можно не указывать.

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align=»center»>Привет мир!!!</div> <div align=»left»>Привет мир!!!</div> <div align=»right»>Привет мир!!!</div> <div align=»justify»>Привет мир!!!</div>

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

<div>
<p align=»left»>Пишем слева</p>
<p align=»right»>Пишем справа</p>

А вообще тег <div> многофункциональный. . и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..

5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:

<center>Привет мир!!!</center>

В наборе тегов html языка имеется шесть типов заголовков:

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>

<h6> Привет мир!!! </h6>

Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки — на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский — «шрифт».

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size — размер.

Пишется и выглядит это так:

<font size=»+4″>Привет мир!!!</font>
<font size=»+2″>Привет мир!!!</font>
<font size=»+0″>Привет мир!!!</font>
<font size=»-1″>Привет мир!!! </font>
<font size=»-2″>Привет мир!!!</font>

Добавим эти теги на нашу страницу.

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h3>Привет мир!!!</h3></center>
<br>
<p align=»justify»>
<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>
</p>
</body>
</html>

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

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

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

#000000 black	#ffffff white	#ff0000 red
#ffa500 orange	#ffff00 yellow	#008000 green
#00ffff cyan	#0000ff blue	#800080 purple

Полная палитра базовых красок приведена здесь.

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — например #008000 — зелёный цвет, либо используя константы цвета — green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут — color.

Так вот, если к примеру написать так:

<font color=»#ff0000″>Привет мир!!!</font> — То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color=»red»>Привет мир!!!</font> — Будет тоже самое..

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

Есть еще один способ изменить цвет текста. Тег <body></body> «тело» — имеет атрибут text — «текст» если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы «принудительно» указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text=»#ff8c40 «>

Теперь весь текст у нас стал оранжевым кроме заголовка «Привет мир!!!» который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor=»#40caff»> — залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

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

На данный момент у меня получилось вот так: .. а у Вас?

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#e8e8e8″>
<center>
<h3>
<font color=»#008000″>Привет мир!!!</font>
</h3>
</center>
<p align=»justify»>
<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″ color=»#ff0000″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text=»#ff207b» bgcolor=»#1a77f0″> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Здесь все достаточно просто..

Итак, новые теги:

`<b> </b>`	— Полужирный текст
`<i> </i>`	— Наклонный текст
`<u> </u>`	— Подчеркнутый текст
`<strike> </strike>`	— ~~Перечеркнутый~~
`<s> </s>`	— ~~Перечеркнутый~~ (второй вариант, от первого ничем не отличается)
`<tt> </tt>`	— моноширинный шрифт
`<small> </small>`	— Малый
`<big> </big>`	— Большой
`<sup> </sup>`	— Верхний ^индекс
`<sub> </sub>`	— Нижний _индекс

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

Вот пример на всякий случай…

<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>— водка.</i>
<br>
Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ. </tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face — лицо то бишь..

Пишется так:

<font face=»arial»>Эта строчка будет написана с помощью шрифта Arial</font>

Пример:

<html>
<head>
<title>Использование различных шрифтов</title>
</head>
<body>
<font face=»arial»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем. </font>
<br>
<font face=»times new roman»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face=»comic sans ms»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
</body>
</html>

Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то «экзотические» нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.

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

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

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..

Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

Пример:

<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<pre>

        СЛОН. 

Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!

         С. Я. Маршак.

</pre>
</body>
</html>

Такие вот дела..

Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода.
Расскажу про основные плюсы использования подобного редактора.
- Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
- Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
- Ну и «общие» удобства — сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!
P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.
Немного об этике и здоровье глаз..
Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами — это напрягает, ищите золотую середину. .

Форматирование текста в html – свойства и теги форматирования, которые вы должны знать

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

Жирный шрифт

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

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

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

Курсив

Для вывода слов в курсивном начертании нужно использовать теги <i> и <em>. Тут ситуация такая же, как и вышеописанная. Тег <i> влияет только на внешний вид текста, не добавляя ему особого смысла. Em же позволяет логически выделить слова.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Например, в речевых браузерах такой фрагмент может быть отмечен немного по-другому, чем если бы его просто пометили как курсив с помощью <i>.

Текст в верхнем и нижнем индексах

Иногда появляется необходимость вывести какие-то буквы, цифры или символы в верхнем или нижнем индексе. Для этого стоит применять парные теги <sup> и <sub>. Первый выводит символы в верхнем индексе, а второй, соответственно, в нижнем. Вот и вся наука.

Вывод текста с сохранением форматирования

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

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

Рис. 1. Этот отрывок был написан без переносов строк с помощью
. Как видите, текст в pre отображается так, как он набран в редакторе.

Вообще в css есть гораздо более функциональное свойство, которое позволяет управлять отображением пробелов в нужном фрагменте более широко. Это свойство white-space. Хотя статья в основном об html-тегах, давайте все-таки рассмотрим его значения:

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

Pre – будет выводиться абсолютно так же, как он выводиться в pre. Если строка не влезает в окно браузера, то она продолжит тянуться, образуя горизонтальную прокрутку.

Pre-wrap – более умное поведение текста, все пробелы сохраняются, но слова автоматом переносятся на новую строку, если перестают помещаться по ширине в свой блок-родитель.

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

Подчеркнутый текст

Для подчеркивания в html есть еще один тег — ins. Можно использовать его, а можно реализовать подчеркивания с помощью css-свойства text-decoration. Кстати, это позволяет подчеркнуть нужный текст не только снизу, но и сверху, если это будет необходимо.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Сначала в html для этого применяли тег strike, но сегодня он немного устарел и вместо него лучше использовать укороченный вариант — s. Также язык разметки предлагает нам еще один тег – del. Он тоже выводит зачеркнутый текст, но был создан для того, чтобы показать, какие части документа были исправлены.

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

Комбинирование

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

<b><i><ins>Слово</ins></i></b>

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

Рис. 2. Комбинируя команды вы можете добиться разного форматирования.

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

CSS-свойства для текста

Все вышеописанные преобразования с текстом можно осуществить и без помощи html, только с помощью css-свойств. Например, font-weight: bold делает нужный вам текстовый фрагмент жирного начертания, а font-style: italic сделает текст курсивным. Эти свойства тоже можно комбинировать. Конечно же, в этом случае слова не получат никакого логического выделения, просто будет изменен их внешний вид.

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

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

<span class = «bold»>Текст</span> .bold{ Font-weight: bold; }

<span class = «bold»>Текст</span>

.bold{

Font-weight: bold;

}

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

сайт школы №127 — Web-страница_2

Web-страница_2

Разработка Web-страницы с использованием языка разметки гипертекста HTML:
Форматирование текста на Web-странице.

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

С помощью специальных тегов можно задать различные параметры форматирования текста.

Шрифт
С помощью тэга FONT и его атрибутов face (гарнитура шрифта), size (размер шрифта от 1 до 7), color (цвет шрифта:можно задавать названием цвета «green», либо его шестнадцатеричным значением «#00ff00») можно задать параметры форматирования текста.

Пример: Заключите в текстовом редакторе Блокнот слово Привет! в тег FONT с атрибутами

<FONT face=»Arial» size=»4″ color=»green»> Привет! </FONT> или
<FONT face=»Arial» size=»4″ color=»#00ff00″> Привет! </FONT>
На экране web-страницы вы увидите следующее:

Заголовки
С помощью тэгов h2, h3,…,H6 и атрибута align (выравнивание: left, right, center) задается размер шрифта заголовков и их расположение.

Пример: Заключите в текстовом редакторе Блокнот заголовок «Тема: Системы счисления». в теги h2,…,H6 с атрибутами align =»left», align =»right», align =»center»
<h2 align =»left»> Тема: Системы счисления</h2>
<h3 align =»left»> Тема: Системы счисления</h2>
<h4 align =»left»> Тема: Системы счисления</h2>
<h5 align =»left»> Тема: Системы счисления</h2>
<H5 align =»left»> Тема: Системы счисления</h2>
<H6 align =»left»> Тема: Системы счисления</h2>
<h2 align =»righ»> Тема: Системы счисления</h2>
<h2 align =»center»> Тема: Системы счисления</h2>
На экране web-страницы вы увидите следующее:

К заголовкам также можно применять тэг <font.
Пример: Заголовок сисним цветом, выровненого по центру можно задать следующим образом:
<FONT color=»blue»>
<h3 align=»center»> Все о компьютерах</h2>
</FONT>
На экране выглядит так:

Все о компьютерах

Абзацы
Разбиение текста на абзацы производится с помощью парного тэга <P>…</P> с атрибутом align (выравнивание: left — по левой границе, right — по правой границе, center — по центру, justify — по ширине).

Пример:
<p align=»justify»>Система счисления или нумерация — это способ записи (обозначения) чисел.Символы, при помощи которых записываются числа, называются цифрами, а их совокупность — алфавитом системы счисления. Количество цифр, составляющих алфавит, называется его размерностью.</P>
На экране web-страницы вы увидите следующее:

Система счисления или нумерация — это способ записи (обозначения)чисел. Символы, при помощи которых записываются числа, называются цифрами, а их совокупность — алфавитом системы счисления. Количество цифр, составляющих алфавит, называется его размерностью.

Стили оформления

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

Это парные тэги:

<B>…</B> (от английского bold), а так же <STRONG> — это жирный текст
<I>…</I> (от английского italic), а так же <EM> — это курсив
<S>…</S> (от английского strike out) — ~~это зачеркнутый текст~~
<U>…</U> (от английского underline) — это подчеркнутый текст
<SUP>…</SUP> (от английского superscript) — это ^{верхний индекс}
<SUB>…</SUB> (от английского subscript) — это _{нижний индекс}

Текст, заключается между открывающим и закрывающим тэгами.

Если вы хотите например, сделать стиль текст одновременно жирный и курсив, то используют принцип вложения «матрешки»:
<B><I> Компьютер</I></B>
Так выглядит на web-странице:
Компьютер

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc².

<SUB>…</SUB> — выводит текст в нижнем индексе, например H₂SO₄.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>

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

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

<p>Подчеркнутый параграф текста.</p>

<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H₂SO₄ — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

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

<тег>…</тег>

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

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>

<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый. </span>
</p>
</body>
</html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

Шрифты	Семейство
‘Comic Sans MS’	cursive (рукописные)
Courier	monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma	sans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamond	serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif. 
 </p>

 <p>
    Это Comic Sans MS или любой cursive.
 </p>

 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

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

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
% — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>

 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY. 
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Домашнее задание.

Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
Напишите один параграф в начале статьи и по два в каждом разделе.
Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
Напишите в последнем параграфе формулу спирта: C₂H₅OH.

Посмотреть результат → Посмотреть ответ

HTML и семантика — HTML+

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

Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением)^{, а также предполагающий логичную и последовательную иерархию страницы. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы.}

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

Давайте разберем использование нескольких тегов на примере статьи. По английски статья — это article. Как здорово, что в HTML5 у нас для этого существует специальный тег, который так и называется — <article>. Дальше: вы статью без заголовка видели? Я — нет. Поэтому, и тег <article> предполагает наличие заголовка. Вот тут у нас выбор широкий — заголовков в HTML, причем не только в 5-м, а во всех его версиях ах 6 штук. Давайте на них посмотрим (открыть в отдельной вкладке):

В коде это будет выглядеть так:

<h2>Заголовок 1-го уровня</h2> <h3>Заголовок 2-го уровня</h3> <h4>Заголовок 3-го уровня</h4> <h5>Заголовок 4-го уровня</h5> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6>

<h2>Заголовок 1-го уровня</h2>

<h3>Заголовок 2-го уровня</h3>

<h4>Заголовок 3-го уровня</h4>

<h5>Заголовок 4-го уровня</h5>

<h5>Заголовок 5-го уровня</h5>

<h6>Заголовок 6-го уровня</h6>

Какой же выбрать для статьи? Внешне самым бросающимся в глаза является тег <h2>. Он крупный, текст в нем жирный — сложно не заметить такой заголовок. И действительно, статью имеет смысл начать с заголовка <h2>. Следует отметить, что это самый важный заголовок на странице — на него в первую очередь обращают внимание пользователи и поисковики, из которых чаще всего пользователи и узнают, о том, что статья с таким заголовком появилась на вашем сайте. Именно название статьи (заголовок в синтаксисе HTML) будет выведен в качестве ссылки на статью при поиске.

Дальше — в статье должен быть текст. Когда вы читаете текст статьи в газете, то наверняка обращаете внимание, что он разбит на абзацы. То есть абзац — эта такая структурная единица текста, которая доносит до вас какую-ту мысль автора по теме, объявленной в заголовке статьи. Поэтому и в HTML тот текст, который что-то вам рассказывает (впечатления о турпоездке, например), поясняет (статья о психологии отношений) или описывает (характеристики товара в интернет-магазине), будет разбит на абзацы, которые в HTML определяются тегом <p>.

Поскольку у вас далеко не всегда будет реальный текст статьи, а попробовать «упаковать» текст в абзацы очень хочется, то специально для верстальщиков был предложен псевдолатинский текст-«рыба» Lorem ipsum…, который для большинства людей, не знакомых с латынью не несет вообще никакой смысловой нагрузки, зато хорошо и быстро помогает заполнить любые теги текстом. Особенно здорово это получается в современных редакторах кода с использованием плагина Emmet. Например, 3 абзаца в коде ниже были созданы за несколько секунд с помощью аббревиатуры Emmet p*3>lorem45:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ab quos distinctio fuga necessitatibus, ipsam unde consectetur ducimus, quod, nihil impedit voluptates animi minima totam, incidunt accusamus nobis. Amet labore, vitae maiores tempore explicabo deleniti recusandae incidunt sint quia assumenda iusto, dignissimos nostrum, eum ipsum?</p> <p>Nostrum aut consequatur enim nam, culpa illum sapiente neque explicabo pariatur placeat in eligendi harum mollitia, repellendus accusamus non possimus deserunt sed hic dolorum. Voluptatibus, vero fugit temporibus. Dolores obcaecati ratione excepturi laudantium consectetur. Incidunt officia provident numquam nisi accusantium possimus officiis, reiciendis sapiente praesentium.</p> <p>Magnam iusto itaque totam esse a aperiam, sit nihil enim vitae officiis nam assumenda voluptates repellendus fugiat voluptatibus aspernatur soluta quam pariatur quo? Quidem doloremque quas sequi, asperiores blanditiis dolorem dolorum suscipit officiis! Minima unde nostrum, iure voluptatem quidem doloribus numquam in eius ea beatae.</p>

<p>Nostrum aut consequatur enim nam, culpa illum sapiente neque explicabo pariatur placeat in eligendi harum mollitia, repellendus accusamus non possimus deserunt sed hic dolorum. Voluptatibus, vero fugit temporibus. Dolores obcaecati ratione excepturi laudantium consectetur. Incidunt officia provident numquam nisi accusantium possimus officiis, reiciendis sapiente praesentium.</p>

<p>Magnam iusto itaque totam esse a aperiam, sit nihil enim vitae officiis nam assumenda voluptates repellendus fugiat voluptatibus aspernatur soluta quam pariatur quo? Quidem doloremque quas sequi, asperiores blanditiis dolorem dolorum suscipit officiis! Minima unde nostrum, iure voluptatem quidem doloribus numquam in eius ea beatae.</p>

Давайте посмотрим, как это выглядит в сочетании с уже рассмотренными тегами <article> и <h2>:

<article> <h2>Что вы знаете о Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ab quos distinctio fuga necessitatibus, ipsam unde consectetur ducimus, quod, nihil impedit voluptates animi minima totam, incidunt accusamus nobis. Amet labore, vitae maiores tempore explicabo deleniti recusandae incidunt sint quia assumenda iusto, dignissimos nostrum, eum ipsum?</p> <p>Nostrum aut consequatur enim nam, culpa illum sapiente neque explicabo pariatur placeat in eligendi harum mollitia, repellendus accusamus non possimus deserunt sed hic dolorum. Voluptatibus, vero fugit temporibus. Dolores obcaecati ratione excepturi laudantium consectetur. Incidunt officia provident numquam nisi accusantium possimus officiis, reiciendis sapiente praesentium.</p> <p>Magnam iusto itaque totam esse a aperiam, sit nihil enim vitae officiis nam assumenda voluptates repellendus fugiat voluptatibus aspernatur soluta quam pariatur quo? Quidem doloremque quas sequi, asperiores blanditiis dolorem dolorum suscipit officiis! Minima unde nostrum, iure voluptatem quidem doloribus numquam in eius ea beatae.</p> </article>

<h2>Что вы знаете о Lorem ipsum</h2>

</article>

Давайте посмотрим, как это будет выглядеть на странице (открыть в отдельной вкладке):

Ничего особенного — просто заголовок и просто абзацы! Тем не менее мы имеем очень логичную семантическую структуру, в которой есть распределение контента на заголовки и абзацы.

Идем дальше. Статья с тремя абзацами — не очень интересно. Да и одного заголовка нам недостаточно. Хотелось бы, например, в этой статье рассказать, откуда появился текст Lorem ipsum. Поэтому нам нужен подзаголовок и еще несколько абзацев, которые уже будут раскрывать суть подзаголовка, но находится в рамках той темы, что задана основным заголовком <h2>.

Поскольку подзаголовки не предусмотрены в HTML, теперь становится понятным, зачем нужны аж 6 уровней заголовков: чем больше цифра рядом с <h...>, тем меньше значение (или вес) этого заголовка, и тем позже, скорей всего, он встретится в разметке страницы. Для подзаголовка нам понадобится тег <h3>, а абзацы все так же будут размещены в тегах <p>.

Статья увеличивается в размерах. Мы добавим ещё заголовки <h4>, чтобы раскрыть смысл статьи и дать нашим пользователям больше информации о происхождении текста-«рыбы», начинающегося с Lorem ipsum.

Ничего особо сложного, не так ли? И термин «семантика в HTML» уже не выглядит пугающим. Наш текст имеет хоть и очень простую, но логичную структуру. Кроме того, с такой структурой ваш текст, скорей всего, понравится и поисковикам, и СЕО-шникам, т.е. специалистам по оптимизации страниц сайтов под поисковые системы. Ещё одной хорошей новостью является то, что W3C-валидатору наша разметка тоже нравится.

Валидация страницы без ошибок

Где же ложка дегтя? И есть ли она? К сожалению, есть. Наша статья абсолютно безликая. Ей не хватает выделений курсивом, жирным шрифтом, цветом. Текст, хоть и разбит на заголовки, но особого желания читать его не вызывает. Явно не хватает CSS-форматирования.

Блочные и строчные и теги

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

К блочным тегам относят такие теги, которые в виде прямоугольных блоков размещаются в структуре страницы и по умолчанию занимают все пространство внутри родительского элемента. Обычно родительским элементом в начале изучения HTML является <body>, поэтому блочные теги располагаются на всю ширину открытого окна браузера, которое занимает <body>, начиная от левой его границы и заканчивая правой вне зависимости от того, сколько текста в них находится. В Инспекторе свойств браузера (F12 или CTRL + SHIFT + I) при наведении на любой блочный тег (кстати, теги имеют второе название — элементы), можно увидеть, что голубая полоса, определяющая их размер по ширине, занимает все пространство внутри <body>. На скриншоте видно, что размер <h3> из 4-х слов совпадает с размером абзаца со значительно большим количеством слов именно по ширине (обведенные красной рамкой цифры слева над текстом).

Справа внизу в Инспекторе свойств вы можете видеть вложенность элементов. И <h3>, и <p> являются дочерними (вложенными) элементами для сначала для <article>, потом для <body> и для <html>. Соответственно, <html>, <body> , а затем <article> являются родительскими элементами для <h3> и <p>.

Блочные теги, как бетонные блоки при стройке дома помогают создать основную структуру страницы, определить ее основные элементы. Именно, поэтому именно блочными являются такие важные для страницы теги, как <header>, <main>, <aside>, <section>, <footer>, <article>, <nav>. Это именно семантические теги — теги, которые определяют шапку (<header>) и подвал сайта (<footer>), его основное содержимое (<main>), содержимое статьи (<article>), какие-то разделы (<section>) или дополнительное содержимое для вспомогательного контента или рекламы (<aside>). Также сложно представить сайт без навигации, за которую отвечает тег <nav>. В том случае, если ваш контент нельзя определить, как один из перечисленных элементов с точки зрения его содержимого, такой блок следует «упаковать» в тег <div> с атрибутом class или id, для которого в css задается форматирование.

Пример страницы с разметкой блочными тегами (открыть в отдельной вкладке):

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

Поэтому с точки зрения семантики строчные теги всегда помещают внутрь блочных, поскольку они выполняют функцию дополнительного форматирования для основного блока. Все равно, как картина, статуэтка или скатерть дополняют убранство квартиры. Исключением является только тег <a> — ссылка, которая может быть как внутри текста, когда нужно отправить читателя к другой статье, связанной с текущей, так и снаружи какого-то блока или заголовка, который будет открывать страницу с соответствующей статьей или какой-то важной информацией.

Логическое предназначение тегов и их визуальное отображение

Здесь хотелось бы поговорить еще о строчных тегах типа <b> или <strong>, <i> или <em>. И <b>, и <strong> делают текст жирным, а <i> и <em> придают курсивное начертание тем словам или фразами, которые в них помещены. Зачем нам 2 разных тега, которые делают одно и то же? Какой в том смысл и в чем разница между ними?

Ответ несколько сложнее, чем хотелось бы. С одной стороны — визуальной, разницы между <b> и <strong> нет никакой. Текст не станет жирнее, если вы предпочтете <strong> тегу <b>. Тут разница заключается в самом значении тега, т.е. опять-таки в семантике. Тег <b> был назван так от английского слова bold, т.е. жирный. С семантической точки зрения текст, помещенный в эти теги, сообщает браузеру, что он используется для привлечения внимания к тексту, при этом важность или значение текста не играют роли. А визуально текст выделен жирным. Текст в тегах <strong> показывает поисковикам, прежде всего, что он «усилен», т.е. выделен, как более важный (сильный) по сравнению с другим текстом без такого тега. То есть тег <strong> выступает, как логический призыв обратить внимание на выделенный им текст, а уж чисто физически, или визуально, выглядит, как текст с жирным начертанием. В этом и заключается разница между тегами <b> и <strong>.

Кстати, тег <em> (от англ. emphasis — акцент) предназначен для текста, имеющего особое значение или на который следует сделать акцент, а тег <i> (от англ. italic — курсив) используется для текста, который по разным причинам отличается от обычного текста. Оба тега, как уже отмечалось, выводят текст курсивом.

Забавный факт: в редакторе WordPress при выделении какого-то текста курсивом нужно нажать клавиши CTRL + I (I — от italic), но при этом текст оформляется тегом , а при нажатии на CTRL + B (B от bold) текст выделяется тегами <strong>.

Давайте посмотрим на то, как выглядит статья с форматированием, использующим оба варианта этих тегов. Найдите разницу будет сложно, поэтому весь текст в тегах <i> будет оранжевым , текст в тегах <em> — красным, в тегах <b> — синим, а в <strong> — голубым (открыть в отдельной вкладке)

Кстати, в примере есть вложенность элементов <em> в <strong>, а также <i> в <b>. И в этом случае вы увидите текст в цвете того тега, который является наиболее глубоко вложенным. Здесь работает правило «матрешки»: первый открытый тег закрывается последним.

Если этот порядок не соблюдать , то даже редактор кода вам укажет подсветкой на неверное форматирование.

Определенное логическое форматирование выполняет, например, такой нечасто используемый тег, как <del>, который заменил собой отмененный в стандарте HTML5 тег <strike>. Оба тега перечеркивают текст, но <strike> (происходит от англ. strikethrough — зачёркнутый) делал это чисто визуально в HTML4, а <del> указывает на то, что текст в нем был отменен, и сейчас используется некий новый вариант. Кстати, для нового варианта, вставленного вместо старого можно использовать логический тег <ins> (от англ. insert — вставить). Он предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны плюс выделяет текст в виде подчеркивания (замена устаревшему тегу <u>, произошедшему от англ. underline — подчеркнутый).

Для того чтобы оформить какую-то часть текста визуально, нужно использовать элемент <span> с добавленными к нему стилями в виде атрибута style или class, а остальные теги следует использовать для какого-то логического выделения информации.

Теги и отступы

Следует иметь ввиду, что по умолчанию ряд тегов имеет определенные отступы либо сверху и снизу (заголовки, абзацы), либо справа (списки <ul>, <ol>), либо справа и слева (блочные цитаты <blockquote>). С точки зрения семантики списки нужны для представления каких-то перечисляемых данных, блочная цитата — для цитирования известного человека (другого сайта). Поэтому сдвигать с их помощью текст нельзя.

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

В примере ниже вы увидите неверное и верное применение тегов (открыть в новой вкладке).

Семантические ошибки форматирования

Мы рассматривали очень простую верстку на примере статьи с несколькими абзацами и заголовками. В ней были допущены некоторые ошибки, которые чаще всего допускают начинающие верстальщики, на которые хотелось бы обратить внимание. Они, как правило, не видны пользователю на сайте, так как браузеры стараются вывести информацию в приемлемом виде при любых ошибках форматирования. Зато их не пропустит W3C-валидатор и тот человек, который будет оценивать ваш код при приеме на работу. С поисковиками тоже спорный вопрос, т.к. они распределяют информацию по разделам своей базы данных по только им известному алгоритму, но при этом 100% обращают внимание на ряд тегов, внутри которых она размещена, особенно на заголовки 1-4-го уровней.

В статье был сделан ряд ошибок, которые мы сейчас разберем согласно рекомендациям валидатора:

Давайте разберем все эти ошибки.

Ошибка 1. Нельзя вкладывать один абзац в другой. Это противоречит логике, а значит семантике разметки. Абзацы — равноправные элементы для форматирования текста, поэтому они должны идти друг за другом или за заголовками, или за фотографиями, но никак ни друг в друге. Задумайтесь — разве в школе вы бы смогли написать один абзац внутри другого? Вот и в HTML-разметке так делать нельзя.

Ошибка 2. Нельзя вкладывать абзац в заголовок любого уровня. Опять таки вспомним школу. Заголовок — для всего сочинения, а дальше абзацы. Нелогично (читай — несемантично) пытаться в заголовок отправить абзац.

Ошибки 3 и 4. Нельзя оборачивать блочные теги в строчные, т.е. ставить <strong>, <b>, <em>, <i> и другие теги с display: inline ДО блочных. Исключение — теги <a> (ссылки), внутрь которых можно помещать любые блоки. В плане сравнения — блочный тег похож на прозрачный пакет, в котором есть несколько сложенных в определенном порядке покупок. Вы можете мешать их местами, переставляя слова в нужном порядке, оборачивать покупки в другие пакетики, но если вы вытащите покупку из основного пакета, она, вероятнее всего, потеряется или будет вам мешать.

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

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

Кстати, текст с таким форматированием и в браузере смотрится странно:

Заголовок внутри абзаца смотрится странно

«Лишнее» форматирование

В этом тексте есть еще одна ошибка, пропущенная валидатором, т.к. она не является неверной с его точки зрения. Речь идет о тегах <b> или <strong> внутри заголовков. Если вы их добавите — это не будет считаться ошибкой, но с точки зрения логики — зачем делать жирным заголовок, если в его css-свойствах по умолчанию уже существует правило для жирного начертания?

Стили по умолчанию и их переопределения

На скриншоте видно, что и у <b>, и у <h4> в таблице стилей, которую всегда загружает браузер, чтобы отобразить теги в соответствии с рекомендациями стандарта HTML (user agent stylesheet), есть css-свойство font-weight: bold, которое переопределяется для <h4> (зачеркнуто) и работает для <b>. Здесь возникает вопрос — зачем нужны эти манипуляции и лишний тег, если визуально ничего не меняется? Если нужно назначить какое-то css-форматирование, то имеет смысл сделать это для тега <h4>, а не добавлять в него <b>.

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

Тег b внутри заголовка

Кстати, на этом скриншоте код был «сфотографирован» прямо в браузере, а не в редакторе кода. Для этого на любой странице вы можете нажать CTRL+U или выбрать из контекстного меню по правому клику пункт «Просмотр кода страницы» в Chrome («Исходный код страницы» — Mozilla Firefox) и т.п.

Устаревшие теги и атрибуты

На начальном этапе, как правило, не хватает понимания, как сделать то или иное форматирование. Поскольку в свое время форматирование и HTML были едины, то в сети до сих пор можно увидеть рекомендации по использованию таких тегов, как <font>, <center>, добавление бегущей строки с помощью <marquee>, а также выравнивания изображений или текста с помощью атрибута align, атрибут bordercolor для установки цвета рамки для изображения вместо css-свойства border-color, атрибутов hspace и vspace вместо css-свойства margin. Все они на данный момент являются устаревшими (англ. — obsolete).

В примере ниже собраны все возможные устаревшие теги и атрибуты (открыть в новой вкладке).

На скриншоте вы можете увидеть все ошибки, выданные относительно этого файла W3C-валидатором. Их очень много.

HTML-тег »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее

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

Пример кода

  Это слово, которое подчеркнуто с помощью <u> элемент.

Вот слово, которое подчеркнуто с помощью CSS.
Вот слова, окруженные тегами <u> с нечетким, но явным образом отображаемым стилем.
<стиль>
  .подчеркнуть {
    оформление текста: подчеркивание;
  }
  ты нечленораздельный {
    текстовое оформление: нет;
    цвет: #000080;
    стиль шрифта: курсив;
  }

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

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

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

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

   Когда элемент    был первоначально задуман, он должен был использоваться для обозначения текста, который должен быть подчеркнут. Однако использование HTML для добавления стилистических эффектов больше не считается хорошей практикой. Вместо этого следует использовать HTML для добавления структуры и семантического значения содержимому веб-страницы, а CSS следует использовать для добавления стилей и управления макетом страницы.
 Это означает, что старые теги, такие как   , которые изначально были задуманы для представления, должны быть переделаны с семантическим значением или объявлены устаревшими и удалены из спецификации HTML.
 Итак, какое семантическое значение несет этот элемент в современном HTML? В соответствии со спецификацией HTML5, опубликованной W3C:
 Элемент u представляет собой фрагмент текста с нечеткой, хотя явно отображаемой, нетекстовой аннотацией…
 Вы сожалеете, что вообще спросили, не так ли? Давайте немного уточним это определение.
 Во-первых, что такое нетекстовая аннотация? Что ж, добавить аннотацию означает добавить пояснение или примечание. Однако в этом случае аннотация нетекстовая, то есть аннотация не имеет ничего общего с содержанием текста.
 Во-вторых, аннотация  не сформулирована , но явным образом представлена. Другими словами, браузер и веб-разработчик могут отображать аннотацию так, как им нравится. По умолчанию браузеры отображают текст, окруженный тегами  и , как подчеркнутый, но это не обязательно требуется и не является частью спецификации HTML.Аннотация должна выглядеть так:  unArticled  , покажите как хотите. Просто убедитесь, что аннотацию легко заметить, другими словами:  явным образом визуализируется как .
 Давайте соберем части вместе. Элемент  u  используется для:
 Добавить аннотацию, которая говорит нам что-то о самом выделенном тексте, а не о содержании или сообщении текста.
 Способ добавления аннотации нечеткий. Слова между тегами  u  не должны быть подчеркнуты, любой метод аннотации приемлем, если…
 Аннотация должна быть явно отображена, то есть: легко различима.
 Так какие варианты использования существуют для такого нишевого тега? Чаще всего используется для выявления слов с ошибками. Допустим, вы представляете текст, который включает намеренно написанные с ошибками слова, которые должны бросаться в глаза читателю. Элемент    был бы отличным выбором для идентификации этих слов.
 Адам — технический писатель, специализирующийся на документации и учебных пособиях для разработчиков. Подчеркнутый текст - цифровое выравнивание 
  Появилось ли предупреждение «Подчеркнутый текст» в проверке проверки читаемости одной из ваших записей или страниц WordPress? Ниже читайте объяснение этого предупреждения, как оно влияет на доступность вашего веб-сайта и как это исправить.
 Предупреждение о подчеркнутом тексте 
 Что такое подчеркнутый текст? 
 Подчеркнутый текст — это текст на веб-странице, будь то заголовок или часть основного текста, который имеет атрибут подчеркивания (либо HTML-тег   , либо CSS  text-decoration: underline;  ).
 Что означает предупреждение «Подчеркнутый текст»? 
 Это предупреждение возникает, когда подчеркнутый текстовый элемент был обнаружен на одной или нескольких страницах вашего веб-сайта.
 Как средство проверки читаемости проверяет подчеркнутый текст? 
 Во время аудита вашей страницы или содержимого публикации средство проверки читаемости просматривает весь текст на странице в поисках любого текста, содержащегося в теге   . Если найден атрибут подчеркнутого текста (    ), будет помечено предупреждение.
 Влияние на доступность 
 Почему важно избегать подчеркивания текста? 
 Часто на странице размещается подчеркнутый текст, потому что автор пытается подчеркнуть важность текста, однако это может сбить пользователей с толку, поскольку по умолчанию во всех браузерах ссылки подчеркнуты.Таким образом, в онлайн-среде подчеркнутый текст обычно используется для обозначения связанного текста.
 Добавление подчеркивания к тексту, который не является ссылкой (например, потому что вы хотите его выделить), может запутать посетителей вашего веб-сайта, которые ожидают, что все, что содержит подчеркивание, будет ссылкой. Они могут попытаться нажать на текст или подумать, что ваш сайт не работает. Резервирование подчеркиваний для ссылок, а не выделения, поможет обеспечить предсказуемое поведение вашего веб-сайта для всех пользователей. Это полезно для людей с любыми способностями, но особенно полезно для пожилых или менее опытных пользователей Интернета, а также для людей с когнитивными нарушениями.
 Кроме того, были проведены исследования того, как подчеркивание влияет на удобочитаемость как для обычных людей, так и для людей с нарушениями чтения, такими как дислексия. Подчеркивания, если они не оформлены определенным образом, разрушают буквы, выходящие за пределы базовой линии (например, буквы p, q, y и g), что может затруднить чтение вашего текста, особенно если подчеркнуты длинные фразы или предложения.
 Соответствующие критерии успеха WCAG 2.1 
 3.2 Предсказуемый 
 Сделайте так, чтобы веб-страницы отображались и работали предсказуемо.
 Как устранить предупреждение о подчеркнутом тексте 
 Что делать (вкратце) 
 Чтобы исправить подчеркнутый текст, вам нужно удалить элемент  из текста или стилей CSS, которые делают его подчеркнутым. Попробуйте использовать другую стилизацию, например курсив, цветной текст или выделение полужирным шрифтом, чтобы подчеркнуть или выделить слова или фразы.
 Как найти подчеркнутый текст в ваших сообщениях или страницах WordPress 
 Сначала установите бесплатный плагин   Accessibility Checker для WordPress.
 Для любых страниц или сообщений с подчеркнутым текстовым предупреждением в редакторе WordPress вы можете открыть вкладку сведений в метаокне средства проверки читаемости, а затем развернуть предупреждение, чтобы просмотреть список элементов абзаца, из-за которых предупреждение было помечено.
 Выделение текста для визуальных пользователей 
 Подчеркнуть контент для визуальных пользователей обычно довольно просто. Существует ряд визуальных методов на выбор, включая выделение текста полужирным шрифтом, выделение текста курсивом, использование текста другого цвета и выделение текста.Однако важно помнить, что программы чтения с экрана игнорируют многие из этих методов, что делает их бесполезными для слепых пользователей. Даже элементы     или      не будут правильно прочитаны средствами чтения с экрана для выделения или сильного выделения. Пользователи со слабым зрением или дальтонизмом могут не различать некоторые цвета текста или цвета подсветки фона. У пользователей с плохим зрением также могут возникнуть проблемы с выделением текста курсивом.
 Невизуальные методы выделения контента 
 Напишите слово «Важно» (или подобное) перед содержанием.Это, безусловно, самое простое решение, и оно помогает выделить контент для всех пользователей.
 Поместите слово «Важно» в альтернативный текст изображения. Это дает тот же результат, что и первое предложение, и дает вам возможность использовать на странице несколько оптимизированных для SEO изображений.
 При необходимости укажите важность в  </code> . <code><title> </code> – это первое, что читают программы чтения с экрана, поэтому это удобное место для размещения важного контента… но делайте это только в том случае, если он действительно важен.</li><li> Поместите содержимое в заголовок, если это необходимо. Средства чтения с экрана сообщают пользователю о наличии заголовка и уровне заголовка. Но не злоупотребляйте этой техникой. Используйте заголовки только в том случае, если текст в заголовках помогает создать логическую схему страницы.</li></ul><h2><span class="ez-toc-section" id="_HTML_u"> Тег HTML u — элемент подчеркивания текста </span></h2><ul><li><p> Тег HTML <code> <u> </code> используется для представления подчеркнутого текста.<img class="lazy lazy-hidden" src="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ds04.infourok.ru/uploads/ex/056f/000caf9e-2025c34c/img13.jpg' /><noscript><img src='/800/600/https/ds04.infourok.ru/uploads/ex/056f/000caf9e-2025c34c/img13.jpg' /></noscript> Как правило, тег <code> <u> </code> определяет слова или фрагменты текста, которые должны быть представлены по-разному, например, слова с ошибками или имена собственные в восточноазиатских символах.</p></li><li><p> Удаление тега HTML <code> <u> </code> в спецификации HTML 4.01. Но в HTML5 его снова добавили.</p></li></ul><h3><span class="ez-toc-section" id="i-64"> Пример </span></h3><pre data-line="7"> <code> <!DOCTYPE html>
<html>
<голова>
  <title>HTML-тег u

<тело>
В этом примере представлен текст подчеркивание.

   Запустить его...   »
 Атрибуты тега Тег HTML    не поддерживает какие-либо определенные атрибуты.
 Глобальные атрибуты 
 Тег HTML    поддерживает следующие глобальные атрибуты.
 Атрибуты  Значение  Описание
 идентификатор   уникальное_имя  Объявлен уникальный идентификатор элемента.
 класс   имя_класса  Объявлено одно или несколько имен классов для элемента.
 стиль   модели  Встроенные стили CSS определяют элемент.
 Название   название  Укажите дополнительные сведения о содержании элемента, это будет отображаться как  "подсказка"  для элементов.
 Атрибуты событий 
 Тег HTML    поддерживает следующие атрибуты событий.
 Элемент Элемент Элемент Элемент Элемент Клавиша Клавиша Ключ Форма Форма Элемент Элемент Ошибка элемента Сообщение об элементе Ошибка элемента Размер элемента Элемент Атрибуты  Значение  Описание
 онфокус   сценарий  фокусируется на объекте при запуске скрипта.
 размытие   сценарий  теряет фокус на объекте при запуске скрипта.
 прерывание   сценарий  прерывается на объекте при запуске скрипта.
 сменный   сценарий  получает любое изменение объекта при запуске скрипта.
 перед выгрузкой   сценарий  выгружается на объект при запуске скрипта.
 по клику   сценарий  щелкнул объект при запуске скрипта.
 ondblclick   сценарий  двойной щелчок по объекту при запуске скрипта.
 нажатие клавиши   сценарий  нажата при запуске скрипта.
 нажатие клавиши   сценарий  нажимается на элемент, а затем отпускается при запуске скрипта.
 onkeyup   сценарий  отпускается над элементом при запуске скрипта.
  сценарий  кнопка мыши была нажата над элементом при запуске скрипта.
 onmouseout   сценарий  указатель мыши отпускается над элементом при запуске скрипта.
 перемещение мыши   сценарий  Запуск Указатель мыши перемещается при запуске скрипта.
 при наведении мыши   сценарий  выполнить перемещение указателя мыши при запуске сценария.
 на мышке   сценарий  кнопка мыши отпускается при запуске скрипта.
 при сбросе   сценарий  была сброшена при запуске скрипта.
 по выбору   сценарий  Выберите содержимое при запуске скрипта.
 при отправке   сценарий  была отправлена при запуске скрипта.
 под нагрузкой   сценарий  объект загружается при запуске скрипта.
 сменный   сценарий  позволяют изменить объект при запуске скрипта.
 при разгрузке   сценарий  выгружается в окно браузера при запуске скрипта.
 ондраг   сценарий  Элемент перетаскивается при запуске скрипта.
 ондрагенд   сценарий  элемент перестает перетаскиваться при запуске скрипта.
 Драгентер   сценарий  элемент перетаскивается при запуске скрипта.
 на накладке   сценарий  остается перетаскиваемым при запуске скрипта.
 ондраговер   сценарий  элемент находится над целью, перетаскиваемой при запуске скрипта.
 ондрагстарт   сценарий  элемент начинает перетаскиваться при запуске скрипта.
  сценарий  удаляется при запуске скрипта.
 при ошибке   сценарий  возникает при запуске скрипта.
 в сообщении   сценарий  отображается при запуске скрипта.
 при ошибке   сценарий  возникает при запуске скрипта.
 на колесике мыши   сценарий  колесо мыши будет вращаться при запуске скрипта.
 при прокрутке   сценарий  полоса прокрутки прокручивается при запуске скрипта.
 изменение размера   сценарий  должен изменяться при запуске скрипта.
 по выбору   сценарий  выбрано все содержимое элемента при запуске скрипта.
 на складе   сценарий  должен быть сохранен в цели при запуске скрипта.
 Совместимость с браузером 
 Google Chrome 
 Да
 Mozilla Firefox 
 Да
 Microsoft Edge 
 Да
 Опера 
 Да
 Сафари 
 Да
 Как подчеркнуть текст в html 
 Ответ Омари Луго 
 Чтобы подчеркнуть текст в HTML, используйте тег .Тег  устарел в HTML, но затем вновь появился в HTML5. Теперь он представляет текст, стилистически отличающийся от другого текста, например слово с ошибкой., Вы можете попробовать следующий код, чтобы подчеркнуть текст на странице HTML, используя тег , Подчеркнуть текст с помощью CSS, Чтобы подчеркнуть текст, вы также может использовать атрибут стиля. Атрибут стиля указывает встроенный стиль для элемента. Атрибут можно использовать с HTML-тегом
 со свойством CSS text-decoration.
 Живая демонстрация
  

<голова>
HTML-тег u


<тело>
 Заголовок 
Этот текст будет подчеркнут.

  
 Живая демонстрация
  

<голова>
Подчеркивание текста HTML


<тело>
 Заголовок 
Этот текст будет подчеркнут.

  
 Источник: https://www.tutorialspoint.com/how-to-underline-a-text-in-html
 Ответ Лэнгстона Ньютона 
 Тег  представляет некоторый текст,
не артикулирован и стилизован по-другому
из обычного текста, например слова с ошибками или имена собственные в тексте на китайском языке. То
содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это
с помощью CSS (см. пример ниже). ,Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь отправить нам электронное письмо:,Отметьте слово с ошибкой с помощью тега :,Тег  также поддерживает Атрибуты событий в HTML.
 Определение и использование 
 Тег    представляет некоторый текст,
не артикулирован и стилизован по-другому
из обычного текста, например слова с ошибками или имена собственные в тексте на китайском языке. То
содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это
с помощью CSS (см. пример ниже).
  <у>  
 Источник: https://www.w3schools.com/tags/tag_u.asp
 Ответ Тессы Лэнг 
 Тег  в HTML означает подчеркивание и используется для подчеркивания текста, заключенного в тег . Этот тег обычно используется для подчеркивания слов с ошибками. Этот тег требует как начального, так и конечного тега. Пример 2: Альтернативный способ использования тега  для подчеркивания текста. ,Примечание. Этот тег устарел из HTML 4.1 и переопределен в HTML 5.В приведенных ниже примерах показан тег  в HTML: Пример 1: , Пишете код в комментарии?
Пожалуйста, используйте ide.geeksforgeeks.org,
создать ссылку и поделиться ссылкой здесь.
  Синтаксис:    
   Содержание...   
    Источник: https://www. geeksforgeeks.org/html-u-tag/
 Ответ Алана Палмера 
 Ссылка на элементы HTML. названия книг.
  Этот абзац содержит неправильно
написанное слово.
  
 Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
 Ответ Роя Хеберта 
 Вы можете просто использовать тег  в HTML, чтобы подчеркнуть текст. Теперь, как вы видите, это очень простой подход к подчеркиванию текста, но я думаю, что было бы намного лучше использовать CSS. Почему? Мы можем создать подчеркнутый текст в HTML двумя способами, используя HTML-тег  внутри
 или
. Например:
    
 Этот h3 подчеркнут.     
 Как упоминалось выше, у нас есть лучший способ подчеркивания текста, который делается с помощью свойства CSS text-decoration, которое дает больше контроля над стилем подчеркивания, цветом и т. д.
    
 Это подчеркивается тегом u.   
 Это подчеркивается с помощью оформления текста CSS 
 Еще одно завершение оформления текста с помощью CSS 
 Еще одно использование CSS text-decoration-line.
 Еще один с использованием CSS, но на этот раз также с перечеркиванием. 
  
 УСБ
  .firstUnderline{
  украшение текста: подчеркивание
  
}

.SecondUnderline{
  text-decoration:подчеркнутый волнистый зеленый
  
}
.ThirdUnderline{
  строка оформления текста: подчеркивание;
}
. UnderlineOverline{
  оформление текста: подчеркивание над чертой;
}
  
 HTML
  <р>
  Подчеркнуто с помощью Border-bottom


Подчеркивание пунктиром высотой 5 пикселей


Перенос текста между строк

 
 УСБ
  .простойПодчеркнуть {
  нижняя граница: 2px сплошной currentColor;
}

.Dottedunderline{
  нижняя граница: 5 пикселей с красной пунктирной линией;
}
.underline--синий {
  цвет нижней границы: синий;
}
  
 Источник: https://qawithexperts.com/article/html/creating-underline-text-in-html-with-or-without-css/334
 Тег HTML 4 U 
 В HTML 4 тег    используется для отображения подчеркнутого текста.
 Тег    устарел в HTML 4.01 и изначально был устаревшим в HTML 5. Однако с тех пор он был повторно введен в спецификацию HTML5 как допустимый элемент HTML5.
 Несмотря на то, что этот тег был повторно представлен в HTML5, в HTML5 он имеет немного другое значение. При этом большинство браузеров по-прежнему отображают элемент    с подчеркиванием, поэтому вам следует избегать его использования там, где его можно спутать с гиперссылкой.
 Также смотрите свойство CSS text-decoration для получения дополнительной информации о подчеркивании текста.
 Пример 
 HTML-тег u отображает подчеркнутый текст.
 Атрибуты 
 Атрибуты, специфичные для этого тега:
 Нет   
 Другие атрибуты:
 Атрибут  Описание
 dir  Указывает направление текста
 class  Широкий идентификатор документа.
 id  Широкий идентификатор документа
 язык  Код языка
 title  Определяет заголовок, связанный с элементом.Многие браузеры отображают это при наведении курсора на элемент (аналогично «подсказке»).
 Стиль  Встроенный стиль (CSS)
 onclick  Внутреннее событие (см. обработчики событий)
 ondbclick  Внутреннее событие (см. обработчики событий)
 onmousedown  Внутреннее событие (см. обработчики событий)
 onmouseup  Внутреннее событие (см. обработчики событий)
 onmouseover  Внутреннее событие (см. обработчики событий)
 onmousemove  Внутреннее событие (см. обработчики событий)
 onmouseout  Внутреннее событие (см. обработчики событий)
 onkeypress  Внутреннее событие (см. обработчики событий)
 onkeydown  Внутреннее событие (см. обработчики событий)
 onkeyup  Внутреннее событие (см. обработчики событий)
 Попробуйте сами! 
 Измените приведенный ниже код, затем нажмите  Обновить  .Ниже приведены атрибуты.
 Информация на этой странице основана на HTML версии 4.01. Большинство современных браузеров теперь поддерживают HTML5.
 См. HTML5    Тег для HTML5-версии вышеуказанного элемента.
 См. этот список тегов HTML для получения последнего списка элементов HTML.
 Как подчеркнуть текст в html 
 Язык гипертекстовой разметки (HTML) — это язык, на котором разрабатывается интерфейс любого веб-сайта, который может быть статическим или динамическим. Веб-сайты, которые присутствуют в Интернете и созданы онлайн, такие как Magento и WordPress, также работают на основных принципах HTML.Как и в других языках программирования, в HTML также есть команды, известные как теги, и эти теги записываются в угловых скобках. Как и любой другой текстовый редактор, HTML также позволяет добавлять в код текст, изображения, видео или любой другой элемент. Основным содержимым HTML является текст. Html включает в себя множество функций, которые можно применить к тексту, чтобы улучшить дизайн. Подчеркивание текста — это основная и важная функция, используемая для оформления текста в соответствии со спросом и требованиями веб-сайта. Если текст подчеркнут, он может показать что-то другое или по-другому воздействует на читателя.Мы прольем свет на часть содержания подчеркивания текста в этом руководстве.
 Необходимые предметы первой необходимости  Для реализации кода HTML используются два основных инструмента:
 Используется два программного обеспечения; один используется как вход, а другой как выход. Мы пишем код в одном инструменте, а из другого видим результат. Текстовый редактор берет код. По умолчанию в Window есть редактор блокнота, поэтому мы будем использовать его в нашем руководстве. Браузер — это платформа, необходимая для запуска в ней html-файла.По умолчанию в Windows есть Internet Explorer для запуска текстовых файлов. Кроме того, для выполнения этой задачи нам понадобятся теги html и CSS.
 Формат и синтаксис  Концепция подчеркивания текста возможна при знании основных функций и возможностей HTML. Тело HTML разделено на две части. Одна голова, а вторая тело. Заглавная часть пишется первой; в этой части мы включаем заголовок веб-страницы. Этот заголовок виден, когда мы запускаем html-страницу в браузере.Внутренняя укладка также вводится внутрь тела головы. В то же время часть body содержит все остальные теги, включая текст, изображение и т. д.
 HTML имеет открывающий и закрывающий теги. Оба тега пишутся до и после текста. HTML-код, написанный в блокнотах, сохраняется как в блокноте, так и в расширениях браузера. Расширение .txt сохраняется в виде кода, тогда как в случае html оно сохраняется для браузера. Файл текстового редактора должен быть сохранен с расширением html. Например, образец.html. Затем вы увидите, что файл сохранен со значком текущего браузера, который вы используете для этой цели.
 Изображение ниже представляет собой пример кода HTML. В заглавной части мы добавили название заголовка. А в основной части добавляется тег абзаца.
 
 Предварительный просмотр вывода показан ниже на изображении.Абзац также отображается по умолчанию без какого-либо форматирования.
 
 Пример 1  В этой иллюстрации мы ничего не меняем в голове. Мы добавили абзац, как описано в примере html-кода. Абзац состоит из трех строк. Мы хотим подчеркнуть среднюю линию абзаца.
 Этот тег также имеет закрывающий тег, как и другие. Мы использовали тег в абзаце, который используется для перехода к следующей строке. Он также имеет открывающий и закрывающий теги. Но здесь также можно использовать только закрывающий тег.
 
 Теперь сохраните файл и запустите его в браузере.
 
 Из вывода вы увидите, что средняя строка абзаца подчеркнута тегом, который мы использовали в теге html.
 Пример 2  В первом примере мы подчеркнули все предложение. Но в этом случае мы хотим доминировать только в одном слове. Поэтому мы будем использовать тег подчеркивания с этим словом. Синтаксис для этого подхода также одинаков. Давайте посмотрим на пример кода, приведенного ниже.
 
 Когда мы запускаем код в браузере, мы получаем вот такой результат.
 
 Пример 3  Это пример встроенного стиля.Этот стиль добавляется внутри тега абзаца или тега заголовка, независимо от того, что вы хотите отформатировать. В этом примере мы должны написать код стиля в теге заголовка, чтобы получить результат и понять его. Кроме того, весь текст остается нетронутым.
  png" data- lazy-src="data:image/svg xml", width="974">
 Выравнивание и форматирование текста аналогичны выделению текста полужирным шрифтом, курсивом и т. д.являются основной частью дизайна веб-страницы и считаются элементами украшения. Таким образом, тег содержит в себе оператор text-decoration. Теперь сохраните текст и запустите файл в браузере. Из вывода видно, что заголовок подчеркнут, а другой текст — нет, потому что мы применили встроенный текст только в теге заголовка.
 
 Пример 4  Это пример внутренней стилизации.Это означает, что тег стиля записывается внутри заголовка html. Класс объявляется с именем точки. Этот класс инициализируется внутри тега стиля. Это сделано для того, чтобы форматирование выполнялось легко путем обращения к классу. Принимая во внимание, что тег стиля и описание такие же, как и внутренний css.
 
 Весь текст в абзаце подчеркивается добавлением имени класса.Запустите код файла в браузере.
 Так подчеркнутый тег описывается внутри класса с помощью внутреннего тега.
 
 Из вывода видно, как работают теги внутри html-тела.
 Пример 5  Это тоже пример внутреннего css.В котором код стиля, написанный в теле заголовка, одинаков.
 
 Подчеркнутое здесь имя класса. Принимая во внимание, что тег, который написан внутри тега для обозначения имени класса, отличается от тега . Не обязательно каждый раз использовать , поэтому используем вместо .   
 <класс диапазона = «подчеркивание»>
 Вы можете просмотреть вывод.
 
 Пример 6  В большинстве случаев требуется подчеркнуть текст не прямой линией, а другим способом. Или, в Microsoft Word, вы заметили, что слово с неправильным написанием украшено короткой подчеркнутой линией. Этот подход также имеет объявление класса внутри тела заголовка.Принимая во внимание, что класс также вводится внутри тега.
 <стиль>
 u.правописание{
 оформление текста: подчеркивание зеленой волнистой линией;
 }
 
 Вы можете заметить, что в предыдущих примерах текст был подчеркнут, потому что по умолчанию подчеркнутая линия прямая. Но можно сделать в них завитки, чтобы получилась волнистая. Было бы лучше, если бы вы упомянули этот тег внутри внутреннего тега. Результат может отображаться в браузере.
 
  Вывод: 
 
 Заключение  В этой статье объясняются примеры подчеркивания текста.Многие подходы используются для сохранения и запуска текстового файла для получения результатов на веб-странице или веб-сайте.
 HTML Text 
 Отображение текста в HTML 
 Чтобы отобразить текст типа "Это моя первая html-страница", вы должны поместить эту строку между ... html-тегами.
 
 Исходный код HTML: 
 Это моя первая html-страница Как выделить текст HTML жирным шрифтом? 
 ... html-теги отображают жирный текст на странице html
 Это HTML Жирный текст
 Приведенный выше код будет отображать текст жирным шрифтом на вашей html-странице. Как отобразить текст HTML курсивом? 
 ... html-теги отображают текст курсивом на html-странице
 Это текст HTML, выделенный курсивом
 Приведенный выше код будет отображать текст курсивом на вашей html-странице.
 Как подчеркнуть текст HTML? 
 ... теги будут подчеркивать текст HTML
 Это подчеркнутый текст HTML
 В приведенном выше коде подчеркнут приведенный выше HTML-текст.
 Вы можете использовать вышеуказанные теги (жирный, курсив и подчеркивание) вместе в одной строке.
 
 Исходный код HTML: 
 Текст «HTML» будет отображаться жирным шрифтом, курсивом и подчеркиванием.  HTML  ....  HTML  и  HTML>  Вы можете использовать эти три тега (жирный, курсив и подчеркивание) вместе в одном слове.

Атрибуты	Значение	Описание
идентификатор	уникальное_имя	Объявлен уникальный идентификатор элемента.
класс	имя_класса	Объявлено одно или несколько имен классов для элемента.
стиль	модели	Встроенные стили CSS определяют элемент.
Название	название	Укажите дополнительные сведения о содержании элемента, это будет отображаться как "подсказка" для элементов.

Атрибуты	Значение	Описание
онфокус	сценарий	фокусируется на объекте при запуске скрипта.
размытие	сценарий	теряет фокус на объекте при запуске скрипта.
прерывание	сценарий	прерывается на объекте при запуске скрипта.
сменный	сценарий	получает любое изменение объекта при запуске скрипта.
перед выгрузкой	сценарий	выгружается на объект при запуске скрипта.
по клику	сценарий	щелкнул объект при запуске скрипта.
ondblclick	сценарий	двойной щелчок по объекту при запуске скрипта.
нажатие клавиши	сценарий	нажата при запуске скрипта.
нажатие клавиши	сценарий	нажимается на элемент, а затем отпускается при запуске скрипта.
onkeyup	сценарий	отпускается над элементом при запуске скрипта.
	сценарий	кнопка мыши была нажата над элементом при запуске скрипта.
onmouseout	сценарий	указатель мыши отпускается над элементом при запуске скрипта.
перемещение мыши	сценарий	Запуск Указатель мыши перемещается при запуске скрипта.
при наведении мыши	сценарий	выполнить перемещение указателя мыши при запуске сценария.
на мышке	сценарий	кнопка мыши отпускается при запуске скрипта.
при сбросе	сценарий	была сброшена при запуске скрипта.
по выбору	сценарий	Выберите содержимое при запуске скрипта.
при отправке	сценарий	была отправлена при запуске скрипта.
под нагрузкой	сценарий	объект загружается при запуске скрипта.
сменный	сценарий	позволяют изменить объект при запуске скрипта.
при разгрузке	сценарий	выгружается в окно браузера при запуске скрипта.
ондраг	сценарий	Элемент перетаскивается при запуске скрипта.
ондрагенд	сценарий	элемент перестает перетаскиваться при запуске скрипта.
Драгентер	сценарий	элемент перетаскивается при запуске скрипта.
на накладке	сценарий	остается перетаскиваемым при запуске скрипта.
ондраговер	сценарий	элемент находится над целью, перетаскиваемой при запуске скрипта.
ондрагстарт	сценарий	элемент начинает перетаскиваться при запуске скрипта.
	сценарий	удаляется при запуске скрипта.
при ошибке	сценарий	возникает при запуске скрипта.
в сообщении	сценарий	отображается при запуске скрипта.
при ошибке	сценарий	возникает при запуске скрипта.
на колесике мыши	сценарий	колесо мыши будет вращаться при запуске скрипта.
при прокрутке	сценарий	полоса прокрутки прокручивается при запуске скрипта.
изменение размера	сценарий	должен изменяться при запуске скрипта.
по выбору	сценарий	выбрано все содержимое элемента при запуске скрипта.
на складе	сценарий	должен быть сохранен в цели при запуске скрипта.

Атрибуты, специфичные для этого тега:
Нет
Другие атрибуты:
Атрибут	Описание
dir	Указывает направление текста
class	Широкий идентификатор документа.
id	Широкий идентификатор документа
язык	Код языка
title	Определяет заголовок, связанный с элементом.Многие браузеры отображают это при наведении курсора на элемент (аналогично «подсказке»).
Стиль	Встроенный стиль (CSS)
onclick	Внутреннее событие (см. обработчики событий)
ondbclick	Внутреннее событие (см. обработчики событий)
onmousedown	Внутреннее событие (см. обработчики событий)
onmouseup	Внутреннее событие (см. обработчики событий)
onmouseover	Внутреннее событие (см. обработчики событий)
onmousemove	Внутреннее событие (см. обработчики событий)
onmouseout	Внутреннее событие (см. обработчики событий)
onkeypress	Внутреннее событие (см. обработчики событий)
onkeydown	Внутреннее событие (см. обработчики событий)
onkeyup	Внутреннее событие (см. обработчики событий)

Comments

Leave Comment

 CloseLeave a Comment
 Отменить ответ
 
 
  
 What is the sum of:  0 + 0 =