Какие теги используются для физической разметки а не логической
Перейти к содержимому

Какие теги используются для физической разметки а не логической

  • автор:

Логическое и физическое форматирование

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

Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг ), цитата (тэг ), аббревиатура (тэг ) и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью тегов и можно, например, отметить отдельные фрагменты как выделенные, или сильно выделенные. Заметим, что речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тега логического форматирования), но может быть легко переопределен.

Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Например, для отображения фрагмента курсивом можно использовать тег курсива . Этот и другие, часто используемые теги физического форматирования описаны ниже в разделе «Тэги физического форматирования текста»этой главы.

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

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

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

Тэги логического форматирования текста

Тэг отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

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

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

Заметим, что тег распознается только браузером Microsoft Internet Explorer. Пример:

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

Невское время является одной из наиболее популярных городских газет Санкт-Петербурга

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

Пример простейшего оператора языка программирования C:

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

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

Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.

Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например:

Последней принятой спецификацией языка разметки HTML является версия

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

Тэг отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример:

Internet Explorer — это популярный Web-браузер

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

Тэг отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег может использоваться как элемент уровня текста и как элемент уровня блока.

Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений.

Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone).

Текст, помеченный тэгом , обычно отображается подчеркнутым текстом. Тег в настоящее время распознается только браузером Microsoft Internet Explorer.

