Тег з – Html теги (на примере p, br, hr) и их атрибуты | Создание сайтов и заработок в сети

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

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

Синтаксис

<head>
 <isindex атрибуты>
</head>

Закрывающий тег

Не требуется

Атрибуты

action
URL программы, осуществляющей поиск.
prompt
Текстовая строка, которая выводится перед текстовым полем. Если этот атрибут не указан, браузер самостоятельно добавит собственный текст.

Аналог CSS

Нет.

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <isindex prompt="Искать текст: ">
  <title>Тег ISINDEX</title>
 </head>
 <body>
  <p>Подъемы на бицепс штанги применяют только после создания начальных объемов сгибателей плеча; 
  причем эти объемы должны иметь правильную, естественно-округлую форму с выраженной пиковостью и 
  достаточной экскурсией сокращения.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид тега <isindex> в браузере Chrome

Браузеры

Браузеры плохо поддерживают атрибуты тега <isindex>, в итоге, поиск должным образом не работает. Взамен этого элемента используйте теги <form> и <input>.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 7.0+ 2.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

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

Закрывающий тег

Обязателен.

Атрибуты

cite
Адрес, который указывает на источник цитаты.

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег Q</title>
  <style>
   q {
    font-family: Times, serif; /* Шрифт с засечками */ 
    font-style: italic; /* Курсивное начертание текста */
    color: #008; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Станислав Лец утверждал: <q>Чаще всего выход там, где был 
    вход</q>.</p>

 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <q>

В каждом языке существуют свои традиции для обозначения кавычек, в русской типографике, например, применяются кавычки вида «...» или „...“. Для изменения типа кавычек используется стилевое свойство quotes.

Браузеры

Браузер Internet Explorer до версии 7 включительно, хотя и понимает тег <q>, но кавычки не ставит. Остальные браузеры кавычки добавляют корректно.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <plaintext> отображает содержимое контейнера «как есть». Пока тег <plaintext> не закрыт, все теги внутри него отображаются как обычный текст. Несмотря на то, что все браузеры поддерживают этот тег, он не входит в спецификацию HTML и его использование осуждается.

Синтаксис

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

Закрывающий тег

Не обязателен.

Атрибуты

Нет.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!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=utf-8">
  <title>Тег PLAINTEXT</title>
 </head>
 <body>
  <p>Пример программы</p>
  <plaintext>
   <h2>Демонстрация метода Подборского</h2>
   while (<>) {
     $org=$_;
     s/\\["']//g;
     s/\/\/[^:].*//;
     s/\/\*.*\*\///g;
     if ($comment == 1) {
       if (s/.*\*\///) {
         $comment = 0;
       }
       else {
         next;
       }
     }
     if (s/\/\*.*//) {
       $comment = 1;
     }
     if (/^\s*#/) {
       next;
     }
   }</plaintext>
 </body>
</html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега <plaintext>

Все браузеры игнорируют закрывающий тег и отображают его в виде текста. Это можно заметить на рис. 1, где показан результат выполнения кода в браузере. Тег <plaintext> действует до конца кода веб-страницы, включая закрывающие теги </body> и </html>.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0 5.0+ 1.0+ 11.7+ 4.0+ 3.0+ 1.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Синтаксис

Текст<wbr>текст

Закрывающий тег

Не требуется.

Атрибуты

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

Результат примера показа на рисунке ниже. При изменении ширины окна текст будет переноситься в тех местах, где указан тег <wbr>.

Рис. 1. Перенос текста в браузере Safari

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera до версии 11.7 не делают переносы длинной строки, пока в стилях для wbr не указано свойство display со значением inline-block, как показано в примере.

Синтаксис XHTML | htmlbook.ru

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

Правила XHTML следующие.

  1. Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
  2. Значения любых атрибутов необходимо заключать в кавычки.
  3. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
  4. Должна соблюдаться правильная вложенность тегов.
  5. Нельзя использовать сокращенные атрибуты тегов.
  6. Вместо атрибута name следует указывать id.
  7. Следует определять DTD (document type definition, описание типа документа) с помощью элемента <!DOCTYPE>.

Теги должны быть набраны в нижнем регистре

Это правило возникло из-за того, что XHTML чувствителен к регистру символов, поэтому для него теги <HR> и <hr> различаются. Чтобы не возникало путаницы, синтаксис принудительно заставляет указывать все теги, а также их атрибуты в нижнем регистре. В примере 3.1 приводится неверное использование тегов.

Пример 3.1. Ошибочное написание тегов

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>XHTML</title>
 </head>
 <BODY>
   <P>Lorem ipsum dolor sit amet...</P>
 </BODY>
</html>

В данном примере теги <body> и <p> набраны прописными символами, что является ошибкой. В примере 3.2 показан корректный код.

Пример 3.2. Правильное написание тегов

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>XHTML</title>
 </head>
 <body>
   <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

Значения любых атрибутов необходимо заключать в кавычки

Хотя в HTML также требуется заключать значения в кавычки, но их отсутствие никак не влияет на корректность кода. Так что можно сказать, что в HTML применение кавычек это лишь рекомендация. В XHTML же использование кавычек возведено в правило и любые значения атрибутов требуется указывать только в них (пример 3.3).

Пример 3.3. Использование кавычек

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>XHTML</title>
  </head>
  <body>
    <table border="1" cellpadding="5" cellspacing="0">
      <tr>
       <th scope="col">Чебурашка</th>
       <th scope="col">Шапокляк</th>
      </tr>
      <tr>
       <td>1</td>
       <td>5</td>
      </tr>
      <tr>
       <td>4</td>
       <td>13</td>
     </tr>
    </table>
  </body>
</html>

В данном примере все атрибуты тега <table>, а также <th> задаются в кавычках.

Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить. В XHTML закрывающий тег требуется всегда и везде. В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.

Пример 3.4. Нет закрывающего тега

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <p>и лезет, крадучись, в самолёт,
  <p>и бомбу в брюхо ему кладёт,
  <p>и прочь неслышно бежит, как кот;
  <p>а дальше - не наше дело.
 </body>
</html>

Некоторые разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.

Пример 3.5. Добавление списка

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <ul>
    <li>Восток</li>
    <li>Запад</li>
    <li>Юг</li>
    <li>Север</li>
  </ul>
 </body>
</html>

В данном примере каждому открывающему тегу соответствует его закрывающий тег.

Элемент <!DOCTYPE> не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

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

Пример 3.6. Добавление изображения

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
   <p><img src="images/test.png" alt="тестовая картинка" /></p>
 </body>
</html>

В данном примере обратите внимание на обязательный пробел, который предшествует конструкции />.

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег XHTML-тег
<br> <br />
<hr> <hr />
<input> <input />
<img> <img />
<meta> <meta />

Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.

Правильная вложенность тегов

Каждый тег должен располагаться внутри другого тега, при этом недопустимо их «пересечение», как это показано в примере 3.7.

Пример 3.7. Ошибка с положением тегов

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <p>Lorem <b><i>ipsum dolor sit</b></i> amet...</p>
 </body>
</html>

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

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

Иерархия тегов

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

Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.

Пример 3.8. Структура документа

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Новый документ</title>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере вначале приводится тег <html>, внутри которого располагаются теги <head> и <body>. Внутри раздела <head> хранится заголовок документа (<title>) и кодировка страницы (<meta>).

Нельзя использовать сокращенные атрибуты тегов

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

Пример 3.9. Ошибка при использовании атрибутов

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <form action="handler.php" method="post">
    <fieldset>
      <input type="text" value="Совет дня" readonly />
    </fieldset>
  </form>
 </body>
</html>

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

Табл 3.2. Сопоставление атрибутов в HTML и XHTML
HTML XHTML
checked checked="checked"
compact compact="compact"
disabled disabled="disabled"
ismap ismap="ismap"
multiple multiple="multiple"
nohref nohref="nohref"
noresize noresize="noresize"
noshade noshade="noshade"
nowrap nowrap="nowrap"
readonly readonly="readonly"
selected selected="selected"

В примере 3.10 показано корректное использование вышеприведенной формы.

Пример 3.10. Правильное использование атрибутов

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <form action="handler.php" method="post">
   <fieldset>
    <input type="text" value="Совет дня" readonly="readonly" />
   </fieldset>
  </form>
 </body>
</html>

Вместо атрибута name необходимо указывать id

Атрибут name определяется в HTML для тегов <a>, <frame>, <iframe>, <img> и <map> и предназначен для обозначения элемента с целью последующего к нему обращения из скриптов. В XHTML атрибут name частично вышел из употребления, а вместо него следует использовать id, как показано в примере 3.11.

Пример 3.11. Идентификатор рисунка

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
 </head>
 <body>
  <p><img src="images/graph3.png" alt="Картинка" /></p>
 </body>
</html>

Указанное правило не применяется к элементам форм, вроде <input type="radio" />, где без атрибута name вообще не обойтись.

Следует определять DTD

Все XHTML-документы обязательно должны содержать элемент <!DOCTYPE> в первой строке кода, а также придерживаться иерархической структуры вложения тегов.

Отправить ответ

avatar
  Подписаться  
Уведомление о