HTML (язык разметки сайтов)
Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта — это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:
Язык разметки html получил широкую популярность. На данный момент — это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый «движок» создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).
Файлы, созданные на html, имеют расширения .html или .htm . Чтобы создать файл html, достаточно открыть блокнот и сохранить его с расширением .html. Как это сделать можете посмотреть на странице: пример создания простой html страницы
Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение .html. К примеру есть страницы /catalog/list (вообще без расширения). Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.
2. Пример и структура html кода
Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: заголовок и тело страницы.
Этот код можно редактировать в любом текстовом редакторе. Чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). Но лучше использовать более продвинутые редакторы для работы с HTML-разметкой.
Разметка состоит из html тегов (иногда пишут «тэг»).
3. Что такое HTML тег
Например, <teg> . Почти каждый тег парный и требует закрывающего тега </teg> . Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной (см. валидация сайта). Если это тег относится к тем, что держат «каркас» сайта, то сайт может «поплыть» (боковая колонка сместится вниз и т.п.).
Запрещено закрывать теги не по порядку их открытия. Например
Более подробно про создание html страницы читайте в статье:
Если HTML представляет собой скелет (структура) сайта, то CSS — это набор правил, которые отвечают за то, как это будет выглядеть, а именно, какой будет шрифт (размер, цвет, толщина), как будут располагаться элементы на сайте друг относительно друга и т.п. Поэтому HTML и CSS довольно тесно связаны между собой.
4. История развития HTML
- HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
- HTML 2.0 (22 сентября 1995) — появление тега form
- HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
- HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
- HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5
Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.
На нашем сайте Вы можете найти уроки по html с множеством примеров и пояснений. После их прочтения Вы должны освоить азы HTML.
Что представляет собой язык гипертекстовой разметки html кратко
HTML — язык гипертекстовой разметки, стандартный язык разметки документов в сети интернет. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Hyper Text Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ — это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера.
С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок — специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
HTML-документ состоит из двух частей: собственно текста, т.е. данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ.
Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения.htm или.html.
В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.
Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
Самым главным из тегов HTML является одноименный тег <html>. Он всегда открывает документ, так же, как тег </html> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:
<head> Заголовок документа </head>
<body> Тело документа </body>
Чаще всего в заголовок документа включают парный тег <title>. </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.
Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно.
Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.
Язык HTML поддерживает логическое и физическое форматирование содержимого документа. Логическое форматирование указывает на назначение данного фрагмента текста, а физическое форматирование задает его внешний вид.
При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h1 (заголовок первого уровня), h2, h3, h4, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков:
Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u> задает подчеркивание текста, <font></font> управляет шрифтом текста.
Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Пример применения тега:
<img src = «picture.gif»>
Для создания гипертекстовой ссылки используется пара тегов <а>. </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения:
<а href = «document.html»>ссылка на документ</а>
Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой:
<а href = «http://www.school.donetsk.ua/11.jpg»>Фотография 11-А</а>
С помощью различных тегов можно рисовать таблицы, форматировать текст, вставлять в документ изображения, видео-, звуковые файлы и прочее.
Что такое язык HTML
HTML — это язык гипертекстовой разметки (HyperText Markup Language).
Если попытаться сказать по простому, то это язык разметки документов для отображения на сайтах в Интернете (или в локальной сети, или на компьютере пользователя).
Большинство веб-страниц, из которых и состоят сайты, содержат описание разметки на языке HTML (или XHTML).
Язык HTML — это НЕ язык программирования. На HTML ничего не программируется. Просто с помощью этого языка вы можете определить, как будет отображаться документ на экране (цвет и стиль текста, списки и параграфы, таблицы и прочие данные, которые обычно содержатся в текстовых документах).
С помощью специальных элементов языка — дескрипторов (наиболее часто их называют “тегами”) вы можете выполнить разметку документа так, как вам это необходимо (то есть указать, где будут таблицы, где рисунки, где и какие отступы, где текст будет выделен жирным и/или цветом и т.п.).
Это делается в любом простом текстовом редакторе (таком, например, как Блокнот в Windows). Хотя лучше использовать специальные с подсветкой синтаксиса (например, PSPad). В этом редакторе вы записываете теги и текст. В таком редакторе вы видите все теги и можете их добавлять, удалять или изменять, редактируя таким образом HTML-документ.
А чтобы этот документ отображался уже в таком виде, в каком его должен видеть пользователь (пользователь, разумеется, не должен видеть теги, а только содержимое документа), этот документ нужно открывать с помощью специальной программы, которая называется браузер.
Браузер просматривает все теги в документе, определяет, как должен выглядеть HTML-документ для конечного пользователя, и отображает пользователю только содержимое документа, делая теги невидимыми.
Сравните два рисунка: на одном HTML-файл открыт с помощью текстового редактора, а на другом — с помощью браузера.
Как видите, даже в таком простом примере отличия видны и понятны.
А теперь, пожалуй, главные выводы из всего вышесказанного.
- HTML-файлы создаются верстальщиком сайтов в текстовом редакторе (текстовый редактор может быть как самостоятельной программой, так и входить в состав более мощных программ для создания сайтов, таких как WordPress).
- HTML-файлы просматриваются пользователем с помощью браузера — специальной программы.
Верстальщик сайтов — это человек, который выполняет техническую часть создания сайта (кроме программирования). Таким образом процесс создания сайта можно условно разделить на следующие этапы:
- Замысел. То есть для чего, для кого создаётся сайт, какие цели и задачи он должен решать и т.п. Это обычно исходит от будущего владельца сайта, которым может быть любой человек или организация.
- Дизайн (внешний вид). То есть продумывание того, как будет выглядеть сайт на экране компьютера: где будет меню, где будет основное содержимое, логотипы, иконки и т.п. . Это воплощение замысла дизайнера в жизнь. То есть веб-дизайнер решает творческую задачу и определяет, как будет выглядеть сайт, а верстальщик решает техническую задачу (делает так, чтобы сайт, нарисованный дизайнером, например, в Фотошопе, точно также отображался уже в Интернете, но при этом ещё и работал).
Для более сложных сайтов может потребоваться ещё и, например, программирование. Но это уже другая история.
Кстати, если вам интересно, как выполняется вёрстка сайта, то все тонкости этой профессии вы можете узнать из видеокурса
Что такое HTML, теги в составе кода документа (страницы) на языке гипертекстовой разметки
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. На современном этапе язык ХТМЛ служит для обеспечения корректного отображения контента (текста, изображений, видео) на всех страницах веб-ресурсов (блогов, сайтов, порталов и т.д.) в удобном для пользователей виде.
На блоге Goldbusinessnet.com для изучения HTML есть специальный раздел, предназначенный начинающим, так что вы без труда сможете постигнуть основы этого языка разметки, который, к слову, не является супер-пупер сложным и подвластен большинству тех, кто раньше вообще не сталкивался с ним и был далек от этой темы.
В сегодняшнем материале я планирую представить в основном общую информацию, которая, тем не менее, очень важна не только начинающим изучать HTML с нуля, но и более опытным юзерам. В частности, мы рассмотрим, из каких элементов состоит код языка разметки, какие из них являются обязательными и присутствуют в каждом документе, а также на каком официальном ресурсе можно найти абсолютно все действующие теги, служащие основой любого кода ХТМЛ.
HTML — это специальный язык разметки гипертекста
Начнем с того, что аббревиатура HTML расшифровывается как «HyperText Markup Language», что в переводе на русский означает «язык гипертекстовой разметки».
Он был создан основоположником интернета Тимом-Бернерсом Ли в конце 80-х — начале 90-х прошлого столетия. Этот язык разметки (подчеркиваю, разметки, а не программирования, как считают некоторые неопытные пользователи) изначально задумывался как средство обмена научной и технической информации между специалистами. Именно с помощью HTML любое содержание должно было воспроизводится без искажений на каждом устройстве.
Значение языка гипертекстовой разметки многократно возросло с появлением первых браузеров (читайте о самых популярных на сегодняшний день), или, по-другому, веб-обозревателей. Они позволяют не только найти и получить нужную страницу (документ), но и интерпретируют полученный ХТМЛ код в понятный пользователям глобальной сети вид.
Кстати, именно появление браузеров вкупе с развитием ХТМЛ можно считать зарождением новой эры, когда интернет начал принимать современные очертания.
В 1994 году по инициативе того же Тима-Бернерса Ли основана организация W3C, которая была призвана разработать единые стандарты для производителей программ и оборудования. Это было начальным этапом по наведению порядка в Мировой Паутине, хотя не все складывалось гладко (но без этого шага неминуемо последовал бы хаос в полном смысле этого слова). В рамках этих мероприятий была разработана 2 версия языка разметки гипертекста.
В этом же году получил полноправную «путевку в жизнь» браузер Mosaic, ставший прародителем Netscape Navigator (который в свою очередь впоследствии был преобразован в Mozilla Firefox).
В 1995 году по инициативе корпорации W3C опубликована очередная версия HTML 3, которая уже поддерживала каскадные таблицы стилей (CSS).
Надо сказать, что разработчики веб-обозревателя Internet Explorer, появившегося в том же 1995 в качестве детища компании Microsoft и поставлявшегося в составе самой популярной в мире операционной системы Windows, начали внедрять свои стандарты, которые коснулись и HTML.
Появился некоторый дисбаланс, поскольку одни разработчики вновь появлявшихся веб-браузеров (например, Opera) следовали рекомендациям Всемирного Консорциума W3C касательно языка ХТМЛ, а другие использовали стандартизацию по лекалам компании Майкрософт, которая была внедрена в Интернет Эксплорер.
В результате страницы сайтов отображались по-разному в различных браузерах. Это негативным образом коснулось как простых пользователей, так и вебмастеров, которые вынуждены были прибегать к различным ухищрениям для того, чтобы добиться высокой степени кроссбраузерности (идентичного отображения документов в разных браузерах).
Такая ситуация сложилась в том числе потому, что работа по внедрению единого стандарта шла в W3C крайне медленно и отставала от развития технологий, используемых в глобальной сети.
По этой причине многие необходимые аспекты не были к тому времени до конца учтены. Чтобы не допустить окончательно неразберихи, в !997 году Консорциум сделал стремительный рывок, представив в начале года версию HTML 3.2, а уже в конце года — и 4.0, которая оказалась принципиально новой, в ней многие элементы были отменены, поскольку безнадежно устарели.
А в 1999 году миру явился HTML 4.01, созданный на базе четвертой версии и безальтернативно просуществовавший долгое время. Это стало большим успехом Консорциума, потому что к этому времени подавляющее большинство популярных браузеров было адаптировано под этот стандарт.
Исключение долгое время составлял лишь Explorer, разработчики которого явно не торопились полностью подключиться к единой стандартизации. Главной причиной была сила популярности ОС Виндовс (напомню, этот обозреватель по умолчанию является ее частью), соответственно и доля IE первое время оставалась весьма значительной в мире.
Однако, время расставило все по своим местам. Бурное развитие конкурентов (Мозилы, Оперы, а, главное, Хрома, явившегося продуктом могущественного Гугла) серьезно пошатнуло позиции Эксплорера, а потому владельцы Microsoft вынуждены были предпринять определенные шаги.
Одним из этих шагов стал постепенный переход к Международным стандартам, в результате чего уже 9 версия IE была практически полностью адаптирована к ним. Таким образом, возросшая активность организации W3C позволила сохранить стабильность и порядок во многих аспектах, что позволило ей завоевать серьезный авторитет среди крупнейших компаний компьютерной и интернет индустрии. Все ожидали следующего этапа, и он настал.
Долгие годы версия ХТМЛ 4.01 успешно выполняла поставленную задачу. Но жизнь двигается вперед, инфотехнологии активно развиваются, поэтому в один прекрасный момент возникла потребность внедрить в язык HTML отвечающие современным требованиям рекомендации.
В результате в 2014 году появилось сообщение об официальной рекомендации новой версии HTML5, что означало полную готовность стандарта к широкому применению.
Более того, в 2016 и 2017 году соответственно со стороны Международного Консорциума окончательные рекомендации получили модификации 5.1 и 5.2, а на данном этапе уже ведутся работы по внедрению версии HTML 5.3.
Далее выясним, какое место занимает ХТМЛ в обеспечении корректной работы современного интернета. Для этого проследим механизм получения пользователем нужной ему веб-страницы.
Полноправным посредником этой операции как раз и служит приложение, именуемое браузером. Необходимо отметить, что каждая страничка любого сайта (по-другому документ) в интернете имеет свой уникальный URL-адрес, включающий протокол HTTP (HTTPS), предназначенный для передачи гипертекста, а также путь до объекта, указывающий на его местоположение:
Поскольку гипертекст напрямую связан с протоколом HTTP и, соответственно, с языком HTML, для лучшего понимания всей темы следует уяснить и его значение.
Гипертекст (англ. hypertext) — текстовый фрагмент, расположенный на конкретной странице веб-ресурса и содержащий гиперссылки на другие страницы этого или стороннего сайта, вследствие чего пользователь имеет возможность нелинейного чтения, преимущество которого заключается в том, что в процессе ознакомления с материалом можно переходить по ссылкам для уточнения информации, после чего продолжить изучение контента основной страницы.
А теперь краткая информация тем, кто всерьез решил заняться сайтостроением. Физически все файлы вебсайтов, включая HTML-странички, предназначенные для их просмотра в браузере, располагаются на серверах, представляющих из себя мощные компьютеры, специально ориентированные на выполнение этой задачи. Естественно, они имеют доступ в интернет.
Услугу по размещению сайтов на серверах, называемую хостингом (как ею воспользоваться), предоставляют провайдеры (хостеры), взимая за нее определенную плату. Впрочем, всегда можно найти себе и бесплатный хостинг, но в таком случае для вас будут действовать некоторые ограничения, которых нет у платных аналогов.
Любой вебресурс обладает уникальным доменным именем, связанным с ай-пи адресом сервера, на котором он расположен (читайте о связке IP и DNS) и входящим в состав урла.
Поэтому после ввода пользователем URL (пример дан чуть выше), в состав которого, напомню, входит еще и путь до конкретного файла, содержащего нужную HTML страницу, и последующего нажатия клавиши Enter начнется «диалог» между клиентом, в качестве которого в этом случае выступает браузер, и сервером, где «живут» все файлы нужного сайта. Браузер посылает HTTP запрос, в результате чего сервер отдает вместе с ответом содержание требуемого документа.
Содержимое странички как раз и закодировано средствами языка ХТМЛ, преобразуемое тем же браузером в обычный контент (который и является гипертекстом, но уже без разметки), отображаемый на экране устройства и удобный для восприятия обычным пользователем.
Зачем нужна подобная кодировка? Код HTML не просто позволяет корректно отображать элементы посредством указания соответствующих тэгов, но еще и придать им нужный дизайн с помощью атрибутов (о них поговорим ниже), а также привязки к файлу каскадных таблиц стилей (CSS) .
Общая структура HTML страницы и основные тэги
Итак, абсолютно любой документ в интернете предстает перед глазами юзера в окончательном, готовом для изучения, виде. Однако, как мы выяснили выше, браузер получает от сервера его содержание в формате HTML, которое выглядит примерно так:
Если взглянуть на код любого документа, то можно выделить две составляющие:
- контент в «чистом» виде, то есть, содержание, которое получает пользователь;
- элементы разметки (команды), каждый из которых больше известен под наименованием «тег» или «тэг» (англоязычный вариант — «tag»)
Именно теги во многом определяют, как будет выглядеть web-страничка на мониторе устройства пользователя (ПК, планшета, смартфона и т.д.). В коде вы их можете определить по наличию угловых скобок, между которыми заключено их название (например, <body>).
В языке гипертекстовой разметки есть несколько обязательных тегов, которые содержит любой ХТМЛ документ. Наверное, легче всего представить это в виде простой схемы:
Данную конструкцию можно считать шаблоном, содержащим следующие основные элементы:
- <!DOCTYPE html> — специальный тег, который называют еще декларацией. Он начинается с угловой скобки, заканчивается ею, имеет перед названием восклицательный знак и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров;
- html — корневой элемент, который определяет все содержание страницы;
- head — внутри этого тэга размещается служебная информация, которая необходима браузеру для корректной интерпретации документа. Она не видна на открытой вебстранице;
- body — между закрывающим и открывающим тегами будет помещена информация, отображаемая на web-странице.
Вообще, можно выделить два основных типа HTML тэгов:
1. Парный тег с открывающим <tag_name> и закрывающим </tag_name> элементами. Последний имеет слеш перед названием. Примером может служить один из наиболее часто используемых HTML тег абзаца p, содержащий текстовый фрагмент:
2. Одиночный, или пустой, тег, не имеющий закрывающего элемента. В него нет возможности заключить какое бы то ни было содержание с целью разметки, но зато можно отобразить на веб-странице какой-нибудь блок или фрагмент. Здесь в качестве примера можно взять тег img, с помощью которого выводятся изображения.
С помощью тэгов браузер получает команды о том, какие элементы будут располагаться на веб страничке. Однако, каждый из этих элементов обладает своими характеристиками и свойствами. Чтобы учесть этот аспект, в языке разметки гипертекста существует такое понятие как атрибут, принимающий то или иное значение (параметр). Тогда в общем случае синтаксис открывающего тега (либо одиночного) можно представить в таком виде:
А вот как можно отобразить с помощью тэга button кнопку на сайте для отправки данных формы на сервер (значение «submit» атрибута «type» позволяет получить нужный вид кнопочки):
Если вы являетесь вебмастером или твердо решили стать таковым, то эту информацию следует обязательно взять на вооружение, поскольку она окажет неоценимую помощь при верстке. Конечно, в процессе создания своего ресурса в современных условиях вы, скорее всего, используете одну из популярных систем управления контентом, в просторечии именуемых движком сайта (здесь обзор лучших CMS), например, ту же Вордпресс.
Это может избавить вас от необходимости полностью вручную составлять HTML код всех страниц, ведь одной из функциональных особенностей любой ЦМС является возможность генерировать странички с разметкой автоматически «на лету». Тем более, что для написания базового контента, например, в админ панель WP встроен весьма удобный HTML-редактор.
Однако, при доработке и редактировании сайта (а без этого невозможно обойтись) вам может понадобиться вставить в шаблоны темы с помощью HTML-кода дополнительно те или иные формы, кнопки, логотипы и т.д. Вот тут-то и пригодится знание тегов и их атрибутов.
Важность HTML5, все действующие теги и атрибуты
В статье я уже обмолвился, что последнее обновление HTML 4.01 вышло в далеком уже 1999 году. Однако, эта версия оказалась настолько удачной, что просуществовала аж целых 15 лет, что кажется невероятным, если учесть бурное развитие инфотехнологий.
Но все же с тех далеких пор интернет сильно изменился. Ускорение глобализации, рост числа пользователей планшетов, смартфонов и других мобильных устройств продиктовали насущную необходимость внесения весьма существенных изменений и дополнений, поэтому начиная с 2014 года официальной действующей версией является HTML5.
Для вебмастеров очень важным является понимание того, что при создании новых сайтов уже нужно использовать пятую версию, так как это сулит немалые преимущества. Но заслуга Международного Консорциума W3C заключается в том, что новый вариант разметки создавался очень взвешенно, в нем осталось все лучшее, что было присуще прежней редакции.
Более того, HTML4 до сих пор поддерживается, в том числе популярными браузерами, а потому вебмастерам, имеющим давно действующие проекты, заточенные под четвертую версию, можно осуществить плавный и максимально безболезненный перевод своих сайтов на HTML5. Почему же в принципе важно делать подготовительные шаги к такому переходу уже сейчас?
Дело в том, что в отличие от всех предыдущих версий, которые создавались на базе метаязыка SGML, ХТМЛ 5 разработан в связке с DOM (Document Object Modul), являющимся по своей сути универсальным программным интерфейсом, дающим возможность приложениям получать доступ к содержанию документов с гипертекстовой разметкой.
Это дает право считать HTML5 не продолжением предшествующих версий, а принципиально новой платформой, использующей программное обеспечение для создания видео, аудио, графики, а также многих других полезных вещей. Такие вот дела.
Единственная проблема, которая препятствует пока полновластному и повсеместному господству пятой версии ХТМЛ — это то, что, хотя последние модификации популярных браузеров и поддерживают большинство тегов и атрибутов HTML5, все же многие пользователи до сих пор применяют устаревшие варианты веб-обозревателей (особенно, это касается рунета), которые, естественно, не отображают корректно страницы веб-ресурсов, созданных на основе последних инноваций. Соответственно, это влияет негативно на показатели посещаемости.
Как я уже сказал, полный переход на пятую версию происходит постепенно, поэтому браузеры какое-то время будут поддерживать HTML4. Кроме того, удачный вариант четвертой модификации позволил оставить подавляющее число тегов и атрибутов без изменений. При внедрении ХТМЛ 5 лишь незначительное их количество стало неликвидным или было изменено, что тоже помогает вебмастерам максимально безболезненно осуществить переход.
Наверное, настало время проинформировать вас относительно веб-ресурсов, где вы сможете посмотреть полный перечень всех действующих и валидных на данный момент элементов разметки. В первую очередь, естественно, это первоисточник, коим является официальный сайт World Wide Web Consortium (W3C).
На этой странице там представлен список всех стандартов. Возможно, вы захотите лицезреть элементы, относящиеся к четвертой версии, тогда переходите по ссылке HTML 4.01 Specification, после чего выбираете вверху страницы подраздел «elements».
Но все-таки наиболее актуальны теги и атрибуты, соответствующие последней версии ХТМЛ5. Для получения к ним доступа на той же web-странице с перечнем стандартов нужно кликнуть по линку «HTML5.2», а после перехода на вебстраницу прокрутить меню слева в самый низ и перебраться в раздел «Index» — «Elements»:
На первых порах вам будут нужны первая колонка (Element), в которой указаны действующие тэги, при клике по которым вы переместитесь на вебстраницу с их подробным описанием, и шестая, где даны соответствующие им атрибуты (Attributes). Кстати, если нажать на ссылку globals, то можно перейти к просмотру списка глобальных атрибутов, работающих для всех без исключения тегов. В других столбцах следующая информация:
- Description — краткое описание элемента;
- Categories — категории, к которым относится данный тег;
- Parents — к какой категории относится родительский элемент;
- Children — то же самое, только касается дочерних элементов;
- Interface — нормативное определение элемента в интерфейсе DOM, на основании которого базируется весь HTML 5.
Ежели захотите углубиться в тему и получить более подробную информацию по каждой из всех присутствующих в таблице категорий, следует просто нажать на ее название. Правда, все данные там на английском, но здесь уж ничего не поделаешь. Тем, кто не понаслышке знаком с этим языком, будет несложно понять содержание, остальным — Гугл переводчик в помощь.
Но все-таки я предоставлю весьма авторитетный русскоязычный ресурс, в справочнике которого есть необходимые ссылки на информацию о всех тегах и атрибутах. Это не первоисточник, однако сайт весьма полезен, тем более, что своевременно обновляется.
Но я все же постараюсь дать краткое пояснение в отношении чтения данной таблицы на примере тега a, посредством которого создается гиперссылка (hyperlink). Скажем, в колонках «Categories» и «Parents» напротив него присутствует категория «phrasing» (подразумевающая текст документа, а также теги, осуществляющие разметку текстового фрагмента), которой может принадлежать «a» и его родительский элемент абзаца p.
Попутно обращаю ваше внимание на то, что в выше приведенном примере для тега a указан атрибут «href», значением которого является URL страницы сайта.
Пятая версия языка разметки еще более тесно связана с каскадными таблицами стилей (CSS), определяющими стиль оформления, поэтому продолжилась тенденция упразднения некоторых атрибутов, которые выполняют ту же самую задачу, но гораздо менее функциональны.
Впрочем, отследить абсолютно все отличия HTML5 от HTML4 вы сможете опять же в специальном разделе веб-ресурса, принадлежащего Консорциуму, которые включают новые, измененные, а также устаревшие элементы и атрибуты. В завершение предлагаю видеоролик от Евгения Попова, который может дополнить информацию в статье: