Структурная разметка тегов

Структурная разметка

При верстке веб-страницы текст размечают тегами.

Теги добавляют тексту дополнительное значение и позволяют браузерам правильно отображать

структуру страницы.

В этой главе мы заострим внимание на том, как добавить разметку к тексту,

выводимому на страницы. Вы изучите:

1: структурную разметку

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

1: семантическая разметка

Предоставляющую дополнительную информацию, например на какое слово или словосочетание в предложении

делается логическое ударение, является ли какой-то  написанный текст цитатой, какова расшифровка акронима и т.д.

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

Основной заголовок

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня
Заголовок 6-го уровня

В языке HTML существует шесть уровней заголовок:

<h1> используется для основных заголовков; с <h2> по <h6>- для подзаголовков.


<p>

Для создание абзаца заключите текст в открывающий <p> и закрывающий </p> теги.

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

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

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

<p>Текст</p>.


<b>

Чтобы выделить текст полужирным начертанием шрифта, нужно поместить его между тегами <b> и </b>,

Элемент <b> также обозначает фрагмент текста (например, ключевые слова ),

внешний вид которого будет отличаться от основного текста абзаца.

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

Вот так можно вывести текст с полужирным начертанием шрифта.

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

<b>Текст</b>.


<i>

чтобы отобразить текст с курсивным начертанием шрифта, его следует поместить между тегами <i> и </i>.

Элемент <i> определяет фрагмент текста, отличающийся от основного текста,

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

Вот так можно отобразить текст курсивом.

Это сорт картофеля Solanum tuberosum.

Капитан Кук приплыл в Австралию на корабле Индевор.

<i>Текст</i>.


<sup>

Элемент <sup> используется для выделения символов, которые должны быть отображены как

надстрочные, к примеру, ряд математических понятий, таких как возведение в степень

Сейчас мы изучим формулу е=мс2.

В 2009 году концентрация СО2 в атмосферном воздухе возросла на 2 ppm.

<sup>2ppm</sup>.


<sub>

Элемент <sub> используется для отображения символов как подстрочных. Подстрочные символы, как правильно, используется в химических формулах. <sub>H20</sub>.


<br />

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

однако если вы хотите добавить перевод строки в пределах какого -либо абзаца, то вам понадобится

вставить специальный тег-<br />.


<hr />

Чтобы визуально разделить темы книги или сцены, с помощью тега <hr /> вы можете добавить в текст

горизонтальную  линию.

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


Юпитер больше, чем все остальные планеты вместе взятые.

 

<p>Венера ― единственная планета, вращающаяся по часовой стрелке.</p>
<hr />
<p>Юпитер больше, чем все остальные планеты вместе взятые. </p>

<hr />


<strong>

Элемент <strong>

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

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

По умолчанию браузеры отображают содержимое элемента <strong> шрифтом с полужирным начертанием.

<p><strong>Будьте осторожны:</strong> В данной местности орудуют воры-карманники.</p>
<p>Данная игрушка содержит большое количество мелких деталей – и <strong>не предназначена для детей младше пяти лет.</strong></p>

Будьте осторожны: В данной местности орудуют воры-карманники.

Данная игрушка содержит большое количество мелких деталей – и не предназначена для детей младше пяти лет.

<strong>Текст</strong>


<em>

Элемент <em> используется для обозначения логического ударения, которое несколько

изменяет значение всего предложения.

По умолчанию браузеры отображают содержимое элемента <em> шрифтом с курсивным начертанием.

<p>Я <em>думаю</em>, Анна была первой.</p>
<p>Я думаю, <em>Анна</em> была первой.</p>
<p>Я думаю, Анна была <em>первой</em>.</p>

Я думаю, Анна была первой.

Я думаю, Анна была первой.

Я думаю, Анна была первой.


<blockquote>

Для создания цитат в языке HTML используются два элемента

Элементы <blockquote>

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

