Урок 3. Заголовки и форматирование текста
Заголовки в HTML
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького: h2 — самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
<html>
<head>
<title>html заголовки</title>
</head>
<body><h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5></body>
</html>
Вышеуказанный код отобразит следующее
Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту!Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы. |
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
<html>
<head>
<title>html параграфы</title>
</head>
<body><p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p></body>
</html>
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
<html>
<head>
<title>html выравнивание параграфов</title>
</head>
<body><p align="left">Текст первого абзаца.
</body>Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</html>
Текст первого абзаца. Текст первого абзаца.</p>В браузере отобразится следующее
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
<html>
<head>
<title>центрирование в html</title>
</head>
<body><center>Текст по центру</center>
</body>
</html>
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
<html>
<head>
<title>html выделение жирным</title>
</head>
<body><p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю,
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p></body>
</html>
В браузере отобразится следующее
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом.
Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
<html>
<head>
<title>Допустим страница о машинах</title>
</head>
<body><i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>.
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.
<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p></body>
</html>
В браузере отобразится так
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
<html>
<head>
<title>Перечёркнутый текст в html</title>
</head>
<body>Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>
</html>
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
<html>
<head>
<title>индексы в html</title>
</head>
<body><p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.
<p>H<sub>2</sub>O - химическая формула воды.</p></body>
</html>
</p>В браузере отобразится следующее
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью
CSS
данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
<html>
<head>
<title>Тег font в html</title>
</head>
<body><font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>
</html>
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
| Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup |
<html>
<head>
<title>Тег pre в html</title>
</head>
<body><pre>Как захотели ввести текст
так он и отобразился! =)</pre></body>
</html>
В браузере будет так
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег abbr в html</title>
</head>
<body><abbr title="Hypertext Markup Language">HTML</abbr>
</body>
</html>
В браузере будет выглядеть так
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное.
Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег acronym в html</title>
</head>
<body><acronym title="Hypertext Markup Language">HTML</acronym>
</body>
</html>
Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.
У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии
<html>
<head>
<title>Тег font в html</title>
</head>
<body>Обычная линия
<hr>Линия по центру длиной 50% от ширины блока, толщина линии 2
<hr align="center" size=2 width=50%>Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>
</html>
В браузере
Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!
HTML и семантика — HTML+
Вы здесь: Главная » HTML » Базовый HTML » HTML и семантика
10.
04.2021
От Админ
Оставить комментарий
Если вы только начали изучать HTML, то загадочное слово «семантика«, должно быть, поставило вас в тупик. Семантика — это раздел лингвистики, изучающий смысловое значение единиц языка. Начав разбираться в нем, можно уйти далеко в философские размышления, либо заняться разбором предложения на подлежащее, сказуемое, определение, дополнение и заложенного в них смысла (кто и что сделал, как этоо кто-то описан, что дополняло действие и т.п.) . Так далеко заходить не хотелось бы, поэтому мы для начала обратимся за определением того, что такое семантика для HTML, к Википедии:
Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы.
То есть главной целью семантики в HTML является использование определенных тегов в определенных ситуациях и так, чтобы эти теги описывали текст, заключенный в них в соответствии с выполняемой им функцией. Очень много таких тегов, которые имеют определенное их названием предназначение появилось в стандарте HTML5.
Давайте разберем использование нескольких тегов на примере статьи. По английски статья — это article. Как здорово, что в HTML5 у нас для этого существует специальный тег, который так и называется — <article>. Дальше: вы статью без заголовка видели? Я — нет. Поэтому, и тег <article> предполагает наличие заголовка. Вот тут у нас выбор широкий — заголовков в HTML, причем не только в 5-м, а во всех его версиях ах 6 штук. Давайте на них посмотрим (открыть в отдельной вкладке):
В коде это будет выглядеть так:
Заголовки от 1-го до 6-го уровня
<h2>Заголовок 1-го уровня</h2> <h3>Заголовок 2-го уровня</h3> <h4>Заголовок 3-го уровня</h4> <h5>Заголовок 4-го уровня</h5> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6>
1 2 3 4 5 6 | <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:
Абзацы с текстом-заполнителем Lorem ipsum…
<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>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. <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> |
Voluptatibus, vero fugit temporibus. Dolores obcaecati ratione excepturi laudantium consectetur. Incidunt officia provident numquam nisi accusantium possimus officiis, reiciendis sapiente praesentium.</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>
1 2 3 4 5 6 | <article> <h2>Что вы знаете о Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <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. </article> |
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>Давайте посмотрим, как это будет выглядеть на странице (открыть в отдельной вкладке):
Ничего особенного — просто заголовок и просто абзацы! Тем не менее мы имеем очень логичную семантическую структуру, в которой есть распределение контента на заголовки и абзацы.
Идем дальше. Статья с тремя абзацами — не очень интересно. Да и одного заголовка нам недостаточно. Хотелось бы, например, в этой статье рассказать, откуда появился текст 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), но при этом текст оформляется тегом <em>, а при нажатии на 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-валидатором. Их очень много.
Просмотров: 720
Метки: семантика
Автор: Админ
[HTML] — разница между тегами em и курсивом в HTML —
Узнайте, как теги и используются в HTML и чем они отличаются. Поймите, когда использовать выделение или курсив при написании кода.
👩💻 Технический вопрос
Спросил 26 дней назад в HTML by Matt
В чем разница между тегами em и курсивом в HTML?
эм курсив HTML я теги
Дополнительные вопросы по кодированию в HTML👩💻 Технический вопрос
Спросил 10 часов назад в HTML by Emer
как получить подчеркнутое деление на веб-странице
HTML форма разделение Тег
CSS функция появление стиль
👩💻 Технический вопрос
Спросил 11 часов назад в HTML Мэтт
В чем разница между div и section в HTML?
раздел раздел группа стиль семантический отчетливый веб-страница организация тема
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 13 часов назад в HTML by Kateryna
целевая страница для демонстрации 3 продуктов в одном ряду, добавьте раздел нижнего колонтитула с контактной информацией и картой Google
HTML CSS JavaScript целевая страница нижний колонтитул контакт API Карт Google карта маркер
👩💻 Технический вопрос
Спросил 13 часов назад в HTML by Laura
Анимация группы изображений
CSS JavaScript анимация спрайт фоновое положение @ключевые кадры изображения
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 1 день назад в HTML Ингрид
Изменить стиль списка и подзаголовка по умолчанию
CSS список подзаголовок стиль размер шрифта вес шрифта
👩💻 Технический вопрос
Спросил 2 дня назад в HTML от Джули
могу ли я иметь тот же класс и идентификатор
ID сорт такой же HTML элемент стиль манипулировать JavaScript уникальный лучшая практика
👩💻 Технический вопрос
Спросил 3 дня назад в HTML by Ope
как сделать чтобы ссылка открывала другое окно в html
ссылка HTML открыть Окно цель атрибут новое окно якорь
👩💻 Технический вопрос
Спросил 3 дня назад в HTML by Ope
как включить ссылку в html
ссылка якорный тег href URL-адрес текст пользователь нажмите пример фрагмент кода
👩💻 Технический вопрос
Спросил 3 дня назад в HTML by Ope
как поставить ссылку в html
ссылка якорь URL-адрес гиперссылка текст
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 3 дня назад в HTML Джулиана
выровнять изображение по левой стороне моего документа
HTML изображение левый документ стиль плавать поле справа
👩💻 Технический вопрос
Спросил 4 дня назад в HTML by Banin
HTML ссылка внутри списка
HTML ярлык список связь ли а href
👩💻 Технический вопрос
Спросил 4 дня назад в HTML по Олагунью
как добавить кнопку "подать заявку" в центр страницы с интервалом
HTML CSS форма API функция фон центр интервал кнопка подать заявку сейчас
👩💻 Технический вопрос
Спросил 4 дня назад в HTML by Phoo Shwe Yee
чем отличаются эти два кода? пример кода пример кода
HTML связь href цель _blank
👩💻 Технический вопрос
Спросил 4 дня назад в HTML Стефани
как убрать точки с ли?
HTML CSS стиль списка никто ли Элемент списка пункт
👩💻 Технический вопрос
Спросил 4 дня назад в HTML Джози
как добавить элемент заголовка
заголовок элемент HTML ярлык h2 h3 h4 МДН Документация
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 4 дня назад в HTML Тина
Спросите чье-то имя и скажите «Добро пожаловать» + имя
HTML форма API функция фон
👩💻 Технический вопрос
Спросил 4 дня назад в HTML by Hsu Yee
Для чего нужен alt="Женский код"?
альтернативный атрибут изображение описание слабовидящий дисплей
👩💻 Технический вопрос
Спросил 4 дня назад в HTML by Emer
как поставить второй заголовок
заголовки HTML теги текст документы пример
👩💻 Технический вопрос
Спросил 4 дня назад в HTML Мастане
когда мы используем .
./ в ссылках? HTML связь относительный путь каталог файл Веб-разработка таблица стилей
👩💻 Технический вопрос
Спросил 5 дней назад в HTML Автор Lois Nkeiru
как создать пробел между иконкой и текстом в html
значок текст HTML CSS охватывать неразрывный пробел прокладка
👩💻 Инструкции по коду начальной загрузки
Спросил 5 дней назад в HTML by Brittany
5 столбцов 3 строки
HTML столбцы ряды сетка макет
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 5 дней назад в HTML от Ариан
сделать изображение фоном, но заполнить весь сайт без повторения
фон изображение неповторяющийся крышка фиксированный
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 5 дней назад в HTML от Tyzhaya
сделать круглую кнопку
HTML кнопка круглый CSS ширина высота
👩💻 Технический вопрос
Спросил 5 дней назад в HTML by Alysse
как добавить ящик
div коробка CSS ширина высота граница набивка допуск стиль
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 5 дней назад в HTML Сюзанна
Как начать базовую HTML-страницу
HTML Текстовый редактор Базовая структура ДОКТИП голова тело заголовок заголовки абзацы изображений ссылки CSS JavaScript
👩💻 Технический вопрос
Спросил 6 дней назад в HTML Мэтт
Как создать раскрывающийся список в HTML?
выбрать вариант форма представлять на рассмотрение падать HTML
👩💻 Технический вопрос
Спросил 6 дней назад в HTML Лоис Нкеиру
как закодировать изображение в HTML
изображение изображение источник альтернативный ширина высота выровнять
👩💻 Технический вопрос
Спросил 6 дней назад в HTML Иванна
сделать текст жирным html
HTML сильный б текст полужирный
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 6 дней назад в HTML by Stella
Адаптивный веб-сайт ресторана с меню, заказом, местоположением и контактной панелью навигации.
С разделом о ресторане и живой формой заказа меню с живой оплатой HTML CSS JavaScript форма меню заказ навигация расположение контакт платеж
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 6 дней назад в HTML by Eli
как поставить кнопку на изображение?
HTML CSS кнопка изображение позиция абсолютный нижний верно фон набивка радиус границы
👩💻 Инструкции по коду Rails
Спросил 7 дней назад в HTML by Matt
Написать представление в erb показать все Публиковать из базы данных
HTML эрб база данных переменная экземпляра оказывать вид содержание название
👩💻 Технический вопрос
Спросил 7 дней назад в HTML Мэтт
Как создать фиолетовую кнопку в HTML
HTML кнопка CSS стиль фоновый цвет цвет фиолетовый
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 8 дней назад в HTML by Cheri
использовать изображение в качестве фона тела
HTML CSS JS изображение фон путь родственник размер крышка позиция центр повторить нет повтора
👩💻 Технический вопрос
Спросил 8 дней назад в HTML от Morgane
добавить видео на фон
HTML видео фон CSS Автовоспроизведение приглушенный петля минимальная ширина минимальная высота z-индекс
👩💻 Технический вопрос
Спросил 8 дней назад в HTML by Morgane
добавить значок html
HTML икона библиотека шрифтов CDN сорт фас фа-стар
👩💻 Технический вопрос
Спросил 9 дней назад в HTML от Tenisha
как мне добавить изображение из моих файлов в мой html
изображение ярлык источник атрибут альтернативный Путь к файлу HTML Веб-документы MDN
👩💻 Технический вопрос
Спросил 9дней назад в HTML by Abigail
как сделать столбцы с несколькими строками
HTML стол столбцы ряды состав Примеры содержание
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 9 дней назад в HTML by Vincent
создайте целевую страницу с разделом о нас и свяжитесь с нами для раздела о нас Я хочу, чтобы слайд-шоу повторялось и сводка о компании для раздела продукта Я хочу, чтобы фотографии продукта были в левом верхнем углу внизу правильное положение и текст продукта для отображения сбоку при наведении на него курсора мыши для связи с нами.
я хочу отображать нашу информацию, такую как номер адреса и адрес электронной почты. из этой компании форма API функция целевая страница логотип компании слайд-шоу связаться с нами информация о продукте фон
👩💻 Технический вопрос
Спросил 9 дней назад в HTML Соня
Какое шестнадцатеричное число для светло-голубого?
шестнадцатеричный светло-синий HTML цвет
👩💻 Технический вопрос
Спросил 9дней назад в HTML Дженнифер
HTML тег гиперссылка href атрибут URL-адрес SheCodes
👩💻 Технический вопрос
Спросил 10 дней назад в HTML Анна
зачем использовать так много элементов div в html?
HTML див элементы состав стиль веб-страница организовать CSS
👩💻 Технический вопрос
Спросил 10 дней назад в HTML Мария Изабель
span - это элемент?
HTML элемент в соответствии контейнер стиль JavaScript функция атрибут
👩💻 Технический вопрос
Спросил 10 дней назад в HTML by Raven
могу ли я объявить класс и идентификатор для одного и того же элемента
HTML сорт ИДЕНТИФИКАТОР элемент CSS стиль
👩💻 Технический вопрос
Спросил 10 дней назад в HTML by Alysse
как добавить ссылку?
HTML связь href атрибут URL-адрес
👩💻 Технический вопрос
Спросил 10 дней назад в HTML by Matt
Как открыть ссылку в новом окне?
HTML якорь связь цель новое окно
👩💻 Технический вопрос
Спросил 10 дней назад в HTML Мэтт
в чем разница между strong и em в html
HTML сильный Эм важность акцент доступность
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 11 дней назад в HTML Вероника
Ссылка на shecodes
ссылка href HTML SheCodes тег
👩💻 Технический вопрос
Спросил 11 дней назад в HTML от Anete
кнопка является встроенным элементом?
HTML кнопка в соответствии элемент CSS отображать блокировать встроенный блок
👩💻 Технический вопрос
Спросил 11 дней назад в HTML Сибонело
Как добавить текстовое поле в html?
HTML вход текстовое окно форма
👩💻 Технический вопрос
Спросил 11 дней назад в HTML Ясмин Триса
В чем разница между div и span?
HTML див охватывать элементы блочного уровня встроенные элементы стиль позиционирование
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.
js Рубин Идти .NET
В чем разница между HTML-тегом и css «font-style:italic»?
спросил
Изменено 2 года, 8 месяцев назад
Просмотрено 3к раз
Есть ли разница в отображении в браузере между:
test
тест Один предпочтительнее другого? Существуют ли разные сценарии для каждого?
Быстрый jsfiddle не показывает никакой визуальной разницы.
- html
- css
Pre-HTML5 не было никакой разницы ни в визуале, ни в семантике; i , как и b , s и u , были презентационным элементом. Это отличается от em , strong , del и ins соответственно.
В HTML5 элемент i имеет особое значение, которое визуально представляется в виде текста, выделенного курсивом. Его не следует использовать для представления всего лишь 90 565 любого 90 566 текста, выделенного курсивом. В частности, он отличается от элемента em , который представляет ударение (и, в отличие от i , не обязательно должен быть представлен курсивом). span остается общим фразовым элементом, не имеющим никакого значения.
Обычно я цитирую здесь спецификацию, но я думаю, что сводку MDN легче понять:
Элемент HTML
представляет собой диапазон текста, который по какой-то причине отделен от обычного текста. Некоторые примеры включают технические термины, фразы на иностранном языке или мысли вымышленных персонажей. Обычно он отображается курсивом.
Спецификация по-прежнему предлагает лучшие примеры:
В приведенных ниже примерах показано использование числа 9.
Felis silvestris catus очень милый.
Термин содержание прозы определен выше.
В воздухе витает нечто je ne sais quoi.
В следующем примере последовательность сновидений размечена с использованием
iэлементов.Раймонд пытался уснуть.
Корабль отплыл в четверг, он мечтал. На борту корабля было много людей, в том числе красивая принцесса по имени Кэри. Он наблюдал за ней изо дня в день, надеясь, что она заметила бы его, но никогда не замечала.
Наконец-то ночью он набрался смелости и заговорил с она—
Раймонд резко проснулся, когда сработала пожарная сигнализация.
0545 и элемент:2
Абзац взят с https://html.com/tags/i/#ixzz5VZbm6JhB
Элемент HTML
используется для выделения слов из окружающего текста путем выделения выделенного текста курсивом без дополнительного выделения выделенных курсивом слов.
Пример здесь, здесь я хочу, чтобы слово world было выделено курсивом, поэтому вы можете получить тег окружен.
Hello
World
При использовании CSS font-style:italic вам необходимо указать, где будет применяться стиль.
как в примере.
h3{
стиль шрифта: курсив;
} Hello World
Итак, если вы хотите, чтобы слово world было выделено курсивом, вы должны окружить его между тегом span и сделать его курсивом с помощью CSS.
диапазон{
стиль шрифта: курсив;
} Hello
World
Таким образом, вместо того, чтобы делать это в CSS, HTML предоставил опцию тега .
Тег и может использоваться для обозначения технического термина, фразы из другого языка, мысли, названия корабля и т. д.
5
content — это тег разметки для отображения содержимого в веб-браузере, font-style — это свойство для оформления вашего контента (заголовки, абзацы, список и т.