Что такое HTML?
HTML — Hypertext Markup Language (язык разметки гипертекстовых документов) — стандартный язык разметки для создания веб-страниц и веб-приложений. Вместе с каскадными таблицами стилей (CSS) и языком программирования JavaScript, этот язык создаёт триаду основных технологий для всемирной паутины.
HTML не является языком программирования. С помощью специальных меток — тегов HTML — производится размещение различных объектов на веб-странице — заголовков, текста, изображений, кнопок, списков и т.д. и создаётся общая структура веб-документов (скелет). Оформление (стилизация) этих объектов производится с помощью CSS.
HTML расшифровывается как Hyper Text Markup Language — язык гипертекстовой разметки
HTML — это стандартный язык разметки веб-страниц
HTML элементы являются строительными блоками HTML-страниц
HTML элементы представлены <> тегами
HTML Элементы
HTML элемент представляет собой тег начальный и тег конечный с содержимым между ними:
| Начальный тег | Элемент содержимое | Конечный тег |
|---|---|---|
| <h1> | Это заголовок | </h1> |
| <p> | Это параграф. | </p> |
HTML Атрибуты
- HTML элементы могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементе
- Атрибуты входят в пары имя / значение, такие как charset="utf-8"
Простой HTML документ
Объяснение примера
HTML-элементы являются строительными блоками HTML-страниц.
- Объявление <!DOCTYPE html> определяет этот документ как HTML5
- Элемент <html> является корневым элементом HTML страницы
- Атрибут lang определяет язык документа
- Элемент <meta> содержит метаинформацию о документе
- Атрибут charset определяет набор символов, используемый в документе
- Элемент <title> определяет заголовок документа
- Элемент <body> содержит видимое содержимое страницы
- Элемент <h1> определяет большой заголовок
- Элемент <p> определяет параграф
HTML Документы
Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html> .
Сам HTML-документ начинается с тега <html> и заканчивается тегом </html> .
Видимая часть документа HTML находится между тегом <body> и тегом </body> .
HTML Структура документа
Ниже приведена визуализация HTML-документа (структура HTML-страницы):
Что такое HTML и как с помощью него войти в IT
Социальные сети, интернет-магазины, новостные порталы: в основе большинства веб-страниц лежит HTML. Поэтому не будет преувеличением назвать его главным языком интернета. Редакция MC.today разобралась, что такое HTML, а также изучила его преимущества и принцип работы.
Что такое HTML
HTML (HyperText Markup Language) – это специальный язык разметки, который применяется при создании сайтов в интернете. Браузеры прекрасно понимают html и могут интерпретировать в понятном для человека виде.
Представьте, что вы кликнули по ссылке на сайт mc.today. В этот момент браузер обращается к серверу сайта и получает с него файл в формате HTML. Но пока это всего лишь набор элементов, которые обозначают специальными пометками – тегами. Чтобы превратить их в заголовки, кнопки, ссылки, изображения, браузер интерпретирует теги согласно правилам языка HTML.
Таким образом документ HTML – это своеобразный план с информацией, из каких строительных блоков и в каком порядке собирать веб-страницу. Блоками здесь выступают наборы тегов. Почти все теги парные. Открывающий показывает, где элемент начинается, а закрывающий – где заканчивается. К примеру, чтобы создать абзац, нужно поместить текст между исходным тегом <p> и закрывающим </p>.
Для чего используют HTML
Читая эти строки, вы пользуетесь HTML. Сегодня сайты есть практически у всех, начиная от корпораций и заканчивая специалистами по маникюру. И все они написаны на HTML. Веб-версии имеют приложения, сервисы, игры, Viber и Telegram.
На HTML написаны многие приложения, которые мы считали десктопными или мобильными. И если щелкнуть правой клавишей и выбрать «Просмотреть код», то вездесущий тег <div> обнаружится и в Google Drive, и в Facebook, и на сайте ПриватБанка.
История появления
В 1989 году программист международного центра высоких энергий в Женеве Тим Бернерс-Ли предложил проект Всемирной паутины, или World Wide Web. Идея состояла в том, чтобы создать систему взаимосвязанных гипертекстовых документов, расположенных на компьютерах по всему миру. Для реализации Тим и его помощники разработали технологии, без которых просто невозможно представить себе современный интернет.
- HTTP – протокол, который позволяет передавать документы от клиента к серверу;
- URL – уникальный адрес, который определяет расположение ресурса в интернете;
- HTML – язык гипертекстовой разметки для создания веб-документов.
Не умаляя заслуг Бернерса-Ли скажем, что HTML не появился на пустом месте. За его основу «отец интернета» взял уже хорошо известный на то время язык разметки SGML. И даже визитная карточка HTML – теги с угловыми скобками – тоже оттуда.
Первым официальным описанием HTML стал документ «Теги HTML», который Бернерс-Ли опубликовал в 1991 году. В него вошли 18 структурных и семантических элементов – дескрипторов, или тегов. Небольшое количество элементов решило проблему сложности SGML, но в то же время позволяло создавать простые и красиво оформленные документы. Кроме того, HTML получил поддержку гипертекста.
С ростом популярности Сети стало понятно, что язык гипертекстовой разметки нуждается в развитии. Но нововведения должны подчиняться единым стандартам, чтобы каждый сайт можно было без проблем открыть на любом браузере. Созданием таких стандартов должен был заниматься Консорциум Всемирной Паутины, или W3C, который в 1994 году основал Тим Бернерс-Ли. Это международное сообщество продолжает работать над разработкой web-стандартов. На сегодня актуальной является их версия HTML с порядковым номером 5.3.
Что можно и нельзя сделать на HTML?
Как мы уже говорили, HTML указывает браузеру, из каких элементов и в каком порядке собирать веб-страницу, а также, где брать стили элементов и скрипты. Он также позволяет организовывать информацию разными способами. Например, создавать таблицы, списки, параграфы, форматировать текст, добавлять изображения, заголовки, ссылки и кнопки.
Но его функционала мало, чтобы оформить внешний вид элементов и заставить их реагировать на действия пользователей. Для этой цели используют стили CSS и язык JavaScript.
СSS, или каскадные таблицы стилей , – это язык, на котором описывают внешнюю, визуальную сторону HTML-документов. Совместное использование HTML и CSS упрощает разработку, так как свойства можно прописать один раз в для множества одинаковых элементов. Без CSS, напротив, часть возможностей теряется. Нельзя добавлять дизайнерские шрифты, устанавливать фон веб-страницы, указывать стили для разных состояний объекта.
Хоть HTML и является языком разметки, в нём всё же присутствуют некоторые элементы оформления. Так тег <strong> может сделать текст жирным, а тег <i> – курсивным. Но на практике HTML придает этим тегам в первую очередь смысловое (семантическое) значение. Поэтому использование элементов <strong> и <i> ради визуального эффекта считается дурным тоном.
JavaScript – это язык программирования, который создали специально, чтобы сделать страницы «живыми». Программы, которые написали на JavaScript, легко встраиваются в HTML и автоматически выполняются при загрузке страницы. Без JavaScript HTML тоже теряет часть своих функций: нельзя добавлять анимации, создавать интерактивные элементы, добавлять поиск по странице.
Как выучить HTML
Предположим, вы хотите стать верстальщиком сайтов, Frontend-разработчиком, проектировщиком пользовательских интерфейсов или PHP-программистом. А может занимаетесь маркетингом, пишете тексты и часто публикуете контент. В любом из этих случаев вам необходимо знание HTML.
Поначалу задача освоить его кажется очень сложной. Неясно, что учить и в каком порядке, где писать год и как проверить себя без преподавателя. Однако в сети достаточно подробных справочников и учебников. Вдобавок некоторые из них снабжены тестовыми заданиями по каждой теме и позволяют в любой момент проверить знания.
Для написания кода достаточно обычного блокнота. А запустить его можно в любом браузере, например, Chrome, Opera или Firefox. Если этого недостаточно, есть редакторы с расширенным функционалом: Notepad++, Sublime, Atom. Или бесплатные «песочницы», вроде Codepen. В них можно возиться с HTML и видеть результат в том же окне.
Для тех, кому проще воспринимать аудиовизуальную информацию, можем посоветовать плейлисты на YouTube и бесплатные курсы. Например, «Основы WEB UI разработки 2022» от Prometheus. Или «Основы веб-разработки» от Educational Era. Оба курса рассчитаны на новичков без опыта работы и даже базовых знаний.
Что такое frontend-разработка
Фронтенд-разработка отвечает за создание внешней, или клиентской стороны веб-сайтов. Другими словами, фронтенд – это всё, что ваш браузер может читать, выводить на экран и запускать . В ее основе лежат «три кита» – HTML, CSS и JavaScript. HTML подсказывает сайту, что показывать, CSS определяет как это будет выглядеть, а JS помогает отследить действия пользователя и прописать реакцию на них.
Создание сайта включает в себя несколько этапов: создание прототипа, разработка макета дизайна, верстка, программирование функциональной части, наполнение контентом и тестирование. Как правило, эти задачи разделены между несколькими специалистами. Но в небольших компаниях программисты могут их совмещать.
Дизайнеры проектируют интерфейсы, создают визуальные решения. Верстальщики создают по макетам веб-страницы с помощью HTML и CSS. Фронтенд-разработчики не только верстают, но и программируют веб-страницы или создают веб-приложения. Помимо HTML и CSS, они должны владеть JavaScript. Fullstack-разработчики занимаются фронт- и бэкендом одновременно. Кроме JavaScript они работают с PHP, Python, Java и другими языками программирования.
Почему начинать нужно с frontend разработки? Во-первых, если у вас нет специального образования, то вам будет намного проще понять frontend, потому что это про визуал и про браузер. То есть свои ошибки вы сможете наглядно видеть в браузере. А во-вторых, потому что JavaScript традиционно занимает одно из первых мест в рейтинге востребованности языков программирования.
Как стать frontend-разработчиком
Самостоятельно изучив HTML и CSS, можно начинать применять знания на практике, конвертируя макеты сайтов в код HTML. На рынке труда такие специалисты называются верстальщиками. Их навыков может вполне хватать и для разработки простых сайтов, например landing page.
Дизайнер-верстальщик может совмещать верстку с проектированием интерфейсов и созданием визуальных решений. По данным work.ua, средняя зарплата верстальщика в Украине составляет от 15 до 23 тыс. грн.
Фронтенд-разработчик не только верстает, но и программирует веб-страницы или создает полноценные фронтенд-приложения. В его обязанности входит создание HTML-страниц на основе макетов, написание и привязка скриптов, оптимизация производительности и совместимости сайта, тестирование и сборка проекта.
Junior frontend-разработчик должен понимать принцип работы Веб, знать основы HTML и CSS, иметь опыт программирования на JavaScript, практические навыки работы с фреймворками, jQuery, React и GIT. Чтобы получить первую работу, новичку нужно обратиться в компанию веб-разработки. Там, конечно, захотят оценить не только теоретические знания, но и практические навыки претендента. Поэтому важно заранее подготовить портфолио с работами.
Frontend-разработчики в Украине зарабатывают от 30 до 45 тысяч гривен. Растет и количество вакансий, связанных с этой профессией. Отсюда можно заключить, что изучение HTML – это реальная возможность получить перспективную IT-профессию.
Отличия HTML и HTML5
Долгожданная пятая версия HTML увидела свет в 2014 году, через 15 лет после HTML4. А ее появлению предшествовала драматическая история, достойная детективного сериала. Дело в том, что в конце 90-х годов консорциум W3C счел язык HTML неспособным на дальнейшее развитие. Свои надежды там возлагали на вероятного наследника HTML – язык XHTML.
В 1998 году W3C и вовсе прекратил поддержку HTML. Но нововведения не всем пришлись по вкусу. С одной стороны, более строгие стандарты XHTML упрощали обработку страниц автоматическими программами. С другой – заставляли разработчиков изменить подход к веб-разработке, требовали обновления уже существующих страниц и не добавляли новой функциональности.
Всё это привело к тому, что группа программистов из Apple, Mozilla Foundation и Opera Software создала сообщество WHATWG, призванное продолжить разработку стандартов HTML. Члены сообщества сфокусировались на том, чего языку разметки не хватает для воплощения идей веб-разработчиков. В частности на улучшении поддержки веб-приложений. После длительной паузы W3C всё же отказалась от работы над XHTML и примкнула к WHATWG для совместной разработки HTML5, которая подарила нам множество новых возможностей.
Поддержка аудио и видео – появилась возможность вставлять медиафайлы прямо в веб-страницу без использования Adobe Flash и Microsoft Silverlight. Для этого используют новые медиа элементы <audio>, <video>, <source>. При этом атрибут controls позволяет отображать элементы управления (запуск, прокрутка, регулятор громкости).
Семантическая разметка – в HTML5 появились новые элементы для более логичного структурирования страницы. Так элемент <header>, как ясно из названия, содержит «шапку» с вводными и навигационными элементами. Элемент <nav> создает блок навигации по сайту. Элемент <aside> определяет дополнительный блок сбоку от основного. А элемент <footer> задает «подвал» сайта с контактной и правовой информацией.
Рисование на странице – появившийся в HTML5 тег <canvas> можно использовать для рисования графики с помощью сценариев.
Поддержка локального хранилища – теперь данные на стороне клиента можно хранить не только в кэше браузера, но и в базе данных SQL. Это улучшает безопасность и позволяет не беспокоиться, что пользователь сотрет файлы cookie.
Преимущества и недостатки HTML
Преимущества
- Широкое распространение языка;
- Совместимость файлов с большинством браузеров;
- HTML бесплатен и находится в открытом доступе;
- Поддержка стандарта консорциумом W3C;
- Простая интеграция с базовыми языками вроде PHP или Node.js.
Недостатки
- По большей части не годится для создания динамических страниц. Для этого может понадобиться JavaScript или PHP.
- Некоторые браузеры медленно осваивают поддержку новых функций.
- Иногда бывает сложно предугадать реакцию старых браузеров (Internet Explorer версии 8 и ниже) на новые теги.
Перспективы развития
По данным We Are Social, в январе 2020 года в мире было 4,54 миллиарда пользователей интернета. В июле 2022 их стало уже 5,03 миллиарда. Это 63% населения от всего населения планеты. Всего за два года армия потребителей контента выросла на полмиллиарда человек.
Эти данные позволяют предположить, что интернет будет расти и в обозримом будущем. А значит, у HTML прибавится работы. Очевидно также, что возросшие требования веба потребуют от разработчиков новых решений. Но какими они будут, сегодня знают разве что в консорциуме всемирной паутины.
Язык HTML: что это такое и как он работает
Рассказываем, что такое HTML, для чего он нужен и стоит ли называть его языком программирования.
Иллюстрация: Оля Ежак для Skillbox Media
Консультант: Кристина Трапезникова
Главный дизайнер компании VVDEV. Считает, что хорошие дизайнеры, как и фронтендеры, должны знать HTML.
HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки текста. Он нужен, чтобы размещать на веб-странице элементы: текст, картинки, таблицы и видео.
Когда вы заходите на сайт, браузер подгружает HTML-файл с информацией о структуре и контенте веб-страницы. HTML как бы выстраивает визуальный фундамент сайта, но не «запускает» сайт самостоятельно. Он всего лишь указывает, где располагаются элементы, какой у них будет базовый дизайн, откуда брать стили для элементов и скрипты (обычно их пишут на JavaScript).
Вот, например, как выглядит сайт Skillbox Media на одном HTML:
Из чего состоит HTML-код
HTML состоит из тегов — команд, которые указывают браузеру, как отображать помещённый в них текст. Это и есть элементы веб-страницы. У каждого тега есть имя, которое заключается в угловые скобки < и >.
Например, в тег <p> обычно помещают текст:
Теги бывают парные и непарные. Парные состоят из двух тегов — открывающего и закрывающего, а непарные — из одного. При этом непарный тег тоже можно закрывать, но это необязательно.
Например, тег <img>, который позволяет разместить картинку на сайте, — непарный:
У каждого тега есть атрибуты. С их помощью можно передавать элементам веб-страницы дополнительные данные: размеры, уникальный id элемента, ссылки на изображения и так далее.
Элемент <img> включает в себя два основных атрибута — src и alt. Первый добавляет ссылку на файл, а второй — подпись к картинке, которая покажется, если файл не загрузится:
Тег <p> — парный, он всегда должен закрываться тегом </p>. Парные теги применяются для разметки блоков — элементов, в которые можно вкладывать другие элементы (в том числе блоки). К ним относятся:
- контейнеры (div);
- абзацы;
- заголовки;
- списки;
- таблицы.
Так выглядит код веб-страницы с тегами <p> и <img>:
А вот как его отображает браузер:
Теперь добавим ещё один тег — <center>. Он центрирует элементы на экране. Затем положим в него теги <p> и <img>:
У нас получился такой результат:
Как HTML работает на сайтах
Давайте разберём, как браузеры отрисовывают веб-страницы с помощью HTML-файлов.
Принцип работы разметки следующий:
- Вы вводите в адресную строку адрес сайта или страницы.
- Браузер отправляет запрос по этому адресу и получает файл в формате HTML.
- Код из полученного файла последовательно преобразуется в визуальные объекты.
При этом каждый браузер руководствуется своими правилам отображения элементов. Раньше разработчикам приходилось создавать отдельные версии сайтов для Internet Explorer, Firefox, Opera и других браузеров. Стоило только не учесть какую-то особенность браузера, и сайт падал на глазах у разочарованных пользователей. К счастью, организация W3C разработала веб-стандарты — чтобы сайты отображались более или менее одинаково во всех браузерах.
Но и от обыкновенных ошибок никто не застрахован. Если разработчик по невнимательности не закроет тег или добавит содержимое куда-нибудь не туда, на странице вылезет что-то неожиданное. Допустим, мы написали таблицу:
<table> — это таблица, <tr> — это ряд, а <th> и <td> — ячейки. Если бы мы всё сделали правильно, в браузере бы отобразилась обычная таблица. Но обратите внимание, что в четвёртом ряду цена галстука находится не в ячейке, а прямо в ряду. Вот как это будет выглядеть:
Что можно и нельзя сделать на HTML
HTML — это каркас сайта. По нему браузер отрисовывает веб-страницу, наводит «красоту» с помощью CSS и добавляет логику через JavaScript. Например, в HTML-файле можно прописать:
- гиперссылки;
- таблицы;
- изображения;
- блоки;
- абзацы;
- формы;
- заголовки.
Можно даже задавать простой дизайн напрямую в HTML — например, устанавливать цвет и шрифт текста или фоновый цвет блока. Однако профессионалы не рекомендуют так делать — лучше указывать стили в файле CSS. Там-то ваша фантазия ничем не будет ограничена: задавайте любые отступы, размещайте элементы нестандартными способами, играйтесь с прозрачностью, тенями и анимацией. Всё что угодно — но в CSS. Договорились? 🙂
Действия пользователей пока обрабатывают в основном с помощью JavaScript и его фреймворков. Но некоторые функции постепенно приходят в HTML. Например, перетаскивание объектов, или Drag & Drop, раньше было доступно только в JavaScript.
HTML — язык программирования?
Нет. На языках программирования пишут… программы и веб-приложения 🙂 Для этого в них есть условия, функции, переменные, операторы, классы и много что ещё. В HTML же есть только теги, которые помогают браузеру правильно отобразить содержимое сайта.
Во многих источниках HTML всё-таки называют языком программирования. Не верьте! HTML — это всего лишь формат текста. По сути, HTML-файл ничем не отличается от «вордовского» файла.
Сколько времени нужно, чтобы освоить HTML
Основы, которых хватит на создание примитивных страниц, можно изучить за час. То есть быстрее, чем была написана эта статья. Но мастерство приходит с практикой. Мало просто создать каркас — нужно убедиться, что он везде правильно отображается.
Специалисты, которые могут написать не кривой адаптивный сайт, ценятся у работодателей. Но быть просто HTML-верстальщиком невыгодно. Сегодня это довольно редкая и низкооплачиваемая профессия. Лучше сразу изучать фронтенд- или бэкенд-разработку, а HTML обязательно пригодится в процессе.