Что такое HTML (и почему это важно)

HTML — осно­ва все­го, что про­ис­хо­дит внут­ри ваше­го бра­у­зе­ра. Если вы зна­е­те HTML, то може­те сами созда­вать сай­ты, кра­си­во оформ­лять ста­тьи и доку­мен­ты в интер­не­те и даже устро­ить­ся на рабо­ту веб-разработчиком. Давай­те копнём.

Как это работает

HTML — это язык гипер­тек­сто­вой раз­мет­ки доку­мен­тов (HyperText Markup Language). По-русски: это набор команд, кото­рые гово­рят нашим бра­у­зе­рам, как рисо­вать сай­ты. Например:

<h1>Это заголовок</h1>
<p>Это абзац текста <a href="...">с гиперссылкой</a>.</p>
<ul>
  <li>Это элемент ненумерованного списка</li>
  <li>И ещё один</li>
</ul>

Сло­ва внут­ри угло­вых ско­бок назы­ва­ют­ся тега­ми: <h1>,<p> и т. д. Теги гово­рят бра­у­зе­ру, как имен­но нуж­но отоб­ра­зить тот или иной текст, где раз­ме­стить кар­тин­ку или какую сде­лать кнопку.

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

Это заголовок

Это абзац тек­ста с гиперс­сыл­кой.

  • Это эле­мент нену­ме­ро­ван­но­го списка
  • И ещё один


В мире есть мно­го подоб­ных язы­ков: тек­сто­вые редак­то­ры Microsoft Word и Apple Pages тоже исполь­зу­ют соб­ствен­ные язы­ки раз­мет­ки, что­бы сохра­нить инфор­ма­цию об оформ­ле­нии доку­мен­та. Даже когда вы в них пише­те про­стой текст, эти редак­то­ры добав­ля­ют в доку­мент неви­ди­мую инфор­ма­цию о внеш­нем виде текста.

Зачем нужен HTML

HTML — глав­ный язык в интер­не­те, на кото­ром напи­са­но боль­шин­ство доку­мен­тов. Каж­дый абзац тек­ста в интер­не­те, ско­рее все­го, завёр­нут в теги <p>...</p> и каж­дая ссыл­ка, на кото­рую вы нажи­ма­ли, точ­но была завёр­ну­та в теги <a>...</a>. Коро­че: это язык, на кото­ром напи­сан весь интернет.

Если бы не было HTML, нам бы при­шлось при­ду­мать какой-то дру­гой фор­мат для обме­на доку­мен­та­ми в Сети, поэто­му в любом слу­чае мы бы полу­чи­ли тот же HTML.

— Но я не обмениваюсь документами!

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

  1. Вы наби­ра­е­те yandex.ru в адрес­ной стро­ке бра­у­зе­ра или печа­та­е­те пря­мо там свой поис­ко­вый запрос.
  2. Какие-то сер­ве­ры, при­над­ле­жа­щие Яндек­су, созда­ют для вас новый доку­мент — глав­ную стра­ни­цу yandex.ru или стра­ни­цу с резуль­та­та­ми поис­ка. Этот доку­мент отправ­ля­ет­ся на ваш компьютер.
  3. Ваш бра­у­зер полу­ча­ет этот доку­мент, он напи­сан на язы­ке HTML. Бра­у­зер чита­ет все теги и инструк­ции и пока­зы­ва­ет резуль­тат на экране в виде пик­се­лей. Вам может пока­зать­ся, что это вы при­шли в Яндекс, но на самом деле это Яндекс отпра­вил вам доку­мент с резуль­та­та­ми поиска.
  4. Вы нажи­ма­е­те на ссыл­ку в этом доку­мен­те, и ваш бра­у­зер запра­ши­ва­ет новый доку­мент с дру­го­го сер­ве­ра. В ответ вам сно­ва при­хо­дит HTML-документ.
  5. Бра­у­зер откры­ва­ет полу­чен­ный доку­мент в новой вкладке.
  6. Кажет­ся, что вы пере­шли на новый сайт, но на самом деле вы ска­ча­ли с это­го сай­та доку­мент, кото­рый выгля­дит как страница.

По-простому, в интер­не­те вы нику­да не «ходи­те». Ско­рее вы ска­чи­ва­е­те доку­мен­ты, кото­рые для вас фор­ми­ру­ют сер­ве­ры раз­ных ком­па­ний. Эти доку­мен­ты напи­са­ны на HTML.

Зачем знать HTML

