Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>В статье рассказываем, что такое HTML, какие у него особенности и как выглядит код на этом языке, а также разбираемся, почему HTML - это не язык программирования.</strong></p>

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

3 <p>Текстовый файл с основой веб-страницы пишут на HTML (HyperText Markup Language) - это язык гипертекстовой разметки. Разберемся, что значит этот термин подробнее.</p>

4 <p>Гипертекст - это система текстов, в которой разработчики прописывают элементы сайта и связывают их между собой ссылками. Благодаря гипертексту мы можем переходить по ссылкам на сайте, открывать видео и картинки. А гипертекстовая разметка - это правила, по которым разработчики создают текст веб-страницы.</p>

5 <h2>Содержание</h2>

6 <ul><li><a>Зачем нужен HTML</a></li>

7 <li><a>Возможности HTML</a></li>

8 <li><a>Как выглядит код на HTML</a></li>

9 <li><a>Что такое теги HTML</a></li>

10 <li><a>Преимущества и недостатки HTML</a></li>

11 <li><a>Является ли HTML языком программирования</a></li>

12 </ul><h2>Зачем нужен HTML</h2>

13 <blockquote><p>Основная цель HTML - структурировать и оформлять контент на сайте.</p>

14 </blockquote><p>HTML создает иерархическую структуру веб-страницы, используя заголовки, абзацы, списки и таблицы. Такая структура помогает пользователю легче ориентироваться на сайте.</p>

15 <p>Также с помощью HTML отображается текст, изображения, таблицы, видео и аудио. А еще благодаря коду на HTML мы можем переходить по ссылкам в интернете с одного сайта на другой.</p>

16 <h2>Возможности HTML</h2>

17 <p>С помощью HTML можно:</p>

18 <ul><li><strong>Делать текстовую разметку</strong>- форматировать текст, выделять фрагменты, создавать списки, добавлять сноски.</li>

19 <li><strong>Встраивать медиа</strong>. HTML позволяет размещать на сайте изображения, аудио, видео, карты.</li>

20 <li><strong>Создавать ссылки и навигацию</strong>. Гиперссылки и списки меню помогают быстрее найти информацию и сориентироваться на странице.</li>

21 <li><strong>Создавать таблицы</strong>. Нередко информацию удобно представить в табличном виде. HTML умеет работать с таблицами.</li>

22 <li><strong>Создавать формы</strong>. Формы нужны для регистрации посетителей сайта по телефону и электронной почте, оформления заказов, опросов и сбора обратной связи - отзывов, комментариев, предложений.</li>

23 </ul><p>В HTML можно даже создавать простой дизайн: например, устанавливать цвет и шрифт текста или фоновый цвет блока. Но более сложный дизайн страницы разработчики делают с помощью CSS - языка стилей, который создали специально для работы в связке с HTML.</p>

24 <p>Возможностей HTML не хватает, чтобы "оживлять" сайты, делать их функциональными и интерактивными. Здесь приходит на помощь язык программирования JavaScript, благодаря которому мы можем взаимодействовать с формами на сайте, видеть динамические элементы и анимации.</p>

25 <h2>Как выглядит код на HTML</h2>

26 <p>Увидеть HTML-код очень просто. Для этого нажмите клавишу F12 на любом сайте или правую кнопку мыши и выберите "Показать исходный код" или "Просмотр кода страницы". В разных браузерах названия этой команды может отличаться.</p>

27 <p><em>Так выглядит HTML-код главной страницы блога Хекслета</em></p>

28 <p>HTML-код пишут и сохраняют в документе - текстовом файле с расширением .html или .htm. HTML-файл можно написать в любом текстовом редакторе, даже в стандартном Блокноте Windows. Чтобы просматривать HTML-файлы, интернет не нужен.</p>

29 <p>Если создать несколько HTML-файлов в одной папке и поставить внутри гиперссылки, то можно переходить по этим ссылкам из одного документа в другой.</p>

30 <h2>Что такое теги HTML</h2>

31 <p>Теги HTML - это команды, которые говорят браузеру, что и в каком порядке показывать на экране. У каждого тега есть имя, которое расположено в угловых скобках.</p>

32 <p>Самая простая HTML-страница состоит из трех тегов: <html>, <head> и <body>.</p>

33 <p>Теги <head> и <body> используют на странице только один раз.</p>

34 <p>HTML-файл всегда начинается с тега <!DOCTYPE html>, по которому браузер понимает, как правильно отобразить страницу.</p>

35 <p>В теге <head> <head/> хранится служебная информация - заголовок и кодировка страницы.</p>

36 <p>Внутри тега <body> <body/> помещается содержимое страницы, которое отображается в браузере - текст, изображения, видео.</p>

37 <p>В теге <title> <title/> - заголовок веб-страницы. Его браузер отобразит как название и сохранит в описании, если сохранить страницу в закладки.</p>

38 <p>Тег <img> помещает изображение в нужное место страницы.</p>

