Абзац, абзацный отступ (красная строка)
Абзацы
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.
Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).
<p>Абзац</p>
Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.
<p>Абзац <p>Другой абзац</p>
Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Красная строка
Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:
<html>
<head>
<style>
p { text-indent: 25px; }
</style>
<head>
<body>
<p>
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым
некоторые относят и красную строку, считая, что употребление ее не так уж и важно.
Однако надо понимать, что любая запятая несет в себе как эстетическую, так
и смысловую нагрузку, а не только является данью правилам грамматики – это
касается и форматирования.
</p>
</body>
</html>
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.
<p> Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования. </p>Попробовать »
Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).
С этой темой смотрят:
Перевод строки — Википедия
Перевод строки, или разрыв строки, — продолжение печати текста с новой строки, то есть с левого края на строку ниже, или уже на следующей странице. На компьютерах это осуществляется клавишей ввода Enter.
Разделителем строк, обозначающим место перевода строки, в текстовых данных служит один или пара управляющих символов, а в размеченном тексте также — определённый тег (в HTML — тег <br>, от англ. break — «разрыв»). Разделитель строк также называют просто переводом строки, когда нет надобности их различать.
Вместе с другими действиями перевод строки выполняется также перед следующим абзацем или страницей.
Перевод строки сокращают как NEL (от англ. next line — «со следующей строки, переход на следующую строку», или newline — «с новой строки, переход на новую строку»).
Возврат каретки (англ. carriage return, CR) — управляющий символ ASCII (0x0D, 1310, ‘\r’), при выводе которого курсор перемещается к левому краю поля. Этот управляющий символ вводится клавишей «Enter». Будучи записан в файле, в отдельности рассматривается как перевод строки только в системах Macintosh.
Подача на строку или Перевод на строку (от англ. line feed, LF — «подача [бумаги] на строку») — управляющий символ ASCII (0x0A, 10 в десятичной системе счисления, ‘\n’), при выводе которого курсор перемещается на следующую строку. В случае принтера это означает сдвиг бумаги вверх, в случае дисплея — сдвиг курсора вниз, если ещё осталось место, и прокрутку текста вверх, если курсор находился на нижней строке. Возвращается ли при этом курсор к левому краю или нет, зависит от реализации.
Таким образом, вывод последовательности CR+LF в семантике терминала гарантирует действие «создание новой строки».
Терминалы (и их эмуляторы) могут также проводить различные преобразования символов (например, LF → CR+LF, CR → CR+LF) при вводе и выводе текста.
Жёсткий возврат, иногда аппаратный возврат — разделитель строк, поставленный пользователем. В машинном представлении текста жёсткий возврат явно выражен, обычно управляющими символами или тегом.
Мягкий возврат — перевод строки, выполненный текстовым процессором в том месте текста, которое им выбрано. Мягкий возврат разделяет строки текста в его визуальном (видимом пользователем) представлении, но может быть никак не выражен в машинном представлении этого текста.
Системы, основанные на ASCII или совместимом наборе символов, используют или LF (перевод строки, 0x0A), или CR (возврат каретки, 0x0D) по отдельности, или последовательность CR+LF; см. ниже историческую причину для соглашения CR+LF. Эти названия основаны на командах принтера:
- LF (ASCII 0x0A) используется в Multics, UNIX, UNIX-подобных операционных системах (GNU/Linux, AIX, Xenix, Mac OS X, FreeBSD и др.), BeOS, Amiga UNIX, RISC OS и других;
- CR (ASCII 0x0D) используется в 8-битовых машинах Commodore, машинах TRS-80, Apple II, системах Mac OS до версии 9 и OS-9;
- CR+LF (ASCII 0x0D 0x0A) используется в DEC RT-11 и большинстве других ранних не-UNIX- и не-IBM-систем, а также в CP/M, MP/M (англ.), MS-DOS, OS/2, Microsoft Windows, Symbian OS, протоколах Интернет.
По стандарту, любое совместимое с Юникодом приложение должно воспринимать как перевод строки каждый из нижеследующих символов:
- LF (U+000A): англ. line feed — подача строки <ПС>;
- CR (U+000D): англ. carriage return — возврат каретки <ВК>;
- NEL (U+0085): англ. next line — переход на следующую строку;
- LS (U+2028): англ. line separator — разделитель строк;
- PS (U+2029): англ. paragraph separator — разделитель абзацев.
Последовательность CR+LF (U+000D U+000A) надлежит воспринимать как один перевод строки, а не два[1].
Нет общепринятых сокращений русских терминов. ВК (Возврат Каретки) совпадает по написанию с сокращением от англ. BreaK («разрыв [строки]», — то же, что перевод строки), а ПС не различает Подачу Строки и Перевод Строки.
Разница представлений[править | править код]
Отсутствие единого общепринятого представления перевода строки в разных операционных системах осложняет обмен текстовыми данными между ними. Юникод старается примирить эту разницу, уравнивая CR, LF и CR+LF, однако вступает в противоречие с наследуемым им ASCII при трактовке последовательности LF+CR, не предварённой CR: согласно ASCII это один перевод строки, а согласно Юникоду — два.
Перевод строки при вводе с клавиатуры представлен единообразно во всех системах — символом CR, и в системах с другим представлением перевода строки текстовые данные приходится перекодировать в необходимый формат.
На перфокартных системах хранения данных одна строка записывалась на одну перфокарту, поэтому строка была заданной длины, по количеству колонок (обычно 80). Строки короче добивались пробелами, а строки длиннее обрезались. Разделителя строк не было, а неявный перевод строки предполагался через каждые 80 символов. Некоторые ранние мейнфреймовые операционные системы переняли это для хранения текста в файлах, где уже не было естественного ограничения на длину строки.
CR+LF[править | править код]
На механических пишущих машинках был рычаг, который возвращал каретку к левому краю страницы и прокручивал вал, подвигая бумагу вверх на строку. На телетайпах и более поздних алфавитно-цифровых печатающих устройствах (АЦПУ) вместо каретки была головка, в лазерных принтерах она перестала быть материальной, но в термине возврат каретки всё это продолжали называть кареткой, чтобы его не менять. На телетайпах возврат каретки и подачу строки разделили, откуда традиция представления перевода строки как CR+LF перешла и к текстовым файлам.
Конец строки[править | править код]
Телетайпы сначала печатали на рулонной бумаге, и сообщения начинали и заканчивали переводом строки, чтобы каждое начиналось с новой строки наверняка. Отсюда пошёл обычай включать разделитель сообщений в состав самого сообщения.
На компьютерах появился диалоговый режим работы, когда поочерёдно печатались вводимые управляющие сообщения пользователя и ответные программные сообщения. Пользователь после сообщения всегда переводил строку, так как одновременно это означало команду к исполнению, а вот программы после своего сообщения строку иногда не переводили, несмотря на предписание. Устройство вывода изначально не было приспособлено к тому, чтобы терминал мог следить за переводами строк, и реализовать это было трудно, поэтому чтобы ввод пользователя начинался с новой строки наверняка, управляющий диалогом терминал после программного сообщения переводил строку тоже. Помещать перевод строки предписывалось и в конце текстового файла.
Забота о разделении сообщений легла на терминал, и думать об этом перестали, а перевод строки в конце текста переосмыслился как конец последней строки, вместе с чем как концы строк переосмыслились и вообще все переводы строк, чему способствовало удобство работы с регулярно завершёнными строками с точки зрения программирования, сродни нуль-терминированным строкам. Так обычай включать разделитель сообщений в состав сообщения перешёл в обычай включать разделитель строк в состав строки.
Лишняя строка в конце файла обычно не представляет хлопот, поэтому перевод строки до сих пор называют концом строки, а разделитель строк — символом конца строки (EOL, англ. end of line).
Перетекание разделителя в завершитель и обратно бывает не только у перевода строки. Так, точка с запятой в языке Си команды завершает, а в Паскале их разделяет. В письменной речи после нескольких предложений точку почти всегда ставят, а после одиночного — чаще нет. Это колебание хорошо видно в списках, где одиночные предложения иногда начинают с большой буквы, а иногда — с маленькой.
Абзац[править | править код]
На телетайпах, а потом и в первых редакторах разделение текста на абзацы не имело своего особого представления, для этого использовали пустые строки или отступ из нескольких пробелов, а переводы строки внутри абзаца проставляли вручную.
Позже в редакторах появился автоматический перенос, выполняемый на лету при отрисовке текста каждый раз заново. Для отличения от ручного его назвали мягким возвратом, а ручной — жёстким (перенос называли и просто возвратом, см. раздел Разница представлений). Разделитель строк при этом переносил как раньше, но приобрёл смысл ещё и разделителя абзацев — для тех строк, в которых срабатывал автоперенос и которые становились при этом абзацами. Включатель такого режима назвали переносом по словам (англ. word wrap). При автопереносе ручной перенос разрывал абзац, межабзацный интервал делался как раньше (в новых терминах — перемежением пустым абзацем), но основное качество абзаца — независимость от разбиения на строки — было достигнуто.
Режим автопереноса включался и выключался пользователем вручную, определить это программно было трудно, то есть, избавившись от ручного переноса, получили другую ручную операцию. Стало понятно, что не обойтись без более автоматизирующего разнесения разделителя строк и разделителя абзацев, то есть для них понадобились два разных символа.
Чтобы не заботиться о совместимости с уже существующим в ASCII разделителем строк/абзацев, разработчики не стали использовать символы ASCII для разделителя строк и разделителя абзацев. В HTML использовали теги <br /> и <p>, в Юникоде — символы U+2028 и U+2029, соответственно. В Википедии абзацы можно разделять пустыми строками, отображаемыми при этом полноценным интервалом.
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <nobr> уведомляет браузер отображать текст без переносов. Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега <nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит.
Синтаксис
<nobr>Текст</nobr>Закрывающий тег
Обязателен.
Атрибуты
Нет.
Аналог CSS
white-space
Валидация
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Тег NOBR</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2><nobr>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</nobr></h2>
<p><nobr>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.</nobr> Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат данного примера показан ниже.
Рис. 1. Текст без переносов
Абзацы | htmlbook.ru
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
<p>Абзац 1</p>
<p>Абзац 2</p>Каждый абзац начинается с тега <p> и заканчивается необязательным закрывающим тегом </p>.
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
В примере 7.1 показано применение абзацев для создания отступов между строками.
Пример 7.1. Использование абзацев
<!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>Применение абзацев</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век...</p>
<p>Во всём - его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>Результат данного примера показан на рис. 7.1.
Рис. 7.1. Отступы на веб-странице при использовании абзацев
Как видно из рисунка, при использовании тега <p> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.
Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).
Пример 7.2. Тег <br>
<!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>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других - уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век...<br>
Во всём - его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>Результат примера продемонстрирован на рис. 7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.
Рис. 7.2. Вид текста с учетом переносов
одиночные и парные теги (открывающий и закрывающий тег)
HTML элемент — это основная структурная единица веб-страницы, написанная на языке HTML.
Парные и одиночные теги HTML
Синтаксис HTML элементов, состоящих из парных тегов:
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.
Примечание: не забывайте в закрывающем теге ставить символ «/«, он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ «/» в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.
Синтаксис HTML элементов, состоящих из одиночных тегов:
- Элемент состоит только из открывающего тега.
Элементы, состоящие из одиночных тегов называются пустыми. Всего в HTML 16 одиночных тегов:
Вложенные элементы
HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
<html>
<body>
<p>Мой первый абзац</p>
</body>
</html>
В этом примере элемент <p> вложен в элемент <body>, который, в свою очередь, вложен в элемент <html>.
Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:
<p>Это <em>очень</p> интересно</em>
Здесь элемент <em> выходит за пределы элемента <p>:
Пример с правильной вложенностью:
<p>Это <em>очень</em> интересно</p>
Здесь элемент <em> правильно вложен — он находится полностью в элементе <p>:
Пробельные символы
Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<h2>Мой первый заголовок</h2>
<p>Мой первый абзац</p>
</body>
</html>
Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:
<html><head><title>Заголовок</title></head><body><h2>Мой первый заголовок</h2><p>Мой первый абзац</p></body></html>
Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
С этой темой смотрят:
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>Атрибуты
- abbr
- Краткое описание содержимого ячейки.
- align
- Определяет выравнивание содержимого ячейки по горизонтали.
- axis
- Группирует ячейки связанные между собой похожей информацией.
- background
- Задает фоновый рисунок в ячейке.
- bgcolor
- Цвет фона ячейки.
- bordercolor
- Цвет рамки.
- char
- Выравнивает содержимое ячейки по заданному символу.
- charoff
- Смещает содержимое ячейки относительно заданного символа.
- colspan
- Объединяет горизонтальные ячейки.
- headers
- Позволяет связать ячейки с заголовком.
- height
- Высота ячейки.
- nowrap
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- scope
- Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
- valign
- Выравнивание содержимого ячейки по вертикали.
- width
- Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD</title>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
</tr>
<tr>
<td valign="top" align="center">Ячейка 2</td>
<td valign="top">Ячейка 3</td>
</tr>
</table>
</body>
</html>Правила применения тегов | htmlbook.ru
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных («пример») или одинарных кавычках (‘пример’). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).
Пример 3.2. Использование кавычек в атрибутах тегов
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>Кавычки в атрибуте alt</title>
</head>
<body>
<p><img src="images/arena.png" alt="Вид заголовка"></p>
<p><img src="images/arena.png" alt=Вид заголовка></p>
</body>
</html>В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.
Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3.3 показана одна и та же строка, но оформленная разными способами.
Пример 3.3. Переносы строк в коде тега
<!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>Кавычки в атрибуте alt</title>
</head>
<body>
<p><img src="images/arena.png" alt="Вид заголовка в IE"></p>
<p><img src="images/arena.png"
alt="Вид заголовка в браузере IE"
></p>
</body>
</html>В данном примере первый тег <img> набран в одну строку, включая все его атрибуты, а второй тег <img> разбит на несколько строк.
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Неизвестные теги и атрибуты
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.
Закрывайте все теги
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <br> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.