что внутри элемента <blockquote> необходимо использовать и элементы <p>.

В большинстве своем браузеры склонны к выделению содержимого элемента <blockquote> отступами,

<blockquote cite="http://ru.wikipedia.org/wiki/Винни-Пух">
<p>— Интересно, что это так бумкнуло? Не мог же я один наделать столько шума. И где, интересно знать, мой воздушный шарик? И откуда, интересно, взялась эта тряпочка?</p>
</blockquote>
<p>Как сказал А.А. Милн, <q> Некоторые люди говорят с животными. И лишь немногие слушают. Вот в чем проблема.</q></p>

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

Как сказал А.А. Милн,  Некоторые люди говорят с животными. И лишь немногие слушают. Вот в чем проблема.


<q>

Элемент <q> принято использовать для более коротких цитат, помещающихся внутри абзаца текста.

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

lnternet Explorer этого не делает, потому многие избегают использовать данный элемент.


<abbr>

При употреблении в тексте какого -либо акронима или аббревиатуре следует воспользоваться тегом  <abbr>.

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

Пр. Стивен Хокинг ― физик-теоретик и космолог.

NASA проводит несколько невероятных космических экспериментов.

<p><abbr title="Профессор">Пр.</abbr> Стивен Хокинг ― физик-теоретик и космолог.</p>
<p><acronym title="Национальное агентство по аэронавтике и исследованию космического пространства">NASA</acronym> проводит несколько невероятных космических экспериментов.</p>


<cite>

Элемент <cite> может быть использован при оформлении ссылки на какой-та первоисточник,

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

В спецификации HTML не рекомендуется использовать элемент <cite> с именами .

По всему миру было продано более десяти миллионов копий книги Краткая история времени Стивена Хокинга.

<p>По всему миру было продано более десяти миллионов копий книги <cite>Краткая история времени</cite> Стивена Хокинга.</p>


<dfn>

Объяснение нового термина в тексте называется <<определением>>.

Элемент <dfn> используется для обозначения определения какого -либо нового термина.

<p><dfn>Черная дыра</dfn> ― это область в пространстве-времени, гравитационное притяжение которой настолько велико, что покинуть её не могут даже объекты, движущиеся со скоростью света (в том числе и кванты самого света).</p>


<address>

Элемент <address> имеет довольно специфическое назначение: он содержит контактные данные создателя

веб-станицы. Он может (но не должен) содержать почтовый адрес, а также электронной почты или номер

телефона.

email@mywebsite.ru

г. Москва, ул. Долгоруковская д. 25.

<address>
<p><a href="mailto:email@mywebsite.ru">email@mywebsite.ru</a></p>
<p>г. Москва, ул. Долгоруковская д. 25.</p>
</address>


<ins>

<del>

Элемент <ins> может быть использован для отображения контента, добавленного

в документ, в то время как <del> для отображения удаленного контента.

Содержимое элемента <ins>, как правило, выделяется подчеркиванием, тогда как элемента <del> зачеркиванием.

Это была худшая лучшая из ее идей

<p>Это была <del>худшая</del> <ins>лучшая</ins> из ее идей</p>


<s>

Элемент <s> позволяет обозначить, что какая-то информация ошибочна или устарела (но при этом ее не

следует убирать со страницы). Как правило, содержимое элемента <s> будет выведено на экран перечеркнутым.

Ноутбук Samsung:

Старая цена: 31900 руб.

Новая цена: всего 11999 руб

<p>Ноутбук Samsung:</p>
<p><s>Старая цена: 31900 руб.</s></p>
<p>Новая цена: всего 11999 руб.</p>


 

Понравилась статья? Поделиться с друзьями:
Блог  Измайлова Павла
Комментариев: 3
  1. Измайлов Павел (автор)

    Если кому стала интересно делитесь ссылками с друзьями.

  2. Анна

    спасибо искала список тегов. :oops:

    1. Измайлов Павел (автор)

      Спасибо рад помочь

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: