Синтаксис языка html

HTML :: Понятие тега и его синтаксис

Определение тега HTML

Как было сказано в определении, HTML – это язык гипертекстовой разметки веб-документов. Осуществляется такая разметка при помощи специальных меток, называемых тегами.

(от англ. tag ) – специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.

Синтаксис тегов HTML

Теги в html -документе идентифицируются парой символов ‘ и ‘>’ , между которыми располагаются характеристики тега:

• символ слеша, если он есть;
• имя тега;
• атрибуты тега, если они есть;
• значения атрибутов, если они есть.

В качестве примера рассмотрим два тега:

title=»Описание города»> и

. Эта пара тегов образует элемент ‘Абзац’ разметки документа. Первый из них является и обозначает начало элемента ‘Абзац’ . Второй же является . Он сообщает браузеру о том, что элемент ‘Абзац’ закончился и все, что будет написано далее, следует отнести к другому элементу разметки.

Как легко догадаться, у закрывающего тега после символа ‘ должен стоять символ слеша ‘/’ . Далее следует имя тега (в нашем примере это идентификатор p ) и символ ‘>’ . Других составляющих закрывающие теги не имеют.

В открывающих тегах слеш не пишется. Тоже самое касается и , т.е. тегов, для которых закрывающего тега не существует. Зато в них может присутствовать дополнительная информация в виде (от англ. attribute ), определяющих какие-нибудь дополнительные свойства, и значений атрибутов, которые обычно записываются в формате имя_атрибута=»значение_атрибута» и отделяются друг от друга пробелами. Так в теге

имеется два атрибута и два соответствующих им значения. Следует отметить, что существуют атрибуты и без значений. В таком случае вторая часть пары и символ ‘=’ отсутствуют, а вместо этого через пробел указывается только сам атрибут. Кроме того, строковые значения атрибутов должны указываться в кавычках. Мы для этих целей будем использовать двойные кавычки. Числа разрешается в кавычки не брать, но желательно так не поступать во избежание путаницы.

Регистр символов HTML

Что касается регистра символов имен тегов и имен атрибутов, то он значения не имеет. Так обе записи

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

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

Обобщенный синтаксис записи тегов HTML

Таким образом, в общем случае для записи открывающего или одиночного тега мы будем использовать следующий синтаксис:
, где имя_тега , а также имя_атрибута мы будем писать строчными буквами, а «значение_атрибута» записывать в двойных кавычках в независимости от того, является значение числом или строкой.

Синтаксис HTML5

Как вы уже узнали, в HTML5 некоторые правила были ослаблены. Это было сделано потому, что создатели HTML5 хотели, чтобы этот язык реальнее отражал действительную работу веб-браузеров. Иными словами, они хотели сократить разрыв между «работающими веб-страницами» и «веб-страницами, правильными с точки зрения стандарта». В следующем разделе мы рассмотрим изменения в правилах более подробно.

Конечно же, все еще существуют устаревшие методы, поддерживаемые браузерами, употребление которых абсолютно не одобряется стандартом HTML5. Эти методы можно обнаружить с помощью валидатора HTML5.

Ослабленные правила

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

В нем также разрешается использовать в тегах как прописные, так и строчные буквы, как в следующем примере:

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

В HTML5 также подверглись изменениям правила для атрибутов. Значения атрибутов больше не требуется брать в кавычки, но только при условии, что они не содержат запретных символов (обычно это символы >, = или пробел). Вот пример использования элемента таким образом:

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

то в HTML5 это можно делать в традициях HTML 4.01, указывая только одно название атрибута:

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

Далее дается краткое изложение основных принципов хорошего стиля создания разметки HTML5:

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

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

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

Проверка кода HTML5

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

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

Некоторые из возможных проблем, которые валидатор в состоянии уловить, включают следующие:

отсутствие обязательных элементов (например, элемента );

отсутствие закрывающего тега;

неправильно внедренные теги;

отсутствие атрибутов у тегов, для которых они обязательны (например, атрибута src тега );

неправильное расположение элементов или содержимого (например, текста в блоке ).

Инструменты для разработки веб-страниц, такие как Dreamweaver и Expression Web, оснащены собственными валидаторами, но только самые последние версии поддерживают HTML5. В таком случае можно воспользоваться одним из онлайновых валидаторов. Далее даются инструкции по использованию популярного валидатора от организации W3C:

Откройте в своем браузере страницу W3C Markup Validation Service. Валидатор предложит три способа проверки разметки, каждая на своей вкладке: Validate by URI (для страницы, которая уже размещена в интернете), Validate by File Upload (для страницы, сохраненной в файле на вашем компьютере) и Validate by Direct Input (для кода, вводимого или вставляемого в окно валидатора):

Выберите нужную вкладку и предоставьте свою HTML-разметку. Прежде чем приступить к проверке кода, можно щелкнуть по ссылке More Options, чтобы изменить некоторые параметры, но это нежелательно. В частности, будет лучше предоставить возможность валидатору определить тип документа автоматически. Таким образом валидатор использует описание типа документа, указанное в проверяемой веб-странице. Также лучше предоставить валидатору самому определить кодировку страницы, за исключением страниц с кодировкой, которую валидатор затрудняется определить.

Нажмите кнопку Check.

Ваш код будет отправлен на проверку, и после короткого ожидания в браузере будет выведен отчет с результатами валидации. Если код не прошел проверку, то в отчете будут указаны выявленные валидатором ошибки:

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

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

Возвращение XHTML

Как мы уже узнали, восхождение спецификации HTML5 знаменует, по идее, закат предыдущего короля Всемирной паутины — стандарта XHTML. Но действительность не так проста, и поклонникам XHTML не нужно отказываться ни от чего, что им мило в языках разметки предыдущего поколения.

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

Но что, если вы хотите сделать следование правилам XHTML-синтаксиса обязательным? Возможно, вы беспокоитесь, что вы (или ваши коллеги по работе) неосознанно потихоньку впадете в использование ослабленных соглашений обычного HTML. Чтобы не допустить этого, вам нужно использовать XHTML5, это менее распространенный стандарт, который, по сути, является HTML5, облаченным в ограничения, основанные на XML.

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

Для проверки этого кода требуется валидатор XHTML, который контролирует следование строгим старым правилам XHTML. Валидатор от W3C для этого не подойдет, но зато подойдет валидатор на сайте http://validator.nu, где нужно указать требуемый стандарт (т.е. XHTML) в раскрывающемся списке Preset. Также нужно установить флажок Be lax about HTTP Content-Type, если только вы не вставляете проверяемый код непосредственно в текстовое поле.

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

Если же вы хотите, чтобы и браузеры обрабатывали страницу согласно правилам XHTML, то вам нужно настроить свой веб-сервер для подачи страниц с MIME-типом application/xhtml+xml или application/xml, вместо стандартного типа text/html. Кстати, браузеры, поддерживающие XHTML5, обрабатывают такую разметку по-другому, чем обычный код HTML5. Они пытаются обрабатывать страницу как документ XML, и если это им не удается (по причине ошибки в коде), браузер прекращает обработку оставшейся части документа.

Какой из этого следует вывод? Для подавляющего большинства веб-разработчиков, от любителей до серьезных профессионалов, игра по строгим правилам XHTML не стоит требуемых для этого свеч. Единственным исключением является разработка специальных решений, например страниц с содержимым, которым нужно манипулировать посредством XML-инструментов, таких как, например, XQuery и XPath.

Если вам интересно, можно обмануть браузер и заставить его переключиться в режим XHTML. Для этого нужно лишь переименовать файл с расширением xhtml или xht, а потом открыть его с жесткого диска вашего компьютера. Большинство браузеров (включая Firefox, Chrome и IE 9) будут обрабатывать такую страницу, как будто бы она была загружена с веб-сервера с настройками MIME XML. Если страница содержит любую незначительную ошибку, в браузере отобразится частично обработанная страница (IE 9), сообщение об ошибке XML (Firefox) или то и другое вместе (Chrome).

Учись Учиться

Основы языка HTML

User Rating: 5 / 5

Основы языка HTML

Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информацией и единой системой адресации.

К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше 300 миллионов человек в 170 странах мира.

С функциональной точки зрения Интернет представляет собой:

ü недорогое быстродействующее средство общения между абонентами по всему миру;

ü не имеющее аналогов хранилище информации по любым областям знаний;

ü новую перспективную среду для деятельности.

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

Самым распространенным и востребованным сегодня является такой сервис Интернет, как WWW ( World Wide Web − всемирная паутина). Информация в WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.

Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста HTML ( Hyper Text Markup Language)

Основы языка HTML

Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами(от английского tag). Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа.

Просмотр HTML-документов осуществляется с помощью программ- браузеров (от английского browser), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры Microsoft Internet Explorer фирмы Microsoft Corporation и Netscape Navigator фирмы Netscape Communications Corporation .

Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте ( Notepad), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia Dreamweaver, Microsoft FrontPage , HomeSite и др.

HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции. Значительно эффективнее пользоваться специальными HTML — редакторами.

Синтаксис HTML-тегов

HTML-тег записывается в угловых скобках (символы ) и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры.

Теги условно можно разделить на две группы:

Парные теги (называемые также контейнерами) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта (символ /). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами и , будет выведен полужирным начертанием (название тега — от английского bold). Парные теги могут быть вложены друг в друга, но не должны пересекаться.

Непарные теги (называемые также автономными) не имеют конечного компонента. При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег SRC=»pict.gif»> , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif .

Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде пары название атрибута = значение атрибута. В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются.

Синтаксис HTML

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

• язык означает, что он может быть прочитан как человеком, так и компьютером;
• разметка означает, что написанный вами код помечается с помощью ключевых слов;
• гипертекст означает, что он использует HTTP как часть Интернета.

Как и любой язык, HTML поставляется с набором правил. Эти правила относительно простые и сводятся к определению границ, чтобы знать, где что-то начинается и где заканчивается.

Ниже приведён пример абзаца в HTML:

То, что вы видите в угловых скобках называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.

Каждый из тегов несёт определённый смысл. В нашем случае обозначает абзац текста.

Как правило, они идут парами:

• открывающий тег определяет начало абзаца;
• закрывающий тег

определяет его конец.

Единственным различием между открывающим и закрывающим тегами является слэш /, который предшествует имени тега.

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

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

Где писать HTML

Вы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение .txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение .html.

Откройте текстовый редактор, скопируйте и вставьте следующее содержимое:

Сохраните этот файл как my-first-webpage.html, просто откройте его вашим браузером и вы увидите:

Это моя первая веб-страница!

• используйте текстовый редактор, вроде Notepad++, для создания HTML-документов;
• используйте браузер, вроде Firefox, для открытия HTML-документов.

Атрибуты

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

Например, атрибут href используется для определения назначения ссылки (которая создаётся тегом ):

Есть 16 атрибутов HTML, которые могут быть использованы в любом элементе HTML. Все они не являются обязательными.

Вы в основном будете применять class (который используется для CSS) и title (подсказка, которая появляется при наведении курсора на объект, вроде этого).

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

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

Комментарии

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

Комментарий начинается с и заканчивается —> .

Самозакрывающиеся элементы

Некоторые элементы HTML имеют только открывающий тег:

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