Чем отличается физическая разметка от логической?
Если я правильно понимаю Ваш вопрос, то отличие лучше всего объяснить на примере.
Раньше был популярен способ верстки страниц с помощью таблиц. Так как это позволяло обходить много проблем. Так вот, с точки зрения логики страница были таблицей, а физически это была страница, никоим образом не напоминающая таблицу.
Еще пример: если Вы сделаете два параграфа, одному назначите жирное начертание и бОльший кегль — физически это будет выглядеть как заголовок и текст под ним. А логически это будет выглядеть как два параграфа. Например, если эту Вашу страницу будет читать программа для слепых, которая озвучивает страницу в зависимости от логики, то она прочитает как два параграфа.
Примеров можно привести кучу, а стремиться надо к тому, чтобы физическая верстка была аналогична логической.
Последний пример: программы для слепых считывают атрибут alt тега img. Раньше активно применялся способ верстки, когда использовалась картинка gif 1x1px и ей задавался размер. Служила она для различных отступов (картинка была прозрачная). То есть физически она была заметна только в качестве отступа, с точки зрения логики вообще не выполняла никакой функции. То есть с точки зрения логики ей нужно было обязательно заполнить атрибут alt и оставить его пустым. Таким образом, и логика, и физика была правильной.
upd: Еще хороший пример: Font Awesome. Раньше они использовали в качестве основного тега своих иконок, тег i. Это было прикольно, так как i = icon. Но с точки зрения логической разметки это было неправильно, ведь тег этот служит для других целей. В последующих версиях они перешли на использования span. Совесть их заела или просто решили, что так проще, но строго говоря — выбор был правильным.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
HTML :: Физическое и логическое форматирование html-документа
В предыдущих версиях HTML элементы, отвечающие за форматирование документа, делились на две группы: элементы физического и логического форматирования. Однако в пятой версии языка все элементы физической разметки, которые не были удалены, изменили свое назначение и стали относиться к группе элементов логического форматирования.
– это процесс форматирования html -кода при помощи набора соответствующих элементов разметки, которые используются в основном для определения внешнего вида своего содержимого при отображении его браузером.
Приведем описание тегов, которые в предыдущих версиях HTML можно было смело отнести к тегам физического форматирования:
Все перечисленные элементы формируются соответствующими парными тегами и отображаются браузерами как строчные элементы.
Использование перечисленных элементов разметки показано в примере №1 .
HTML Результат htmlCodes
Элементы физической разметки Я – просто жирный текст.
Я – курсивный.
Я – подчеркнутый.Я – зачеркнутый.
А вот это выражение похоже на странную формулу:
aверхний индекс + bнижний индекс.
Для изменения внешнего вида используйте не нас, а стили CSS!
Пример №1. Использование элементов физической разметки
Как видим, указанные теги вполне можно было бы использовать для физической разметки документа. Тем более, что сами названия явно указывают на предназначение элементов: italic, bold, underline и т.д. Однако все это пережитки старых версий, и применять какие-либо теги только лишь для изменения внешнего вида текста крайне не рекомендуется. Ведь в HTML 5 все теги имеют логическую нагрузку, хотя отношение некоторых из них к логическим и выглядит несколько натянутым. Однако в любом случае, теперь HTML 5 практически полностью используется в веб-программировании, как инструмент логической разметки документа, а за внешний вид отвечает CSS .
Логическое форматирование html-документа
– это процесс форматирования html -кода при помощи набора соответствующих элементов разметки, которые предназначены главным образом для структурной, логической разметки документа, определяя степень важности своего содержимого и его отношение к тому или иному типу данных, а также выделяя смысловое отличие своего содержимого от окружающего контекста.
Приведем описание тегов логического форматирования:
Все перечисленные элементы также формируются соответствующими парными тегами и отображаются браузерами как строчные элементы (см. пример №2 ).
HTML Результат htmlCodes
Элементы логической разметки PHP – скриптовый язык общего назначения.
Узнайте, как расшифровывается аббревиатура PHP, наведя на нее курсор.
Хотя первоначально аббревиатура PHP означалаPersonal Home Page Tools,
теперь ее стоит расшифровывать как Hypertext Preprocessor.Давайте посмотрим на фрагмент кода PHP:
echo "Всем привет от PHP!";.
Как сказал автор кода на своей страничке http://www.fdpppdf.com:Великий код!.Для запуска кода нажмите на клавиатуре ALT+SHIFT+«Поехали!».
На экран будет выведено приветствие: «Всем привет от PHP!».
Убедились? Оператор echo – это сила! Все права на пример защищены марсианским законодательством.
Пример №2. Использование элементов логической разметки
Не смотря на то, что при логической разметке внешний вид форматируемого текста по умолчанию не всегда устраивает разработчика, изменить его не составляет труда при помощи стилей CSS . При этом логика разметки никоим образом не пострадает, и для поисковых машин такие изменения не будут считаться решающими.
В завершение пункта отдельно приведем описание еще двух элементов логической разметки документа:
Использование данных элементов показано в примере №3 .
HTML Результат htmlCodes
Элементы «address» и «blockquote» Бернард Шоу
Мир настолько сгнил, что даже влюбиться в кого-то —Связаться с автором цитаты не получится.
это самый большой риск, который мы можем себе позволить.
Нас сжимает изнутри от вероятности, что это окажется не
взаимно или агрессивно воспринято. Люди разучились любить,
миром правят потребительские отношения.
Пример №3. Использование элементов «address» и «blockquote»
Быстрый переход к другим страницам
- Элементы «span» и «div»
- Физическое и логическое форматирование html-документа
- Cписки в HTML
- Вернуться к оглавлению учебника
html.okpython.net Copyright © 2016-2023.
#HTML для копирайтера язык разметки текста
Копирайтер высокого уровня пишет не только тексты. Статья, которая входит в ТОП 3 поисковых машин может стоить 5 000 руб. и более.
HTML и семантическая структура текста
За семантическую структуру отвечает язык текстовой разметки HTML (расшифровывается как Hyper Text Markup Language – язык разметки гипертекста, или текста, размещенного в интернете). С помощью HTML поисковые машины понимают, какие слова и фразы в статье важны, и по каким запросам показывать ваш материал.
Что такое тег?
Язык разметки HTML построен вокруг одного понятия – тег. Тег указывает поисковой системе, какие элементы Вашего текста важны, а какие — второстепенны.
Заголовок и подзаголовки ТЕГИ
— заголовок. (в тексте только один)
— подзаголовок в статье. (в тексте сколько угодно)
— подзаголовки подразделов. (в тексте сколько угодно)
— ниже h4 на практике не используются подзаголовки.
Горизонтальная линия ТЕГ
— тег не имеет закрывающей части, (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.
Абзац ТЕГИ
— тег оформляет абзац.
C помощью этого тега Вы задаете отступы сверху и снизу на странице.
— тег не имеет закрывающей части и используется, чтобы перейти на новую строку.
Тег
подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега
тег
пишется так:
Чтобы не переносить текст на следующую строку и в него нужно вставлять тег
по примеру:
REDANTS пишем слева
REDANTS пишем справа
— тег используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление. Пример использования выше/ниже.
Важный полужирный текст и полужирный текст ТЕГИ
— тег устанавливает важный полужирный текст.
Тег не используется в заголовках h1-h6.
— тег устанавливает полужирный текст.
Тег можно использовать в заголовках h1-h6.
Стиль текста ТЕГИ
— тегом физической разметки и устанавливает курсивный текст.
— тегом логической разметки и определяет важность помеченного текста.
Важно отметить, что теги и , также как и , несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает курсивный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
— Подчеркнутый текст
— Перечеркнутый
— Перечеркнутый (второй вариант, от первого ничем не отличается)
— моноширинный шрифт
— Малый
— Большой
— Верхний индекс
— Нижний индекс
Цвет текста и блока с текстом ТЕГИ
Тег span — этот тег ничего не значит для SEO. Для SEO, если Вы в него заключите текст, ничего не произойдет. Смысл использования тега для придания фрагменту текста каких-то дополнительных свойств. Например цвета.
Пример палитры красок:
Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — #ff0000 зелёный цвет, либо используя константы цвета — red.
Мы уже знакомы с тегом у него есть еще один атрибут — color.
Так вот, если к примеру написать так:
Красный REDANTS — То цвет шрифта станет красным.
А можно так:
Красный REDANTS — Будет тоже самое.
Лучше писать всё шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых не все браузеры знают названия всех красок.
Тег типа шрифта
Для SEO тип шрифтов лучше подгружать стилями на страницу и тегом лучше не пользоваться.
Эта строчка будет написана с помощью шрифта Arial
А можно так:
Эта строчка будет написана с помощью шрифта Arial
Цитата ТЕГИ
— этот тег цитаты. Для выделения длинных цитат, которые состоят из нескольких абзацев.
— этот тег предназначен для выделения коротких цитат в предложениях. Текст автоматически обрамляется кавычками.
— этот тег используется для того, чтобы выделить источник цитаты.
Изображение ТЕГ
Тег является одиночным и не имеет закрывающего аналога. У изображения есть два скрытых атрибута, которые влияют на SEO. Это alt (альтернативный текст, который показывается в ситуациях, когда изображения отключены) и title (заголовок изображения, показывается при наведении на изображение курсором мыши).
Вот как выглядит изображение в интерпретации браузера.
Выглядит вот так нумерованный список:
- 1. Иванов
- 2. Петров
- 3. Сидоров
Выглядит вот так ненумерованный список:
Какие теги используются для физической разметки а не логической
Среди тегов, влияющих на начертание шрифта, различают теги физического и логического форматирования . В большинстве случаев применение сходных по значению тегов физического и логического форматирования приводит к одному и тому же эффекту. Различие между ними состоит в том, что теги физического форматирования прямо указывают на то, какие свойства шрифта следует изменить (например, сделать жирным), в то время как теги логического форматирования указывают, какой это текст (например, важный).
Указание интонации текста (это и делают теги логического форматирования) вместо явного задания его свойств позволяет управлять его отображением. Приведем пример: вы считаете, что важный текст должен выделяться не жирным шрифтом, а красным цветом. При использовании тегов логического форматирования и браузера, поддерживающего такую возможность, вы можете настроить отображение текста, форматированного логически. Текст, форматированный физически, всегда будет отображаться так, как это задумал автор. Разумеется, если вы хотите, чтобы текст был именно жирным, используйте физическое форматирование. В противном случае рекомендуется использовать теги логического форматирования.
Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Пока равнозначен.
| Действие тега | Тег физического форматирования | Тег логического форматирования |
|---|---|---|
| Полужирный текст | ||
| Курсив | ||
| Моноширинный шрифт | (для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины) | |
| Перечеркнутый текст | (в настоящее время распознаётся только браузером Microsoft Internet Explorer) |
Другие теги логического форматирования: – ; – служит для выделения цитат ; – ; – используется для ввода с клавиатуры пользователя ; – используется для отметки результатов, выдаваемых программами, для выделения нескольких символов моноширинным шрифтом: ; – используется для символьных переменных ; – используется для аббревиатур ( СНГ , КПСС , WWW ); – используется для сокращений ( стр. , англ. ) с атрибутом TITLE; – цитированный текст в кавычках.
Теги и используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже) вставлен или удален. Применяются при создании сайта группой дизайнеров. Могут иметь атрибуты datetime, cite, title. В datetime можно указать дату и время удаления/вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. С помощью title пояснения вставляются прямо в тег.
Не путайте тег с тегом , являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов кода!