39 <p>Есть парные и непарные HTML-теги, первых - большинство. Парный тег состоит из открывающего и закрывающего тега. Закрывающий тег содержит дополнительный элемент / - эта косая черта называется "слэш".</p>

40 <p>Например, тег</p>

41 <p>, внутри которого размещается текст, парный:</p>

42 <p>Тег <img>, который позволяет разместить картинку на сайте, - непарный:</p>

43 <p>У каждого тега есть атрибуты. Они расширяют возможности тегов: задают стили, добавляют ссылки, управляют мультимедиа.</p>

44 <p>В примере выше показаны два основных атрибута непарного тега <img> - это src и alt. Атрибут src добавляет ссылку на файл изображения, атрибут alt - подпись к картинке, которую покажет браузер, если файл изображения не загрузится.</p>

45 <p>Важно помнить про закрытые теги. Если тег не закрыт или закрыт неправильно, то верстка страницы может сломаться и сайт будет отображаться неверно.</p>

46 <p>Для логичной последовательной подачи информации используют заголовки, абзацы и списки.</p>

47 <h3>Заголовки</h3>

48 <p>Заголовки в HTML - это элементы, которые используются для создания заголовков и подзаголовков на веб-странице. Они определяют важность и иерархию информации на странице.</p>

49 <p>В HTML применяют шесть тегов заголовков: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Тег <h1> обычно используется для главного заголовка страницы, а теги <h2>-<h6> используются для подзаголовков и других заголовков на странице.</p>

50 <p>Заголовки конкретной страницы помогают поисковым системам вроде Google или "Яндекса" определить ее содержание. Для поисковиков каждый следующий тег заголовка менее важен, чем предыдущий. То есть у заголовка <h3> меньшая важность, чем у заголовка <h2>.</p>

51 <h3>Абзац</h3>

52 <p>Абзац - это элемент, который используется для создания текстовых блоков на странице. Каждый абзац текста создается парным тегом <p> <p/>.</p>

53 <p>Текст, разбитый на абзацы читать и воспринимать легче, чем сплошное "полотно". Абзац делит содержимое на логически связанные блоки.</p>

54 <h3>Списки</h3>

55 <p>Списки упорядочивают информацию на странице и улучшают ее восприятие. Обычно используются нумерованные и ненумерованные списки.</p>

56 <p>Ненумерованные или маркированные списки ("буллеты") добавляют на страницу тегом <ul></ul>. Такие списки применяют, когда последовательность элементов не важна.</p>

57 <p>Для создания нумерованного списка используется тег <ol><ol/>.</p>

58 <p>Отдельный элемент в списке любого типа вводится тегом <li></li>. Этот тег нужно закрывать после каждого пункта.</p>

59 <h2>Преимущества и недостатки HTML</h2>

60 <h3>Плюсы HTML</h3>

61 <ul><li><strong>Простота и доступность</strong>. HTML - это простой язык разметки, который легко изучить и использовать. Код на нем можно писать в любом текстовом редакторе.</li>

62 <li><strong>Адаптивный дизайн</strong>. Теги в современных версиях HTML позволяют делать разные версии одного сайта для удобного просмотра на любом устройстве: от смартфона и планшета до большого монитора.</li>

63 <li><strong>Гибкость</strong>. На HTML можно создавать простые сайты без использования интерактивных изменяющихся элементов. Например, лендинг, сайт-визитку компании, портфолио, каталоги, справочники, инструкции, небольшие блоги.</li>

64 </ul><h3>Минусы HTML</h3>

65 <ul><li><strong>Ограниченные возможности</strong>. HTML - это язык разметки, а не язык программирования. Делать современные сайты только на HTML не получится. HTML, например, не может создавать динамические веб-страницы, которые изменяются в реальном времени без перезагрузки страницы. Для создания чего-то более сложного не обойтись без CSS и JavaScript.</li>

66 <li><strong>Неполная совместимость последних версий HTML и браузеров</strong>. Некоторые браузеры не сразу встраивают поддержку новых функций и тегов, старые версии (Internet Explorer версии 8 и более ранней) могут неадекватно интерпретировать новые теги.</li>

67 </ul><h2>Является ли HTML языком программирования</h2>

68 <p>Нет. Языки программирования необходимы для создания сложных веб-сайтов, которые выполняют задачи и взаимодействуют с пользователями.</p>

69 <p>Чтобы обрабатывать данные, введенные в формы, обмениваться этой информацией с базами данных, хранящимися на сервере, создавать анимацию используют языки программирования JavaScript, PHP и Python.</p>

70 <p>HTML не обрабатывает данные, а только их отображает. И также HTML не может выполнять вычисления, поэтому назвать его языком программирования будет неправильно.</p>

71 <p>Освоить HTML можно на курсах Хекслета - пройдите их, чтобы сделать свой первый шаг в профессии фронтенд-разработчика.</p>