Знать, что такое HTML-код, важно для всех программистов. Для чего нужен HTML? Это фундамент веб-сайта. С его помощью браузер понимает, как должны отображаться заголовки, изображения, таблицы. Если хотите сделать карьеру в веб-разработке, начинайте с базового навыка — учитесь писать HTML-код.
Что такое HTML
Язык гипертекстовой разметки сайта, или HTML (HyperText Markup Language), — код, помогающий структурировать содержание каждой веб-страницы. С помощью HTML разработчик собирает «скелет». После чего работает с CSS-кодом для стилизации страницы — покрывает «кожей». В финале запускает «кровеносную, пищеварительную и дыхательную системы», программируя на JavaScript.
Что такое язык HTML:
● HyperText (гипертекст) — текст, соединяющий связанные между собой элементы.
● Markup (разметка) — руководство по стилю набора текста.
● Language (язык) — код, который компьютерная система понимает и использует для интерпретации команд.
HTML-код гугл-документа, в котором написан этот материал
HTML-документ создаётся в обычном текстовом редакторе — чаще всего в «Блокноте». Есть и специализированные приложения вроде Notepad++ или Visual Studio Code — с подсветкой кода.
Материал по теме:
Вёрстка сайта: что нужно знать, чтобы её освоить
Зачем нужен HTML
С помощью языка разметки HTML браузер делает запрос по адресу, который ввёл пользователь, и получает файл в формате «.html». Браузер распознаёт код, выбирает знакомые для себя сигналы: понимает, что написать словами, где поставить заголовок и какой именно. Таким образом код из файла преобразуется в необходимые визуальные объекты.
Если вы сейчас за ноутбуком или компьютером, посмотрите, как выглядит HTML этой конкретной страницы блога.
Для этого в Safari в настройках необходимо поставить галочку напротив пункта «Показывать меню „Разработка“ в строке меню» в «Дополнениях». После нажать в браузере «Разработка» и «Показать ресурсы страницы».
Для Google Chrome щёлкните правой кнопкой мыши в любом месте и выберите “View Page Source”. В зависимости от браузера команды могут различаться.
HTML-код страницы курса «Веб-разработчик» Яндекс Практикума
Возможности HTML
Язык HTML помогает структурировать информацию. Это могут быть команды добавить картинку, разбить текст на абзацы, добавить заголовки и подзаголовки, создать список, вставить таблицу, нарисовать какой-либо элемент. Вёрстка страницы будет выглядеть так, как её закодирует разработчик.
Что представляет собой HTML: набор команд, который после обработки превращается в визуальное представление. Команда — это тег, состоящий из имени, расположенного между символами «меньше» и «больше» (<h1>). Есть парные теги. Правила вложенности у каждого свои. Например, вот так выглядит строка в списке:
<ul>
<li>Название элемента в списке</li>
</ul>
Из-за незакрытого или неправильно закрытого тега вёрстка может ломаться.
Простая HTML-страница состоит из трёх тегов: <html>, <head> и <body>. В документе <head> и <body> используют только раз.
<html> идёт в документе сразу после «доктайпа» — обозначения типа документа. По нему браузер определяет версию HTML и понимает, как правильно отобразить страницу.
<head> хранит важную служебную информацию — заголовок страницы и кодировку.
<body> хранит содержимое страницы. Именно так код отображается в браузере. Тексты и картинки добавляются внутрь этого тега.
Рассмотрим некоторые из других наиболее часто используемых тегов HTML
<hеader> определяет вводную часть веб-страницы. Содержит логотип, элементы навигации, панель поиска.
<nаv> управляет элементами навигации: контакты, информация, часто задаваемые вопросы и другое.
<main> содержит основные разделы HTML-документа, кроме <hеader> и <foоter>. В идеале во всём HTML-документе используется только один раз.
<іmg> помогает добавить картинку, но сам по себе он не имеет смысла. Нам потребуется прописать внутри адрес, ведущий к картинке. Это делается с помощью атрибута src:
<іmg src="адрес">
<artіcle> структурирует информацию, работая с комбинацией текста, изображений, видео.
<sectіon> определяет конкретный раздел веб-страницы. Это может быть раздел «Витрина», «О нас», «Контакты» или другие.
Код простой страницы выглядит так:
<html>
<head>
<title>
Заголовок страницы
</title>
</head>
<body>
<hеader>
"logo">Заголовок</h1>"https://avatars.mds.yandex.net/get-practicum/5750069/2a0000017bf1fd9c30b156ce1fd83a5897d5/orig">
<main>
"about me">
<аrticle>
Текст
</аrticle>
</sеction>
<nаv>
<ul>
<li>Заголовок 1</li>
<li>Заголовок 2</li>
<li>Заголовок 3</li>
</ul>
<nаv>
</heаder>
</bоdy>
</html>
Теги передают фактическое значение — элементы не размещаются автоматически там, где они должны быть. Это делается уже с помощью CSS.
Преимущества и недостатки HTML
Чтобы специалист понимал, потребуется ли ему HTML в работе и готов ли он его изучать, нужно взвесить все плюсы и минусы этого языка.
Является ли HTML языком программирования
Возможности HTML сильно ограниченны. Далеко не все эксперты считают его языком программирования. По сути, язык гипертекста HTML — это код, который помогает браузеру корректно отображать содержимое сайта.
HTML нужно знать тем, кто планирует заниматься разработкой. Изучить основы можно за пару часов. Одна из лучших практик — менять код на исходной странице и смотреть, что получилось. Только после того, как попрактиковались в создании простых страниц и изучили основы языка HTML, можно переходить к сложным языкам программирования.
На курсе по профессиональной вёрстке можно освоить базовые знания по HTML и CSS. Уже на первых уроках вы познакомитесь с основами вёрстки, будете создавать и менять код HTML на специальном тренажёре.
Дайджест блога: ежемесячная подборка лучших статей от редакции