Тэг (EMphasis — выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример:

Пример выделения отдельных слов текста

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

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

Чтобы запустить текстовый редактор, напечатайте: notepad

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

Тэг отмечает короткие цитаты в строке текста. В отличие от тега уровня блока при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег (в отличие от ) в настоящее время распознается только браузером Microsoft Internet Explorer.

Тэг имеет параметр CITE, в качестве значения которого можно указать источник цитаты.

Тэг отмечает текст как образец (SAMPle). Обычное использование этого тега — отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом.

Применение данного тега предпочтительнее применения тега физического форматирования . Например:

В результате работы программы будет напечатано: Hello, World!.

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

Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы

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

Тэг отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример:

Задайте значение переменной N

Отображение некоторых из примеров, приведенных при описании тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом , выдается подсказка.

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

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

Тэги физического форматирования текста

Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.

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

Это полужирный шрифт.

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

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

Это моноширинный шрифт.

Тэг отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать теги или . Например:

Пример подчеркивания текста.

Тэги и отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег . Например:

Пример зачеркнутого текста.

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

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

Шрифт большего размера.

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

Шрифт меньшего размера.

Тэг сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

Пример шрифта для нижнего индекса.

Тэг сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

Пример шрифта для верхнего индекса.

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

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

Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

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

Это полужирный шрифт.

А здесь текст полужирный и курсивный

Тэг указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста.

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

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

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

Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.

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

Приведем пример использования параметра FACE:

Текст, записанный шрифтом по умолчанию.

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

Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер «нормального» шрифта соответствует значению 3.

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

Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега .

Чем отличается физическая разметка от логической?

Если я правильно понимаю Ваш вопрос, то отличие лучше всего объяснить на примере.
Раньше был популярен способ верстки страниц с помощью таблиц. Так как это позволяло обходить много проблем. Так вот, с точки зрения логики страница были таблицей, а физически это была страница, никоим образом не напоминающая таблицу.
Еще пример: если Вы сделаете два параграфа, одному назначите жирное начертание и бОльший кегль — физически это будет выглядеть как заголовок и текст под ним. А логически это будет выглядеть как два параграфа. Например, если эту Вашу страницу будет читать программа для слепых, которая озвучивает страницу в зависимости от логики, то она прочитает как два параграфа.
Примеров можно привести кучу, а стремиться надо к тому, чтобы физическая верстка была аналогична логической.
Последний пример: программы для слепых считывают атрибут alt тега img. Раньше активно применялся способ верстки, когда использовалась картинка gif 1x1px и ей задавался размер. Служила она для различных отступов (картинка была прозрачная). То есть физически она была заметна только в качестве отступа, с точки зрения логики вообще не выполняла никакой функции. То есть с точки зрения логики ей нужно было обязательно заполнить атрибут alt и оставить его пустым. Таким образом, и логика, и физика была правильной.

upd: Еще хороший пример: Font Awesome. Раньше они использовали в качестве основного тега своих иконок, тег i. Это было прикольно, так как i = icon. Но с точки зрения логической разметки это было неправильно, ведь тег этот служит для других целей. В последующих версиях они перешли на использования span. Совесть их заела или просто решили, что так проще, но строго говоря — выбор был правильным.

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Какие теги используются для физической разметки а не логической

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

Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом &ltb>.

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

2.Выделение текста

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

Чтобы выделить текст курсивом мы воспользуемся тегом&lti>. Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа &ltp>

Так же есть теги которые выполняют аналогичную работу в HTML кодах, такие как :

&ltstrong> — жирный
&ltem> — курсив
Вы уже изучили заголовки в HTML страницах, и знаете, что стиль прописного заголовка, даёт системе понять какого размера будет тот или иной текст, но, это можно сделать и без помощи заголовков, а всего лишь указав, нужный тег.
&ltbig> — большой
&ltsmall> — маленький
Так же в HTML можно выставлять степень или индекс, для этого существуют теги такие как:
&ltsub> — нижняя степень
&ltsup> — верхняя степень (индекс)
В HTML существует тег &ltpre>, он даёт системе понять, что никакого редактирования с текстом производит не нужно, а нужно сохранить текст таким, каким он задан изначально.

Практическое задание 1

&lthtml>
&ltbody>
&ltp>
Если необходимо чтобы к тексту было применено какое-либо
форматирование, например, выделение &ltb>полужирным&lt/b>
или &lti>курсивом&lt/i>, необходимо использовать
соответствующие теги форматирования.
При этом форматируемый текст помещается между тегами.
&lt/p>
&lt/body>
&lt/html>
Сохраните файл под именем 12 b/I.html

Практическое задание 2

&lthtml>
&ltbody>
&ltp>&ltstrong>Данный параграф отформатирован тегом strong&lt/strong>&lt/p>
&ltp>&ltb>А этот тегом b, внешне они не отличаются.&lt/b>&lt/p>
&ltp>&ltem>Данный параграф отформатирован тегом em&lt/em>&lt/p>
&ltp>&lti>А этот тегом i, внешне они не отличаются.&lt/i>&lt/p>
&lt/body>
&lt/html>

Сохраните файл под именем 13strong.html

Практическое задание 3

&lthtml>
&ltbody>
&ltp>&ltbig>Данный параграф отформатирован тегом big &lt/big>&lt/p>
&ltp>&ltsmall>Данный параграф отформатирован тегом small &lt/small>&lt/p>
&ltp>А в данном параграфе теги не применяются&lt/p>
&lt/body>
&lt/html>

Сохраните файл под именем 14 big/small.html

Практическое задание 4

&lthtml>
&ltbody>
&ltp>Формула воды H2O. В данном параграфе формула набрана
без использования тега sub&lt/p>
&ltp>Формула воды H&ltsub>2&lt/sub>O. В данном параграфе формула набрана с использованием тега sub Формула выглядит более привычно.&lt/p>
&ltp>2^4=16. В данном параграфе формула набрана без использования тега sup&lt/p>
&ltp>2&ltsup>4&lt/sup>=16. В данном параграфе формула набрана с использованием тега sup. Формула выглядит более привычно.&lt/p>
&lt/body>
&lt/html>

Сохраните файл под именем 15 index/stepen.html

Практическое задание 5

&lthtml>
&ltbody>
&ltpre>
Это
предварительно форматированный текст.
Он сохраняет как пробелы,
так и переносы строк.
&lt/pre>
&lt/body>
&lt/html>

Сохраните файл под именем 16 pre.html

Практическое задание 6

&lt/body>
&lt/html>
Сохраните файл под именем 17 pre.html

Какие теги используются для физической разметки а не логической

На этом шаге мы рассмотрим тэги логического форматирования текста..

При просмотре содержимого файла PR.HTML, вы, наверняка, обратили внимание на тот факт, что текст в браузере выводится в достаточно “сухом” виде, без использования цвета и других способов начертания символов. Конечно, такой текст читать неинтересно. Поэтому нужно познакомиться с инструментами, которые сделают вашу Web-страничку более привлекательной и “веселой”. К их рассмотрению мы сейчас переходим.

Для изменения представления текста в HTML – документе предусмотрены теги логического и физического форматирования.

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

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

Тэги логического форматирования текста

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


    Тэг &ltACRONYM&gt используют для отметки аббревиатур, акронимов ( акроним — произносимое слово, состоящее из начальных букв словосочетания). Этот тэг используется с параметром TITLE , в качестве которого можно указать “расшифровку” акронима. Эта “расшифровка” появляется на экране, когда курсор располагается на акрониме. Приведем пример использования этого тега:

Рис.1. Пример тэга

является одной из наиболее популярных городских газет г.Кургана.

Замечание . Моноширинным называется такой шрифт, у которого размеры символов одинаковы, то есть каждый символ имеет одну и ту же ширину , которая не зависит от его начертания. Таким шрифтом является, например, шрифт Courier .

— это популярный WEB–браузер.

 отдельных слов текста. 
 notepad . 

Задание. «Соберите» все примеры в файл PR1.HTML и просмотрите его в браузоре. В результате у вас должен получиться разультат, как на рисунке 2.

Файл этого примера можно взять здесь

Рис.2.Примеры логического форматирования текста

На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом , выдается подсказка.Получилось. Скорее всего, нет. У вас, наверняка, строки в браузере располагаются одна за другой, а не с новой строки, как показано на рисунке 2. И это несмотря на то, что в тексте HTML -документа каждая строка текста располагается с новой строки!

Дело в том, что браузер игнорирует переходы на новую строку в тексте HTML -документа и сам осуществляет переход на новую строку в зависимости от размера окна, в котором выводится Web-страница. Для того чтобы заставить браузер осуществить переход на новую строку, нужно воспользоваться тэгом BR. Таким образом, текст, находящийся в файле PR1.HTML может быть следующим:

   КГУ - ведущий вуз Курганской области Зауральский курьеръ является одной из наиболее популярных городских газет г.Кургана. Этот текст перечеркнут. Пример простейшего оператора языка программирования Паскаль: WriteLn(‘Hello, World!’) Internet Explorer - это популярный WEB–браузер. Этот текст является вставкой и будет подчеркнут.отдельных слов текста. Чтобы запустить текстовый редактор, напечатайте: notepad. В результате работы программмы будут напечатано: Hello, World! Город Курган расположен на реке Тобол. Задайте значение переменной N .  

Вы, наверное, обратили внимание на то, что некоторые тэги дают одинаковый результат. Возникает вопрос: зачем нужно было придумывать такое разнообразие тэгов форматирования?
Ответ заключается в их названии. Глядя на HTML-документ, программист (пользователь) по тексту должен представлять, для чего используется тот или иной фрагмент. Достичь этого можно быстрее, если запоминать слова, имеющие смысл, чем бессмысленные буквосочетания.

На следующем шаге мы рассмотрим тэги физического форматирования .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *