Оглавление
Знание HTML и вёрстки сайтов в целом, часто является точкой входа в мир веб-разработки, поэтому с этой статьи, я бы хотел начать рубрику посвящённую вопросам вёрстки, азам и тонкостям HTML и CSS. Поехали.
Что такое HTML?
HTML (HyperText Markup Language) — язык гипертекстовой разметки. По сути это инструмент при помощи которого на заре интернета и компьютерных сетей, когда не было таких программ как WORD и EXCEL, люди оформляли электронные документы в одной из лабораторий ядерной физики в США. Придумал его Тим Бернерс-Ли в начале 90-х годов. Позже, когда стал зарождаться интернет в том виде, в каком мы его сейчас знаем, язык HTML пришёлся как нельзя кстати, т.к. был простой, удобный и легкий в освоении, даже для людей ничего не смыслящих в IT.
Как устроена HTML страница
Структура HTML документа напоминает обычный электронный документ, с шапкой, основной контентной частью, наличием навигации или боковой колонки (сайдбара) и подвалом содержащим важную контактную и другую информацию. HTML страница представляет собой набор дескрипторов или тегов — специальных конструкций которые интерпретируются браузеров и преобразуются в какой-то визуальный элемент, например заголовок или ненумерованный список и т.д.
Что из себя представляет тег?
Большая часть тегов имеет открывающий и закрывающий тег. При этом контент находящийся внутри тега будет как-то интерпретирован браузером (например изменится шрифт).
Обратите внимание на косую черту — так обозначают закрывающий тег, если тег не закрыть, браузер попытается сделать это самостоятельно, но как показывает практика, это приводит к ошибкам и кривой вёрстке. Внимательно следите за закрывающими тегами! Пример простого тега:
<b>жирный текст</b> <!-- браузер отобразит текст внутри тега полужирным шрифтом -->
Атрибуты HTML-тегов
Большая часть доступных в HTML тегов, могут иметь атрибуты. Атрибут это свойство так или иначе влияющее на отображение или поведение тега при взаимодействии с пользователем.
Приведём пример:
<!-- Тег a - ссылка, с атрибутом href значением которого является адрес сайта yandex.ru -->
<a href="yandex.ru">Перейти на сайт yandex.ru</a>
<!-- Тег a - ссылка, с атрибутом href значением которого является указатель на блок в рамках текущей страницы -->
<a href="#element">Перейти к разделу страницы element</a>
Как видите, один и тот же тег, в зависимости от атрибутов и из значений, может вести себя по разному. В первом случае при клике на ссылку, вы перейдёте на сайт yandex.ru, во втором случае, браузер промотает экран до элемента с идентификатором равным element.
Про HTML 5
Как и любой широко распространённый язык, HTML имеет свои стандарты, это нужно для того, чтобы в веб-разработке не воцарился хаос, а все браузеры в мире (которых на данный момент, только популярных уже больше десятка) однообразно интерпретировали код написанный для HTML страницы. Стандарт языка HTML 5 был введён несколько лет назад и одной из ключевых его фишек было введение дополнительных, так называемых семантически-значимых тегов.
Раньше такими тегами были только заголовки h1-h6, однако в HTML 5 добавили следующий ряд тегов, при помощи которых мы можем лучше структурировать нашу HTML страницу и помочь поисковым системам правильно распознать элементы на ней.
- <header>…</hrader> — область шапки страницы или заголовка
- <nav>…</nav> — навигационное меню
- <article>…</article> — основной текстовый материал, статья
- <section>…</section> — раздел статей или раздел внутри статьи
- <aside>…</aside> — блок в стороне от контента, содержит ссылки на рубрики, облако меток и т.п.
- <footer>…</footer> — подвал сайта, обычно дублирует важное меню, телефоны, контакты
Мы рассмотрим детальнее использование этих тегов в последующих статьях.
