HTML — что это такое простыми словами: история, примеры

В этой статье мы рассмотрим вопрос, что такое html, рассмотрим историю его развития. Поговорим о том, как создавать сайт и вообще сложно ли это. Итак, начнем

Оглавление
1. HTML код — что это такое простыми словами
2. Пример и структура html кода
3. Что такое HTML тег
4. История развития HTML

1. HTML код — что это такое простыми словами

HTML (англ. "hyper text markup language" — язык гипертекстовой разметки) — это специальный язык разметки, который применяется при создании сайтов в интернете.

Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта — это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:

Язык разметки html получил широкую популярность. На данный момент — это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый "движок" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).

Файлы, созданные на html, имеют расширения .html или .htm. Чтобы создать файл html, достаточно открыть блокнот и сохранить его с расширением .html. Как это сделать можете посмотреть на странице: пример создания простой html страницы

Примечание

Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение .html. К примеру есть страницы /catalog/list (вообще без расширения). Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.

2. Пример и структура html кода

Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: заголовок и тело страницы.

<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
...
	Заголовочные теги (подключение стилей, скриптов)
...
</head>
<body>
...
<!-- Начало тела страницы. 
Это комментарий. Он виден только в коде, а на странице он отсутствует -->
<div class="shapka">
	Шапка сайта
</div>
...
<div class="page">
 <div class="sidebar_left">
	Левая колонка
 </div>
...
 <div class="content">
	... Основная часть сайта...
 </div>
...
 <div class="sidebar_right">
	Правая колонка
 </div>
...
 <div class="footer">
	Низ страницы
 </div>
...
</div>
</body>
</html>

Этот код можно редактировать в любом текстовом редакторе. Чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). Но лучше использовать более продвинутые редакторы для работы с HTML-разметкой.

Разметка состоит из html тегов (иногда пишут "тэг").

3. Что такое HTML тег

HTML тег — это один из элементов верстки html, который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.

Например, <teg>. Почти каждый тег парный и требует закрывающего тега </teg>. Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной (см. валидация сайта). Если это тег относится к тем, что держат "каркас" сайта, то сайт может "поплыть" (боковая колонка сместится вниз и т.п.).

Запрещено закрывать теги не по порядку их открытия. Например

<!DOCTYPE html>
<html>
<body>
<!-- Неправильно: -->
	<div>
		<table>
	</div>
		</table>
	
<!-- Правильно: -->
	<div>
		<table>
		</table>
	</div>
	
</body>
</html>

Более подробно про создание html страницы читайте в статье:

Знакомство с 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.

← Перейти в оглавление seo словаря

HTML (язык разметки сайтов)

1. HTML код — что это такое простыми словами

2. Пример и структура html кода

3. Что такое HTML тег

4. История развития HTML