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

Весь текст в HTML размечем с помощью тегов.Первыми идут теги заголовков. Они обозначаются буквами от H1 до H6. H1 — самый главный заголовок HTML страницы. Примеры написания заголовков показан ниже:

<h1>Пример</h1>
<h2>Пример</h2>
<h3>Пример</h3>
<h4>Пример</h4>

<h1>Пример</h1>

<h2>Пример</h2>

<h3>Пример</h3>

<h4>Пример</h4>

В HTML различают два вида элементов: блочные — block и строчные — inline . Заголовки являются блочными элементами.

Особенности блочных элементов:

Высота блочного элемента определяется его содержимым, ширина — вся страница. Т.е. при отображении в браузере, блочный элемент занимает всю строку, на которой он находится. Все остальные элементы вытесняются вниз.
Даже если блочный элемент состоит из одного слова — он все равно занимает всю строку.
При стандартном изображении блочные элементы отображаются один под другим. Для изменения стандартного порядка отображения блочных элементов применяется позиционирование и обтекание элементов в CSS.

Также блочными элементами являются параграфы, которые обозначаются тегом <p></p>. Пример использования параграфа приведен ниже:

<p>Пример параграфа</p>

1	<p>Пример параграфа</p>

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

Для того, чтобы вставить изображение используется тег img. Обратите внимание, он непарный. Адрес изображения указывается с помощью атрибута src. Пример:

<img src="https://cdn3.iconfinder.com/data/icons/pink-hearts-set/154/pic7-128.png" alt = "сердце">
<p>Пример параграфа</p>

1 2	<img src="https://cdn3.iconfinder.com/data/icons/pink-hearts-set/154/pic7-128.png" alt = "сердце"> <p>Пример параграфа</p>

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

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

Одним из самых важных элементов HTML страниц являются гиперссылки. Гиперссылки связывают все страницы в единое пространство, используя гиперссылку можно связать текст или изображение на странице с каким-либо файлов. Если это файл — html, то при клике на гиперссылке браузер загрузит страницу на которую эта ссылка указывает, если другой тип файла, то браузер попытается его открыть, или загрузить. Гиперссылка — парный тег. Пример его применения:

<a href="http://ya.ru" title="Yandex">Ссылка на Яндекс</a>

1	<a href="http://ya.ru" title="Yandex">Ссылка на Яндекс</a>

На странице будет отображено только слово «Ссылка на Яндекс», причем слово будет подчеркнуто, а при наведении курсор мыши превратится в указатель. Это говорит о том, что если мы кликнем по ссылке, то выполним переход на связанный с ней элемент. Сам связанный элемент мы указываем с помощью атрибута href.
Атрибут title — позволяет задать всплывающий текст при наведении мыши на гиперссылке.

Обернуть гиперссылкой можно и картинку, как показано на предыдущем примере. При клике на изображении мы переходим по указанному адресу.

<a href="http://ya.ru" title="Yandex"><img src="https://yastatic.net/web4/_/JsViUZKr8YfX2xwqJy4tLvde-tE.svg" alt = "Яндекс"></a>

1	<a href="http://ya.ru" title="Yandex"><img src="https://yastatic.net/web4/_/JsViUZKr8YfX2xwqJy4tLvde-tE.svg" alt = "Яндекс"></a>

В зависимости от того, на что указывает атрибуту href в гиперссылке возможны варианты поведения браузера:

Если href указывает на html страницу — браузер загрузит (выполнит переход) данную страницу
Если href указывает на файл и браузер может открывать данный файл — браузер загрузит данный файл во временную папку и откроет
Если href указывает на файл и браузер не может открыть этот файл — браузер предложит сохранить файл и открыть его с помощью другой программы.