Если вы зна­е­те основ­ные HTML-теги, то вы можете:

  • созда­вать свои и редак­ти­ро­вать чужие стра­ни­цы и целые сай­ты; настра­и­вать гото­вые сай­ты и шаблоны;
  • кон­тро­ли­ро­вать внеш­ний вид сво­их мате­ри­а­лов при их пуб­ли­ка­ции на раз­ных сайтах;
  • ста­щить чей-то макет или фраг­мен­ты кода и исполь­зо­вать их в сво­их сайтах;
  • обхо­дить неко­то­рые пей­во­лы и бло­ки­ров­ки досту­па к закры­то­му контенту.

Основные теги

Вот основ­ные теги, кото­рые исполь­зу­ют­ся в HTML:

<head>...</head> — слу­жеб­ная область на стра­ни­це, кото­рая не пока­зы­ва­ет­ся в бра­у­зе­ре, но вли­я­ет на стра­ни­цу в целом. <title>...</title> — нахо­дит­ся внут­ри <head>. Текст, кото­рый напи­сан внут­ри это­го тега, отоб­ра­жа­ет­ся в назва­нии вклад­ки и в заклад­ках браузера. <body>...</body> — види­мая часть стра­ни­цы. Всё, что вы види­те, про­ис­хо­дит внут­ри этих тегов. <h1>...</h1>, <h2>...</h2> и так далее — заго­лов­ки раз­но­го уровня. <p>...</p> — абзац. <a href="...">...</a> — гиперс­сыл­ка. Свой­ство «href» отве­ча­ет за адрес ссылки. <img src="..."> — кар­тин­ка. Свой­ство «src» отве­ча­ет за адрес, по кото­ро­му лежит изоб­ра­же­ние, что­бы бра­у­зер мог запро­сить её отту­да, ска­чать и пока­зать на экране. <ul><li>...</li></ul> — нену­ме­ро­ван­ный спи­сок с одним эле­мен­том внут­ри. Что­бы эле­мен­тов было боль­ше, добавь­те <li>...</li> внутрь <ul>...</ul>. <ol><li>...</li></ol> — нуме­ро­ван­ный список. <div>...</div> — уни­вер­саль­ный блок внут­ри стра­ни­цы. Его мож­но настро­ить, что­бы содер­жи­мое выгля­де­ло и рабо­та­ло как угод­но, от назой­ли­вой всплы­ваш­ки до кноп­ки подтверждения. <span>...</span> — с помо­щью это­го тега мож­но менять внеш­ний вид выбран­но­го тек­ста. Напри­мер, выде­лить его жёл­тым, как мар­ке­ром на бумаге. <table><tbody><tr><td>...</td><td>...</td></tr></tbody></table> — мини­маль­ный набор тегов, что­бы сде­лать таб­ли­цу. TR отве­ча­ет за стро­ки в таб­ли­це (table row), а TD — за ячей­ки в этой стро­ке (table division). Мы вкла­ды­ва­ем один тег в дру­гой: ячей­ки живут внут­ри строк, стро­ки — внут­ри <tbody>, и всё это живёт внут­ри тега <table>. Ещё есть <TH>, кото­рый отве­ча­ет за первую стро­ку таб­ли­цы (её назы­ва­ют голов­кой), но мы туда сей­час не полезем. 

Нужно ли это учить?

В интер­не­те пол­но инфор­ма­ции про HTML, поэто­му нет необ­хо­ди­мо­сти что-то заучи­вать спе­ци­аль­но. Но если вы буде­те регу­ляр­но что-то вер­стать в HTML, вы и сами всё выучи­те. Это как ходь­ба или езда на велосипеде.

Если поду­мать, то при­выч­ные веб-страницы в каком-то смыс­ле уми­ра­ют, и HTML мед­лен­но теря­ет свою акту­аль­ность. 20 лет назад веб-страницы были един­ствен­ным спо­со­бом раз­ме­стить что-то в Сети, а для это­го абсо­лют­но точ­но нуж­но было знать HTML. Теперь у нас есть соци­аль­ные сети и плат­фор­мы для пуб­ли­ка­ций, кото­рые не тре­бу­ют зна­ния HTML. А у тех плат­форм, кото­рые тре­бу­ют, есть WYSIWYG-редакторы — они сра­зу поз­во­ля­ют фор­ма­ти­ро­вать текст как в Microsoft Word. Поэто­му в буду­щем может появить­ся поко­ле­ние интернет-пользователей, кото­рые ни разу в жиз­ни не столк­нут­ся с HTML-кодом в сво­их проектах.

С дру­гой сто­ро­ны, HTML очень лег­ко выучить и начать исполь­зо­вать, а поль­за от него огром­ная и пря­мо сей­час. В буду­щем, может быть, исчез­нут вело­си­пе­ды, но катать­ся пря­мо сего­дня никто не запрещает.

Ско­ро всё покажем!