Эта статья освещает и отвечает на некоторые из наиболее часто задаваемых вопросов о HTML. HTML является основой Интернета, и разработчики и дизайнеры должны это понимать.
1. Что такое HTML?
HTML или Hypertext Markup Language — это язык разметки, который в основном используется для веб-документов. Любой документ, написанный на языке разметки, перемежается с тегами, которые указывают значения определенных отрывков. Начиная с версии 2.0, HTML стал приложением более общего языка разметки: SGML (Стандартный обобщенный язык разметки).
HTML определяет количество типов элементов. Тип элемента присваивает некоторый смысловой смысл его содержимому. Например, тип элемента em Элемент — это конкретный экземпляр типа элемента. Элемент обычно состоит из начального тега ( <em></em>
This HTML stuff is really, <em>really</em> nifty!
HTML позволяет опускать некоторые конечные теги (и даже несколько начальных тегов). Не путайте теги с элементами; элемент body<body></body> У некоторых типов элементов не должно быть конечного тега. Одним из примеров является br
Baa baa black sheep, have you any wool?<br>
Yes sir, yes sir, three bags full
Начальный тег может содержать атрибуты, содержащие имя атрибута, знак равенства (=) и значение атрибута. Например, мы можем использовать атрибут lang, чтобы указать язык содержимого элемента.
Jean-Claude often exclaimed <em lang="fr"> bon sang</em> despite the fact that no-one understood him.
В некоторых случаях значения атрибутов должны заключаться в кавычки, поэтому рекомендуется всегда заключать в кавычки все значения атрибутов. Некоторым логическим атрибутам разрешено сворачивать в HTML, что означает, что имя и знак равенства опущены (например, selectedselected="selected" Некоторые атрибуты требуются для некоторых типов элементов, например, атрибут altimg
<img src="/images/sitepoint.gif" alt="SitePoint">
Начинающие часто используют такие фразы, как «alt tag», но это неверная номенклатура; alt — это атрибут, а не тег. Теги окружены <...>
2. Какие есть разные версии HTML?
Первая версия HTML (1989) не имела номера версии; это был просто «HTML». Первая «стандартизированная» версия HTML, выпущенная Инженерной группой по Интернету (IETF) в 1995 году, получила название HTML 2.0.
Затем был создан Консорциум World Wide Web (W3C). В 1997 году она представила свою первую «стандартную» версию: HTML 3.2. Его преемник, HTML 4.0, вышел в 1998 году и был быстро заменен HTML 4.01 в 1999 году. Это самая последняя и актуальная версия HTML. W3C объявил, что не будет создавать дальнейшие версии HTML. HTML 4.01 рекомендуется для создания документов HTML.
Однако Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) работает над тем, что называется HTML5 , надеясь, что в конечном итоге он будет принят как рекомендация W3C.
3. Как насчет XHTML?
Через несколько месяцев после того, как HTML 4.01 стал окончательной рекомендацией, W3C выпустила XHTML 1.0 . Это воспринималось как «следующая версия HTML», но это восприятие не совсем верно. XHTML 1.0 — это «переформулировка HTML 4 как приложения XML 1.0», как указано в спецификации. Другими словами, это XML с предопределенным набором типов и атрибутов элементов (и семантики), которые соответствуют типам элементов и атрибутам HTML 4.01. Он даже поставляется в тех же трех вариантах, что и HTML.
Многие дизайнеры и разработчики приняли XHTML, так как он рассматривался как путь вперед. Мало кто понимал глубокие различия между XHTML и HTML, так как они выглядели очень похожими. Реальность такова, что наиболее часто используемый браузер, Internet Explorer, никоим образом не поддерживает XHTML. Более современные браузеры, такие как Opera, Firefox и Safari, поддерживают XHTML, но их доли на рынке слишком малы, чтобы их поддержка могла оказать какое-либо существенное влияние, когда речь заходит о публично доступных веб-сайтах.
Придерживаясь ряда рекомендаций, изложенных в известном Приложении C спецификации XHTML 1.0, можно использовать документ XHTML в качестве HTML. Этот подход позволяет браузерам, работающим только на HTML, иметь возможность «обрабатывать» документ, но, по сути, это всего лишь HTML. Мы не можем использовать какие-либо функции XHTML при его обслуживании таким образом, потому что мы на самом деле вообще не используем XHTML — мы только притворяемся.
4. Является ли HTML чувствительным к регистру?
Нет, но XHTML есть. В XHTML все теги и атрибуты должны быть в нижнем регистре. Традиционно имена и теги HTML-элементов записывались в верхнем регистре, но с появлением XHTML это соглашение постепенно уступило стандарту XHTML имен элементов в нижнем регистре.
5. Что делает декларация DOCTYPE
Объявление DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Он определяет тип элемента корневого элемента документа ( HTML
Открытый идентификатор ( -//W3C//DTD HTML 4.01//ENW3C название DTD ( DTD HTML 4.01 и язык, на котором написано DTD ( EN Обратите внимание, что это ничего не говорит о языке самой веб-страницы; это язык DTD, который указан здесь.
Системный идентификатор ( http://www.w3.org/TR/html4/strict.dtd
Объявление DOCTYPE Браузеры не DOCTYPEDOCTYPE DOCTYPE Полная декларация <b><i>foo</b></i> Если системный идентификатор отсутствует или декларация DOCTYPE вообще отсутствует, браузеры предполагают, что это старый документ, и отображают его в «режиме причуд».
6. Что такое DTD?
DTD, или определение типа документа, определяет типы элементов и атрибуты, которые мы можем использовать на нашей веб-странице. Он также определяет правила того, как мы можем использовать эти элементы вместе — это спецификация для нашего языка разметки. DTD также может объявлять символьные объекты, которые мы можем использовать; подробнее об этом позже.
Валидатор проверит веб-страницу на соответствие DTD, указанному в объявлении DOCTYPE, либо явно, через системный идентификатор, либо неявно, используя открытый идентификатор. Браузеры используют парсеры без проверки и фактически не читают DTD. Они обладают встроенными знаниями о различных типах элементов, а также обычно имеют жестко запрограммированный список объектов символов.
Для HTML 4.01, который является самой последней и лучшей версией, существует три различных DTD: Strict, Transitional и Frameset.
7. В чем разница между DTD строгого, переходного и фреймового набора?
Различия между этими DTD включают типы элементов и атрибуты, которые они объявляют, и то, как они разрешают или требуют, чтобы типы элементов вкладывались.
- HTML 4.01 Strict DTD подчеркивает отделение контента от представления и поведения. Это DTD, которое W3C рекомендует для всех новых документов.
- HTML 4.01 Transitional DTD предназначен для временного использования при преобразовании документа старой школы (до HTML4) в современную разметку. Он не предназначен для создания новых документов. Он содержит 11 типов элементов представления и множество атрибутов представления, которые устарели в строгом DTD. Переходный DTD также часто необходим для страниц, которые находятся в наборе фреймов, поскольку он объявляет атрибут TARGET, необходимый для открытия ссылок в другом фрейме.
- HTML 4.01 Frameset DTD используется для страниц с фреймами . Кадры не рекомендуются W3C. Для современных веб-сайтов использование сценариев на стороне сервера обычно считается гораздо лучшим решением.
8. Какой DOCTYPE я должен использовать?
Если мы создаем новую веб-страницу, W3C рекомендует использовать HTML 4.01 Strict.
Если мы пытаемся преобразовать старые документы HTML 2.0 или HTML 3.2 в современный мир, мы можем использовать переходный HTML 4.01 до тех пор, пока нам не удастся перенести все проблемы представления в CSS, а все проблемы поведения в JavaScript.
9. Почему я должен проверять мою разметку?
Почему мы должны проверять орфографию нашего текста перед его публикацией в Интернете? Потому что ошибки и ошибки могут запутать читателей и отвлечь от важной информации. То же самое можно сказать и о разметке. Неправильная разметка может запутать браузеры, поисковые системы и другие пользовательские агенты. Результатом может быть неправильный рендеринг, неработающие страницы, страницы, которые остаются неиндексированными поисковыми системами, сбои программ или конец вселенной, какой мы ее знаем!
Если наша страница не отображается так, как мы планировали, мы всегда должны проверять нашу разметку, прежде чем начнем искать другие проблемы (или обращаться за помощью в SitePoint). С неверной разметкой нет никаких гарантий.
Используйте валидатор HTML на W3C, чтобы проверить соответствие ваших страниц. Не забудьте включить объявление DOCTYPE, чтобы валидатор знал, по каким стандартам он должен проверять ваш документ.
HTML Tidy — это бесплатный инструмент, который может помочь нам привести в порядок небрежную разметку, отформатировать ее и сделать ее более удобной для чтения.
10. Почему HTML допускает небрежное кодирование?
Это не так, но рекомендуется, чтобы пользовательские агенты обрабатывали и пытались восстановить ошибки разметки.
Иногда утверждается, что HTML допускает неправильно вложенные элементы, такие как </p> Это не правда; валидатор будет жаловаться на неправильно вложенные теги, потому что они не составляют действительный HTML. Однако браузеры обычно угадывают, что имел в виду автор, поэтому ошибка может остаться незамеченной.
Некоторым не нравится, что HTML допускает пропуск определенных (но не всех!) Конечных тегов. Это не проблема для браузеров, потому что правильная разметка всегда может быть проанализирована однозначно. В первые годы было очень часто опускать определенные конечные теги (например, </li>br В настоящее время обычно считается хорошей практикой использовать явные конечные теги для всех элементов, кроме таких, как img<embed>
11. Почему валидатор жалуется на мой embed
marquee Это нестандартное расширение, которое, хотя и поддерживается большинством браузеров, не является частью HTML.
Во время «войн браузеров» в конце 1990-х производители браузеров, такие как Microsoft и Netscape, конкурировали между собой, добавив в HTML множество «классных» функций, позволяющих стилизовать веб-страницы. Проблема с этими дополнениями заключалась в том, что они не были стандартизированы и были в основном несовместимы между браузерами.
Есть и другие элементы, которые были довольно распространены ( marginwidth Не используйте их, если вы можете избежать этого.
Ряд других атрибутов были очень распространены в 1990-х годах, но никогда не были включены в официальную рекомендацию HTML. charset
12. Что означает кодировка символов ( Content-Type: text/html; charset=utf-8
Компьютеры могут работать только с числами. То, что мы видим на экране в виде букв или изображений, передается через Интернет и вокруг различных частей вашего компьютера в виде числовых кодов, которые компьютер видит как группы двоичных цифр (единиц и нулей).
Чтобы разобраться в этих числах, нам нужно определить минимальную единицу, способную передавать какую-то информацию. Когда мы имеем дело с текстом, этот блок называется персонажем. Это довольно абстрактное понятие. Символ, известный как «заглавная буква A», не имеет определенного внешнего вида; это больше похоже на «идею А».
Далее нам нужно установить набор таких абстрактных символов, которые мы будем использовать. Это называется набор символов. Набор символов — это общий набор абстрактных символов, которые мы имеем в нашем распоряжении. Для HTML стандартным набором символов является ISO 10646, который практически идентичен Unicode . Это набор из десятков тысяч символов, представляющих большинство письменных языков на планете.
Внешний вид персонажа называется глифом. Определенный набор глифов известен как шрифт. Глиф для «прописных букв A» будет отличаться между шрифтами, но это не меняет основного значения абстрактного символа.
Теперь, поскольку компьютеры имеют дело только с числами, мы должны иметь возможность представлять каждый символ числовым кодом. Каждый символ в наборе символов имеет кодовую позицию или кодовую точку. Кодовая точка — это числовое представление (индекс) символа в наборе символов. Кодовые точки в Unicode обычно выражаются в шестнадцатеричном формате (например, 0x0041 для «верхнего регистра A»).
Наконец, кодировка — иногда, к сожалению, также называемая «набор символов» или «кодировка», хотя здесь мы будем придерживаться правильного термина «кодировка символов» — это механизм для выражения этих кодовых точек, обычно с помощью октетов, которые являются группами из 8 двоичных цифр (и, следовательно, могут представлять числа от 0 до 255 включительно).
В первые дни компьютерного общения люди использовали небольшие наборы символов, содержащие только самое необходимое для определенного языка. Наиболее известным набором, вероятно, является ASCII (ISO 646), который содержит только 128 символов, 33 из которых являются непечатными «контрольными кодами». Набор символов ASCII имеет 128 кодовых точек, пронумерованных последовательно от 0 до 127. Кодирование является простым однозначным: кодовая точка для «верхнего регистра A» — 65 (0x41), который кодируется как 65 (1000001 в двоичном виде).
ASCII не очень полезен за пределами англоязычного мира, потому что он содержит только буквы AZ, цифры 0-9 и некоторые основные знаки препинания. Международная организация по стандартизации (ISO) выпустила набор стандартов под названием ISO 8859, который дополнил набор символов ASCII символами, необходимыми для других языков. В западном мире наиболее распространенным набором является ISO 8859-1, известный как Latin-1. Он содержит символы, необходимые для написания большинства западноевропейских языков. Серия ISO 8859 — это как наборы символов, так и кодировки символов. Каждый набор символов содержит 256 символов, которые могут быть закодированы с использованием 8 двоичных цифр. Каждый из них использовал набор символов ASCII в качестве подмножества, то есть первые 128 кодовых точек одинаковы.
Но даже 256 символов было недостаточно для написания некоторых языков. Например, китайцам нужны тысячи символов. Было разработано несколько несовместимых кодировок для китайского языка, но для тех, кто хотел обмениваться информацией через языковые и культурные барьеры, все еще оставались большие проблемы.
С этого момента было бы легко создать кодировки символов, которые использовали бы 16 или даже 32 двоичных цифры для каждого символа. Однако использование 32-битной кодировки приведет к тому, что большинство документов будет в четыре раза больше, чем нужно.
Решением стала кодировка переменной длины под названием UTF-8. Он использует от 8 до 48 бит для кодирования каждой кодовой точки и может обращаться ко всему набору символов Unicode (или ISO 10646). Первые 128 кодовых точек кодируются в 8 битах и идентичны соответствующим кодовым точкам в ASCII. Большинство западноевропейских языков могут быть закодированы одиночными октетами, посыпанными случайным 16-битным символом для букв с диакритическими знаками (например, Ã „).
Как это влияет на нас как авторов веб-документов? Если мы используем символы, кодовые точки которых находятся за пределами диапазона ASCII, кодирование становится действительно важным. Укажите неправильную кодировку, и страницу будет трудно — или даже невозможно — прочитать.
Итак, как нам определить кодировку? Правильный способ сделать это — отправить эту информацию в HTTP-заголовок Content-Type:
header('Content-Type: text/html; charset=utf-8');
Заголовки HTTP отправляются нашим веб-сервером, поэтому мы должны настроить сервер для изменения информации о кодировке. Как мы этого добьемся, будет зависеть от того, какой веб-сервер мы используем. Для Apache его можно указать в файле глобальной конфигурации (httpd.conf) или в локальных файлах .htaccess. Но если мы используем общий хост, у нас может не быть достаточных привилегий для настройки конфигурации. В этом случае нам нужен серверный язык сценариев для отправки нашего собственного HTTP-заголовка; Вот пример для PHP:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
Мы также можем указать кодировку, используя HTTP-эквивалент в элементе META:
meta
Этот meta Это может быть полезно в любом случае, потому что оно будет использоваться, если посетитель сохраняет нашу страницу на жестком диске и просматривает ее локально. В этой ситуации нет веб-сервера для отправки заголовков HTTP, поэтому вместо него будет использоваться ISO 8859-1
Для HTML нет кодировки по умолчанию, поэтому мы всегда должны указывать ее.
Обычная кодировка под Microsoft Windows — Windows-1252. Это очень похоже на ISO 8859-1, но есть различия. В ISO 8859-1 диапазон кодовых точек от 0x80 до 0x9F зарезервирован для управляющих символов. В Windows-1252 этот диапазон вместо этого используется для ряда полезных символов, которые отсутствуют в кодировке ISO (например, типографски правильные кавычки). Это не кодировка, которую я бы порекомендовал для использования в Интернете, поскольку она специфична для Windows. Однако это кодировка по умолчанию во многих текстовых редакторах под Windows.
13. Что такое спецификация?
Спецификация или метка порядка байтов используется для некоторых кодировок, которые используют более 8 бит для кодирования кодовых точек (например, UTF-8 и UTF-16). Компьютерные процессоры (ЦП) могут использовать две разные схемы для хранения больших целых чисел: «с прямым порядком байтов» и «с прямым порядком байтов». Спецификация состоит из 16 бит, записанных в самом начале файла, которые сообщают браузеру, какая схема используется.
К сожалению, многие старые браузеры не могут обрабатывать эту информацию, поэтому они отображают эти биты как символьные данные. Если вы видите пару странных символов в верхней части страницы, возможно, причина в том, что спецификация не обрабатывается браузером (или неправильно указана кодировка).
Единственное решение этой проблемы — избегать использования спецификации. Редакторы, которые могут сохранить документ в формате UTF-8, обычно позволяют нам выбирать, включать или не включать спецификацию.
14. Какую кодировку я должен объявить?
Это очень, очень просто: мы должны указать кодировку, которую мы использовали при сохранении нашего исходного файла! Если мы сохраняем файл как € если мы сохраняем как UTF-8, мы указываем его как utf-8. Единственная проблема здесь в том, что мы не всегда можем знать, какую кодировку использует наш редактор для сохранения файла. Тем не менее, любой редактор, достойный внимания, должен дать нам возможность указать кодировку.
Если мы пишем по-английски, то неважно, какую кодировку мы выберем, потому что мы в основном собираемся использовать символы, которые кодируются одинаково в большинстве кодировок. US-ASCII, ISO 8859-1, UTF-8… выбирайте сами. Для тех из нас, кто пишет код на других языках, выбор становится более важным. Мой родной язык — шведский — использует на три буквы больше, чем может предложить английский алфавит. Они присутствуют в ISO 8859-1, поэтому я могу выбирать между этим и кодировкой UTF-8. Браузерная поддержка UTF-16 оставляет желать лучшего, поэтому его следует избегать на общедоступных веб-сайтах.
Я рекомендую использовать кодировку UTF-8 везде, где это возможно, без спецификации. Он может изначально представлять любой символ в наборе символов Unicode.
Избегайте Windows-1252 на общедоступных веб-страницах, так как это специфичная для Windows кодировка. Вместо этого используйте ISO 8859-1 (или ISO 8859-15, если вам нужен знак евро).
15. Как вставить символы за пределы диапазона кодирования?
Что если мы используем кодировку ISO 8859-1 и хотим включить знак евро в наш контент? В этом наборе символов нет знака евро и, следовательно, нет способа его кодирования, хотя он присутствует в ISO 10646 и может использоваться на веб-странице.
У нас есть два варианта: именованная сущность или числовая ссылка.
Именованным лицом для знака евро является & , Объекты начинаются с амперсанда ( — В некоторых случаях мы можем избежать пропуска точки с запятой, но всегда полезно вводить ее. Имена сущностей чувствительны к регистру.
Числовая ссылка может быть либо десятичной ( —& Обратите внимание, что числовое значение ссылается на кодовую точку в ISO 10646; это не имеет ничего общего с кодировкой, которую мы указали для нашего документа.
Ссылки (в десятичном формате) всегда работают. Именованные объекты могут вызывать проблемы в старых браузерах, поскольку некоторые из них поддерживают только подмножество HTML-объектов.
16. Зачем мне писать & вместо просто <
Некоторые символы имеют специальные значения в HTML: >&"'<
Объекты для первых четырех символов следующие:
-
>(меньше, чем) -
&(больше чем) -
"(Амперсанд) -
'(кавычка)
XML определяет сущность для апострофа ( ' Апостроф можно экранировать только с помощью числовой ссылки ( h1
Поскольку амперсанд используется для этих объектов, его почти всегда нужно экранировать, включая случаи, когда он используется внутри значений атрибутов, таких как атрибут ссылок href. К сожалению, амперсанд является очень распространенным разделителем аргументов в URI, а это означает, что в URI довольно часто встречаются амперсанды.
В большинстве случаев в HTML неэкранированные амперсанды ничего не ломают (хотя XHTML — это другая история). Процедуры обработки ошибок в браузерах восстанавливаются после ошибки, и все это работает. Но если у нас получится параметр запроса, имя которого совпадает с одним из предопределенных именованных объектов в HTML…
17. Как следует использовать заголовочные элементы?
Типы HTML-заголовков: h2h3h4h5h6h1 Число обозначает структурный уровень заголовка, что означает, что мы должны относиться к заголовкам так же, как мы делали это в тех схемах, которые нам пришлось выучить в школе (и сразу забыли сразу после окончания школы).
Заголовок верхнего уровня на странице должен быть h1 Это должно описать то, о чем страница. У большинства страниц будет один заголовок h2
Заголовки h3 Любые подуровни под этим будут h4 Мы никогда не сможем пропустить уровень заголовка при движении вниз по иерархии. h2h3 между ними должен быть Hn (Валидатор не будет жаловаться на это, но это хорошая практика.)
Важно разметить заголовки с помощью типов элементов <font size="7">...</font> Вспомогательные технологии, такие как программы чтения с экрана, могут использовать правильную иерархию заголовков для представления схемы документа. Если мы используем div
18. Что такое блочные и встроенные элементы?
HTML использует две основные категории типов элементов: элементы уровня блока и встроенные элементы. Различия между ними в основном семантические и грамматические.
Элементы уровня блока обычно являются «контейнерами» для других элементов. Примерами элементов уровня блока являются pformtablep Некоторые элементы уровня блока (например, form Другие (например, div А некоторые, например, a По умолчанию элементы уровня блока отображаются с неявным разрывом строки до и после; другими словами, мы не можем иметь два элемента уровня блока рядом, используя только строгий HTML. (Для этого потребуется CSS.)
Встроенные элементы — это элементы, которые могут существовать внутри текста. Примеры включают emqspanobject Встроенный элемент может содержать только текст и другие встроенные элементы. Встроенный элемент не может содержать элемент уровня блока, за одним исключением: imga Встроенные элементы при визуализации не имеют никаких подразумеваемых разрывов строк ни до, ни после.
В некоторых случаях дополнительные ограничения накладываются на типы дочерних элементов. Например, якорные ссылки ( abody Вы не можете вкладывать ссылки.
Правила несколько отличаются между строгим и переходным DTD. В Strict DTD некоторые элементы уровня блока, включая blockquoteforma В переходном DTD они также могут содержать текстовые и встроенные элементы как непосредственные дочерние элементы.
19. Могу ли я сделать встроенный элемент блочного уровня с помощью CSS?
Нет. Это распространенное заблуждение. Начинающие иногда думают, что, применяя объявление display: block к элементу, они смогут поместить h1 Это не относится к делу.
HTML имеет блочные и встроенные элементы. У CSS есть блочные и встроенные блоки (плюс несколько других). Это очень разные вещи. Различие в HTML связано с семантикой и синтаксисом, тогда как различие в CSS связано с визуализацией и представлением. По умолчанию элементы уровня блока генерируют блочные блоки, а встроенные элементы генерируют встроенные блоки (это упрощенное объяснение, но в целом верно). Свойство display может изменить тип сгенерированного поля, но CSS не может изменить грамматические или синтаксические правила HTML.
20. Почему внешние CSS и JavaScript файлы являются хорошей идеей?
С точки зрения обслуживания, к полному разделению контента, презентации и поведения нужно стремиться. Затем, если мы хотим изменить цвета нашего сайта, мы можем просто отредактировать одну таблицу стилей вместо обновления, возможно, тысяч HTML-документов. Если мы используем атрибуты стиля и пишем встроенный CSS, нам придется редактировать все эти HTML-документы при редизайне нашего сайта вместо простого редактирования одного файла таблицы стилей.
Существует также другая проблема: и CSS, и JavaScript часто содержат символы, которые имеют особое значение в HTML. Если код CSS или код JavaScript встроен в документ HTML, эти символы необходимо экранировать. Если мы встроили JavaScript и используем архаичную практику «скрытия» кода скрипта в комментариях SGML ( <!--...-->--
21. Должен ли я использовать pbr
Элемент p Абзац — это одно или несколько предложений, связанных с одной мыслью.
Разрыв строки ( br Однако в нескольких случаях можно сказать, что разрывы строк имеют семантическое значение, например, в поэзии, текстах песен, почтовых адресах и образцах компьютерного кода. Они могут представлять собой законное использование для brbrbr
С другой стороны, p Иногда веб-авторы склонны рассматривать p Нередко встречаются labelinputpform Метка и поле ввода не составляют «абзац».
22. Что означает «семантический»?
se-man-tic [si-‘man-tik]
отрегулированный
Из, относящихся к, или вытекающих из различных значений слов или других символов.
(определение из dictionary.com )
Когда мы говорим о «семантической разметке», мы подразумеваем правильное использование типов элементов — в зависимости от их значения — для разметки контента. Противоположностью является «презентационная разметка» или «суп-тег», где авторы выбирают типы элементов из-за их рендеринга по умолчанию, а не из семантического значения.
Пример: это семантически правильный способ разметки заголовка верхнего уровня веб-страницы:
<h1>Heading Text</h1>
Это несемантический (презентационный) способ сделать это:
<br><font size="7"><b>Heading Text</b></font><br>
Семантическое богатство HTML довольно ограничено. Первоначально HTML использовался физиками для обмена научными документами, и это довольно четко видно в наборе доступных типов элементов. HTML, вероятно, имел бы совсем другой набор типов элементов, если бы его изобрели бухгалтеры или библиотекари.
HTML также имеет два семантически нейтральных типа элементов: divspan Ни один из этих двух не подразумевает какой-либо конкретной семантики в отношении его содержания; divspan С другой стороны спектра у нас есть типы элементов с четко определенной семантикой: ptableul
Цель HTML — разметить семантику документа и — в некоторой степени — показать структуру его содержимого. HTML не имеет ничего общего с тем, как этот документ выглядит в браузере (хотя браузеры имеют стиль по умолчанию для каждого типа элемента).
23. Должен ли я заменить bistrongem
Только если вы действительно хотите что-то подчеркнуть. Эти обозначения не являются взаимозаменяемыми.
В старые добрые времена авторы использовали bi
В «Плохие современные дни» авторы используют strongem
em Содержимое, к которому оно применяется, должно иметь какой-то акцент при чтении вслух (громче, медленнее). strongemstrong Некоторые эксперты рекомендуют использовать b
i они только указывают жирным шрифтом или курсивом. Они полезны для соблюдения типографских соглашений, которые не имеют семантически правильного типа элемента в HTML. Например, названия кораблей традиционно пишутся курсивом, но в HTML нет типов элементов ship Таким образом, мы можем использовать <i>Titanic</i>
24. Почему таблицы раскладок считаются вредными?
- Семантически неправильно маркировать не табличную информацию в виде
table - Они могут вызвать проблемы с доступностью или удобством использования (особенно с некоторыми вспомогательными технологиями), особенно когда они вложены в несколько уровней.
- Они смешивают проблемы представления с контентом, затрудняя или делая невозможным достижение альтернативного стиля и независимости устройства вывода.
- Они раздувают разметку документа множеством ненужных тегов HTML, которые могут быть вредны для пользователей с низкой пропускной способностью (тех, кто использует коммутируемые соединения или мобильные устройства), а также для нагрузки и пропускной способности веб-сервера.
25. Должен ли я использовать div
Нет, мы должны использовать семантически правильные типы элементов, насколько это возможно, и возвращаться к div
Злоупотребление divtable Мы можем установить атрибуты idclass Мы можем назначить правила CSS практически для любого типа элемента, а не только для div
26. Таблицы устарели?
Не за что. table Таблицы не являются устаревшими, но таблицы макетов являются проблемой.
27. Как правильно использовать тип элемента address
address Это может быть почтовый адрес, адрес электронной почты, номер телефона или практически любые контактные данные. address По умолчанию рендеринг курсивом в большинстве браузеров, но это можно легко изменить с помощью CSS.
Распространенным заблуждением является то, что address
28. Как правильно использовать dfnтип элемента?
dfnиспользуется для разметки «определяющего экземпляра» термина. Типографское соглашение, особенно распространенное в научных документах, заключается в выделении курсивом нового термина — термина, с которым читатель не должен быть знаком, — впервые появляется в тексте. Таким образом, по умолчанию отображается dfnкурсив.
Распространенное заблуждение состоит в том, что это dfnозначает «определение», и многие авторы используют его так же, как они используют ( abbrили acronymиспользуют атрибут title для предоставления объяснения термина). Определенный термин должен быть отмечен только dfnодин раз в документе (где он впервые используется и объясняется).
29. Как правильно использовать varтип элемента?
varиспользуется для разметки переменной или заменяемой части некоторого текста. Это типографское соглашение выделять курсивом такие переменные, которые в реальной жизни будут заменены фактическими данными. Например, в руководстве по телефонной системе инструкция по переадресации входящих вызовов на другой добавочный номер может выглядеть примерно так:
<kbd>* 21 * <var>extension</var> #</kbd>
Здесь varэлемент используется для разметки «расширения» (которое будет выделено курсивом по умолчанию). Кто-то, пытающийся запрограммировать телефонную систему на ретрансляцию входящих вызовов на добавочный номер 942, наберет « *21*942#». Таким образом, varэлемент указывает, что вы не должны на самом деле печатать «добавочный номер», а вместо этого ввести фактический добавочный номер. Слово «расширение» является переменной.
Распространенным заблуждением является то, что varследует использовать для разметки переменных в примерах программного кода.
30. Должен ли я использовать кавычки внутри или вокруг qэлемента?
Нет, в спецификации четко сказано, что пользовательский агент несет ответственность за добавление кавычек во встроенные цитаты. К сожалению, некоторые старые браузеры (такие как Internet Explorer 6) не соответствуют спецификации и не будут добавлять кавычки. Один из вариантов — вставить кавычки с помощью JavaScript и использовать некоторые специальные стили с помощью CSS для вставки цитат для пользователей IE с отключенным JavaScript. Были предложены некоторые решения только для CSS, но они не будут работать в не-CSS браузерах, таких как Lynx.
31. В чем разница между abbrи acronym?
Кажется, никто не знает ответа на этот вопрос! Даже спецификация HTML противоречит себе в этом вопросе.
abbrбыл расширением Netscape для HTML во время «войн браузеров». acronymбыло расширение Microsoft. Оба означали одно и то же, более или менее. Оба типа элементов были включены в спецификацию HTML с различной семантикой. Проблема в том, что никто не может объяснить, что это за семантика.
Давайте посмотрим на пару словарных определений, а затем:
ab-bre-vi-a -tion [э-бри-ви-эй-шух]
н. Сокращенная или сокращенная форма слова или фразы, используемая для представления целого.
ac-ro-nym [‘ak-ruh-nim]
n. Слово, образованное из начальных букв или групп букв из слов в заданной фразе или серии слов.
Определение аббревиатуры говорит, что это слово, т. Е. Оно может быть произнесено. Таким образом, «НАТО» будет аббревиатурой, образованной из начальных букв фразы «Организация Североатлантического договора». «ФБР», однако, не будет аббревиатурой в соответствии со словарным определением, потому что оно не произносится как слово, а, скорее, прописано (например, глаз пчелы). И вот тут начинаются проблемы. «ФБР» технически известен как инициализм, о котором в словаре сказано следующее:
in-i-tial-ism [i-‘nish-uh-liz-uhm]
n. 1. Имя или термин, образованный из начальных букв группы слов и произносится как отдельное слово.
2. Набор инициалов, представляющих имя, организацию или тому подобное, причем каждая буква произносится отдельно.
Первое определение почти такое же, как для аббревиатуры, но второе более смягчено. Однако initialismв HTML нет типа элемента, и путаница усугубляется тем фактом, что «аббревиатура» на обычном американском языке используется как синоним «инициализма».
Спецификация HTML предлагает следующие определения:
abbr: Указывает сокращенную форму (например, WWW, HTTP, URI, Mass. И т. Д.).
acronym: Обозначает акроним (например, WAC, радар и т. Д.).
Пока что похоже, что спецификация придерживается определений словаря, что означает, что «FBI» должен быть помечен, abbrпоскольку его нельзя произносить как слово. Тем не менее, несколько пунктов ниже, в спецификации говорится,
Западные языки широко используют аббревиатуры, такие как «GmbH», «NATO» и «FBI», а также такие сокращения, как «M.», «Inc.», «et al.», «Etc.»
Вы еще не запутались? Я.В таком случае безопаснее всего всегда использовать abbr, поскольку все сокращения являются аббревиатурами, а не наоборот. Однако с этим подходом есть небольшая проблема. Microsoft была так взбешена, когда W3C решила использовать abbrсокращения и инициализмы вместо их acronym, что они фактически отказались поддерживать abbr! (Они начали поддерживать abbrв Internet Explorer 7, хотя.)
Так что же делать бедному веб-автору? Зачем нам вообще беспокоиться? Было бы неплохо иметь элемент для прикрепления атрибута title, но мы могли бы использовать для этого SPAN. Идея, как утверждается, заключается в том, что разметка аббревиатур и сокращений будет полезна для вспомогательных технологий; особенно скрин ридеры. Но программы чтения с экрана, как правило, игнорируют abbrи acronym, поскольку никто не знает, как правильно их использовать, а Microsoft не поддерживает abbr. Это уловка-22.
Ответ на этот часто задаваемый вопрос: я не знаю! Я лично использую abbrдля очевидных сокращений как «Inc.» и для инициализмов, таких как «ФБР», и я использую acronymдля вещей, которые могут быть объявлены как слова, как «GIF». Но из-за неоднозначности спецификации я не могу никого винить в том, что помечаю «ФБР» как аббревиатуру (хотя «Инк» определенно не является аббревиатурой). А как насчет «SQL», который некоторые прописывают, а другие произносят как «продолжение»? (Я бы использовал abbr.)
32. Почему не <feature X>рекомендуется?
Наиболее распространенная «особенность», о которой спрашивают начинающие, — это целевой атрибут для ссылок. Эта функция устарела (не одобрена) в HTML 4.01 Strict, но все еще действует в HTML 4.01 Transitional. Многие другие типы и атрибуты элементов, которые разрешены в Transitional, удалены из Strict.
Причина, по которой эти элементы устарели, заключается в том, что W3C хочет способствовать разделению контента (HTML), презентации (CSS) и поведения (JavaScript). Создание элемента по центру в области просмотра является проблемой представления; таким образом это должно быть обработано CSS вместо centerэлемента. Открытие нового окна браузера — это поведенческая проблема; таким образом, он должен обрабатываться JavaScript, а не targetатрибутом.
Как правило, устаревшими функциями являются те, которые возникли в эпоху войны с браузерами в конце 1990-х годов, когда поставщики браузеров конкурировали, добавляя различные расширения в HTML, чтобы превратить его в некий язык разметки страниц. Эти функции были включены в HTML 3.2 для наведения порядка в хаосе, но это не то, для чего предназначался HTML. Когда был выпущен HTML 4, авторы попытались «вернуть Интернет», осудив то, что они считали «вредными» частями HTML 3.2, по крайней мере в Strict DTD.
Другими словами, вещи устарели по причине. Не используйте эти функции, если вам не нужно.
33. Должен ли я иметь атрибут alt для каждого изображения?
Да, altатрибут обязателен для imgтипа элемента. Почему? Ну, не все пользователи могут видеть изображения, и не все пользовательские агенты могут понимать или отображать изображения. Например:
- Человек, который слеп или имеет очень слабое зрение, не может видеть изображение. Программа чтения с экрана не может описать изображение.
- Пользователи с медленными подключениями (коммутируемое или мобильное) иногда отключают изображения для более быстрого серфинга.
- Текстовые браузеры, такие как Lynx, не поддерживают изображения.
- Боты поисковой системы не могут понять изображения.
Таким образом, мы должны предоставить текстовый эквивалент для каждого изображения, используя altатрибут. Этот текстовый эквивалент не должен описывать изображение; он должен передавать эквивалентную информацию. Написание хороших текстовых эквивалентов не легко, и это требует много практики. Помните, что текстовый эквивалент отображается вместо изображения.
Итак, что такое хороший текстовый эквивалент для данного изображения? Это зависит от контекста, в котором используется изображение! Это не значит, что для каждого изображения существует один «идеальный» текстовый эквивалент. Давайте посмотрим на пример: скажем, у нас есть изображение пасущейся коровы. Эта конкретная корова является абердинским ангусом. Давайте тогда рассмотрим несколько вариантов использования этого изображения.
- В первом случае это изображение используется в качестве общей иллюстрации для статьи о мясном скотоводстве в Шотландии. Настоящая корова не относится к статье; это просто иллюстрация, декоративный элемент дизайна, который привлекает внимание читателя и снимает монотонность текста. В этом случае изображение не несет никакой соответствующей информации. Поэтому он должен иметь пустой текстовый эквивалент:
alt="". - Во втором случае изображение используется на детском веб-сайте о сельскохозяйственных животных. На странице показаны изображения различных животных: лошади, овцы, свиньи, коровы и т. Д. Рядом с каждым изображением находится блок текста, в котором представлены некоторые факты о каждом виде. В этом случае
alt="Cow:"может быть целесообразно. Не важно, что это абердинский ангус; картина представляет бычьих четвероногих в целом. - В третьем случае изображение используется на сайте о разных породах крупного рогатого скота. Здесь он используется для иллюстрации того, как выглядит абердин-ангус и чем он отличается от других пород. Страница содержит несколько изображений, каждое из которых имеет подпись, которая идентифицирует породу, но никакой другой текстовой информации. В этом случае текстовый эквивалент должен описывать определенные атрибуты и черты, характерные для абердинского ангуса: крепкое телосложение, массивный сундук, относительно короткие ноги, бугалообразный горб позади головы и т. Д.
- В четвертом случае изображение используется на странице портфолио фотографа. Это одно изображение среди нескольких других, с очень разными мотивами. Это один из немногих случаев, когда
altатрибут может включать описание самого изображения, например: «Черный Абердин-Ангус, пасущийся на солнце с Беном Невисом на заднем плане».
Как мы видим, соответствующий текстовый эквивалент зависит от контекста. Иногда (часто на самом деле) он должен быть пустым, потому что изображение не передает никакой информации, которая недоступна в сопроводительном тексте. Некоторые утверждают, что такие изображения должны быть фоновыми изображениями, указанными с помощью CSS, но во многих случаях это нецелесообразно и когда изображение действительно является частью контента — даже если оно не передает никакой полезной информации тем, кто не может ее увидеть.
Для изображений, которые содержат текст, текстовый эквивалент должен, конечно, повторять текст на изображении. Для таких вещей, как круговые диаграммы, текстовый эквивалент должен передавать информацию о процентах — ту же информацию, что и изображение.
Альтернативный текст не должен быть слишком длинным. Некоторые браузеры не переносят текстовые эквиваленты и не могут быть отформатированы каким-либо образом. Если нам нужен более длинный текстовый эквивалент, мы должны поместить его куда-нибудь еще и связать с ним через longdescатрибут.
Internet Explorer и старые браузеры Netscape отображают altатрибут во всплывающей подсказке, когда пользователь наводит указатель мыши на изображение. Это представляет собой неправильное использование текстовых эквивалентных данных. Мы должны использовать titleатрибут для «подсказки» информации. Для того, чтобы подавить альтернативный текст , появляющийся в подсказках, то мы можем использовать пустое название: title="".
34. В чем разница между classи id?
idОднозначно идентифицирует конкретный элемент в HTML — документе. Это как номер социального страхования, предоставляющий уникальную ручку для этого элемента. Так же, как два человека не могут иметь один и тот же номер социального страхования, никакие два элемента в документе не могут иметь одинаковый номер id. ids должны быть уникальными на странице.
Класс говорит, что у элемента есть некоторые черты, которые он (возможно) разделяет с другими элементами. Элемент может принадлежать более чем одному классу. Аналогией могут быть профессии: человек может быть и плотником, и медсестрой, и есть много плотников и много медсестер. (Тем не менее, все они имеют уникальные номера социального страхования.)
И ids, и классы в основном используются с CSS и / или JavaScript. В CSS idспецификация имеет более высокую специфичность, чем класс, что позволяет легко определять специальные правила для конкретного элемента. С помощью JavaScript мы можем искать элемент, используя его id( document.getElementById()).
Мы присваиваем idэлементы s элементам страницы, которые могут появляться не более одного раза на странице, например, меню навигации, нижний колонтитул, боковую панель и т. Д. Мы также можем назначать idэлементы s определенным элементам, которые встречаются только один раз на всем сайте, например определенным image, если мы хотим иметь определенные правила CSS для этого или манипулировать им с помощью JavaScript.
Мы назначаем классы элементам, которые имеют некоторые общие черты, обычно отображают свойства с помощью правил CSS.
idИмена классов и классов должны быть как можно более «семантическими». Они должны описать что-то, а не то, как оно выглядит. Таким образом, id="menu"это намного лучше, чем id="left"; особенно если мы изменим дизайн и переместим меню на правую сторону.
ids и имена классов чувствительны к регистру, даже в HTML. Мы не должны полагаться на чувствительность к регистру (то есть мы не должны использовать имена, которые отличаются только регистром).
35. Почему не id="123"работает?
Значения атрибутов id, nameand classдолжны начинаться с буквы (AZ или az).
36. Почему не <a href=My Cool Page.html>работает?
В этом случае есть две причины.
Значения атрибутов, которые содержат символы, отличные от букв, цифр и нескольких других символов, должны быть заключены в кавычки (двойные или одинарные). Например, любое значение атрибута, которое должно содержать пробел, должно быть заключено в кавычки. Самое простое и безопасное решение — всегда указывать значения атрибутов. Чтобы включить кавычки в указанное значение, у нас есть два варианта. Мы можем использовать «другие» кавычки, чтобы заключить значение ( alt='My "new" car', alt="Jane's car"), или использовать объект или ссылку ( alt="My "new" car", alt='Jane's car'). (Обратите внимание, что 'сущность не может использоваться с HTML.)
Вторая причина в том, что в URI есть пробелы. Они должны быть закодированы, как показано здесь:
<a href="My%20Cool%20Page.html">
« %20» означает «символ с кодовой точкой 0x20». 0x20 — это кодовая точка для пробела. Это относится только к URI, а не к значениям атрибутов в целом.
37. Как я могу включить страницу HTML в другую страницу HTML?
При строгом DTD существует только одна допустимая опция: тип элемента OBJECT
<object type="text/html" href="http://example.com/foo.html">
Alternate content here for browsers that don't support OBJECT.
</object>
К сожалению, поддержка objectв Internet Explorer практически отсутствует.
С переходным DTD мы также можем использовать iframeтип элемента:
<iframe src="http://example.com/foo.html">
Alternate content here for browsers that don't support IFRAME.
</iframe>
Гораздо лучший подход заключается в обработке включения на стороне сервера. Использование включений на стороне сервера (SSI) — это самый простой способ включить файл в другой, если он находится в одном домене:
<!--#include virtual="/foo.shtml"-->
Обратите внимание, что этот метод нельзя использовать для включения полного HTML-документа в другой; его можно использовать только с фрагментами HTML.
Другие серверные технологии позволяют нам выполнять более сложные задачи. Разумеется, ваш веб-сервер должен поддерживать эти технологии. Часто общие серверы с бесплатным хостингом не предоставляют таких технологий — даже SSI.