logo
logo

Основы HTML (для начинающих)

Основы HTML (для начинающих) image
Обновлено: Июнь 14, 2022
#html
Автор: Натали

​HTML (Hypertext Markup Language) - это язык гипертекстовой разметки. Он передаёт браузеру информацию о том, как необходимо отобразить тот или иной элемент на веб-странице.

Знание HTML является обязательным не только для веб-разработчиков и дизайнеров, но также всегда может пригодиться для смежных областей - например, в интернет-маркетинге и даже в no-code разработке.

Основы HTML

HTML представляет собой текстовый документ с расширением .html. Его можно создать как в специализированных редакторах (WebStorm, Visual Studio Code, Notepad++ и т.д.), так и в самом простом текстовом редакторе ”Блокнот”.

В HTML нет переменных, функций, операторов и т.д., поэтому его нельзя отнести к полноценным языкам программирования.

HTML состоит из 2х компонентов:

  • дерева элементов;
  • содержания.

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

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

Между <> и </> находится содержание элемента страницы. Это может быть картинка, текст, заголовок и т.д.

Например:

<p>Какое-то содержание</p>

В данном примере теги <p> и </p> отвечают за разметку абзацев (от англ. “paragraph”). Таким образом, браузер распознает, что здесь должен быть параграф с нашим текстом, указанным между открывающим и закрывающим тегами.

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

<input type="button" value="Узнать больше"/>

создаст кнопку с текстом “Узнать больше” внутри.

Как говорилось выше, теги могут быть вписаны один в другой. Например:

 <p><em>Какой-то текст</em></p>

Здесь тег <p> даёт команду расположить текст отдельным абзацем, а тег <em> - отобразить текст в данном абзаце курсивным начертанием.

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

 <p><em>Ваш текст</p></em>.

Виды HTML-элементов

HTML-элементы бывают двух видов:

  • блочные;
  • строчные.

Блочные элементы

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

<h1> - используется для главных заголовков страниц;

<h2> по <h6> - подзаголовки;

<p> - текстовый абзац;

<ul> - маркированный список;

<ol> - нумерованный список;

<blockquote> - выделяет цитаты внутри документа;

<div> - элемент разделения содержимого (используется для его группировки).

Строчные элементы

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

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

<a> - создаёт ссылки;
<i> - делает шрифт курсивным;
<input> - создаёт различные элементы интерфейса;
<span> - аналогично тегу <div>, используется для группировки элементов;
<strong> - выделяет текст жирным начертанием;
<em> - создаёт акцентированный текст (как правило, отображается в виде курсива).

В отличие от блочных, в строчных элементах их ширина определяется объемом контента. Также эти элементы не начинаются с новой строки.

Строчные элементы допускается размещать внутри как блочных, так и других строчных элементов. А вот блочные элементы внутри строчных размещать запрещено.

HTML-атрибуты

HTML-теги могут содержать атрибуты - они состоят из имени и значения, и находятся в открывающем теге в таком формате:

name="value" - id="button" 

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

Атрибуты задают свойства и устанавливают поведение соответствующего тега. Они бывают глобальными - в этом случае они используются любым из элементов, например: id (определяет уникальное имя элемента), class (стилизация элементов посредством CSS).

Каждому тегу может соответствовать несколько значений class, но лишь один уникальный id. Например:

 <div class=”content”> Какое-то содержимое </div>
<p id=”paragraph”> Какое-то содержимое абзаца </p>

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

Документ HTML состоит из двух разделов:

  • заголовок (<head>);

  • содержимое (<body>).

Оба раздела обёрнуты в корневой тег <html>. Корневой элемент <html> образует дерево документа, или по-другому - DOM (document object model, с англ. - объектная модель документа). DOM связывает страницу с языками описания сценариев или программирования.

Правила, которым придерживается HTML, находятся в файле описания типа документа (Document Type Definition, или DTD). За правильное отображение веб-страницы отвечает элемент <!DOCTYPE>. Он определяет версию HTML (например, для привязки к HTML5 нужно указать: <!DOCTYPE html>) и ассоциирует страницу с нужным DTD-файлом.

Чтобы ассоциативно представить правильное расположение тегов, можно представить тело человека:

HTML - оболочка, в которой находятся все элементы.

<html>
*
*
*
</html>

Head - голова . В теге <head> содержатся данные о странице: описание, ключевые слова для поиска, заголовок, подключаемые внешние файлы. Эта информация не видна посетителю страницы. Но эти данные передают браузеру информацию о том, как нужно обрабатывать страницу.

Body - тело. В <body> располагается весь отображаемый контент документа.

Структура HTML-документа

Теперь более подробно. Как видим из рисунка выше, в теге <head> мы можем указывать различные элементы, содержащие данные о нашей HTML-странице, например <title>, <link>, <meta>, <style> и др.

Пример:

<title> Заголовок документа </title>

Тег <title> содержит в себе текст заголовка. Он может состоять только из текста и игнорирует любые иные элементы. Рекомендуется, чтобы заголовок был длиной не более 60 символов, иначе часть текста может потеряться в сниппете поисковой выдачи.

<style> Стили CSS </style> - тег <style> определяет стили веб-страницы. В HTML-документе они задаются с использованием CSS. Тегов <style> может быть несколько на странице.

Пример:

<style>
h1.h2{
font-family:sans-serif;
color:gray;}
</style>

Этот вариант хоть и рабочий, но использовать его нежелательно, т.к. он уже устарел.

Наиболее оптимальным спобобом установки стилей является их запись в файл с расширением .css (например, style.css). И затем этот файл можно подключить к HTML-странице с помощью элемента <link/>:

     <link rel="stylesheet" href="/style.CSS">

Данный способ подключения стилей является актуальным на сегодняшний день.

<meta> - этот тег содержит метаданные (дополнительные данные) о веб-странице. Пользователь не видит их на странице, но они выполняют множество важных функций: сообщают поисковым системам информацию о странице, устанавливают срок действия веб-страницы, предотвращают кэширование браузером страницы и т.д. Информация в теге <meta> передаётся с использованием атрибутов.

Резюмируя вышесказанное, можем написать несложную веб-страницу:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html">
<title>Заголовок нашей страницы</title>
<link rel="stylesheet" href="/style.CSS">
</head>
<body>
<div class=container>
<p class="content">Возможно, это ваша первая HTML-страница</p>
</div>
</body>
</html>

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

Пример html-страницы

Как видите, в данном примере стили у нас не подключились. Как мы уже говорили, для них нужно создать файл с расширением .css (style.css или с любым другим именем) и задать в нём стили для разных элементов.

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