HTML — основа веб-разработки, и знание его основ крайне важно для дизайнеров. Это как заглянуть за кулисы и понять, из чего состоит каждая веб-страница.
HTML даёт представление о структуре и содержании сайтов. Это язык, который определяет элементы страницы — заголовки, абзацы, изображения и ссылки — и формирует пользовательский опыт. Понимая, как эти элементы взаимодействуют между собой, вы сможете представить, как строится целостная и вовлекающая веб-страница.
Вам не нужно становиться экспертом в коде, но хорошее понимание HTML поможет вам эффективно работать с разработчиками и гарантировать, что ваши дизайн-макеты точно реализуются в вебе.
Язык разметки гипертекста
HTML (Hypertext Markup Language, язык разметки гипертекста) — это первый язык, с которого начинают изучение фронтенд-разработки все веб-дизайнеры и разработчики. Гипертекст обозначает ссылки между страницами, благодаря которым пользователь может с лёгкостью переходить по контенту. Язык разметки — это система тегов, заключённых в угловые скобки < >, которые, как правило, идут парами. Браузеры интерпретируют эти теги и отображают текст, изображения и другие элементы в привычном для пользователей формате.
Первую версию HTML разработал Тим Бернерс-Ли в 1991 году, и со временем она эволюционировала в современный HTML5. Сейчас в HTML используется около 100 тегов с атрибутами, которые изменяют поведение или внешний вид этих тегов.
Структура страницы
Базовая HTML-страница состоит из простых элементов HTML — объявления doctype, тегов <html>, <head>, <title> и <body>. Как и все теги, они заключаются в угловые скобки <…>. Чтобы создать HTML-документ, можно использовать встроенные текстовые редакторы, такие как Блокнот (Windows) или TextEdit (Mac). Сохраните файл с расширением .html или .htm — и voilà! — вы можете открыть его как веб-страницу в любом браузере.
<!DOCTYPE html>
Любая страница начинается с объявления <!DOCTYPE html>. Технически это не тег, а инструкция для браузера, что страница использует последнюю версию HTML5. В отличие от обычных тегов, <!DOCTYPE> должен быть на странице только один раз — в самом верху. Объявление doctype нечувствительно к регистру, его можно писать как угодно.
Тег <html>
Сразу после <!DOCTYPE html> идёт тег <html> — основа любой веб-страницы. Как и все теги, он открывается и закрывается угловыми скобками. Пара тегов <html> и </html> образует обязательную рамку, которая ограничивает весь HTML-документ.
И ещё один момент: HTML нечувствителен к регистру, так что тег <html> можно писать и как <HTML>. Главное — быть последовательным и использовать либо нижний, либо верхний регистр на протяжении всего документа.
Тег <head>
Тег <head> располагается сразу после <html> и содержит метаданные документа. Эти данные, заключенные в теги <meta>, не отображаются на странице, но очень важны для её функционирования. По сути, <meta>-теги описывают саму страницу: они содержат такую информацию, как кодировка, описание, ключевые слова, автор, а также настройки области просмотра (viewport), которая определяет видимую пользователю часть.
Поисковые системы, такие как Google, анализируют метатеги сайта, чтобы понять его назначение, и используют эти данные для создания сниппетов — заголовков и описаний страниц в результатах поиска.
Тег <title>
Тег <title> — это часть раздела <head>, где хранятся служебные данные страницы. В отличие от заголовков в контенте (например, <h1>), сам тег <title> не отображается на веб-странице. Однако его содержимое показывается в заголовке окна или на вкладке браузера, а также в результатах поисковых систем. Важно не забывать закрывать тег с помощью </title>.
Тег <body>
Единственный контент, который пользователь реально видит на странице, находится внутри парных тегов <body> и </body>. Эта часть содержит заголовки, которые дизайнеры обозначают тегами от <h1> до <h6>. Тег <h1> — это самый важный заголовок, а <h6> — наименее важный.
Если вы хотите добавить абзац в HTML, поместите текст внутрь тегов <p> и </p>. Кроме того, секция <body> может включать изображения, гиперссылки, таблицы, списки и другие элементы контента.
Структура страницы
Когда вы знакомитесь с новым человеком, вы не рассказываете всю свою биографию в первые минуты. Точно так же и веб-страница сначала должна «представиться» браузеру, указав <!DOCTYPE> и метаданные. За тегом <html> следует <head>, и только потом — <body>. Эту проверенную структуру лучше не нарушать — она гарантирует безупречную работу.
W3C
Как и любые другие стандарты, веб-стандарты существуют, чтобы избежать хаоса. Но кто же создаёт правила для Интернета? Этим занимаются так называемые «организации по разработке стандартов» — Standards Development Organisations (SDO). Одной из самых известных таких организаций является World Wide Web Consortium (W3C), которая объединяет технических специалистов с целью совместной разработки веб-стандартов. Их задача — помогать разработчикам создавать функциональные, доступные и кроссбраузерные продукты.
W3C была основана в 1994 году Тимом Бернерсом-Ли в Массачусетском технологическом институте (MIT) в сотрудничестве с Европейским центром ядерных исследований (CERN). Помимо разработки стандартов, W3C проводит обучающие курсы, создаёт программное обеспечение и поддерживает открытую платформу для обсуждения развития Веба.