Основные HTML-теги. Шпаргалка для вебмастера.


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

Данная статья содержит основные HTML-теги, которые используются современными сайтами и актуальны на текущий момент. Рекомендую также почитать статью – Устаревающие html-теги.

Основная структура документа.

Первое, с чего мы начнем, это основная структура (разметка) HTML-документа. Как правило, любая страница сайта включает в себя следующие HTML-теги.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="description" content="Краткое описание страницы до 160 символов">
<meta name="keywords" content="Несколько ключевых слов">
</head>
<body>
 
</body>
</html>

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

1
2
<head></head>
<body></body>

Содержимое части head не видно пользователю в браузере (за исключением, пожалуй, тега title). Вся видимая часть страницы формируется структурой body.

Тег head обычно содержит служебную информацию, а также подключаемые стили, шрифты, файлы скриптов и т.п.

Тег <title> — включает в себя заголовок страницы. Эта информация видна во вкладке браузера, а также отображается поисковиками в результатах поиска.

Также в <head> помещаются мета-теги:

1
2
<meta name="description" content="Краткое описание страницы до 160 символов">
<meta name="keywords" content="Несколько ключевых слов">

Мета-теги «description» и «keywords» важны для поисковой оптимизации сайта.

В теги <body></body> помещается html-код, который формирует отображение страницы. По сути, все теги, рассмотренные ниже, помещаются именно в эту область.

Теги заголовков h1, h2, h3 …

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

Примеры использования:

1
2
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня уровня</h2>

Кстати, в разметке нет необходимости после тегов заголовка вставлять тег переноса на новую строку – это делается по умолчанию.

Тег переноса на новую строку <br>.

<br> равносилен нажатию кнопки Enter, когда мы печатаем в текстовом редакторе. Он осуществляет переход на новую строку.

Тег изображений <img>.

За отображение картинок на странице отвечает тег <img>, однако, просто поместить его на нашу страницу недостаточно. Мы должны задать его «атрибуты» (свойства или параметры):

src (адрес изображения на сервере),
alt (альтернативный текст, который будет отображаться вместо картинки, если показ изображений отключен),
title (заголовок изображения, название),
width (ширина картинки),
height (высота картинки).

Из всех атрибутов обязательным является только src:

1
<img src='my_picture.jpg'>

Если мы явно не указываем размер картинки, то браузер определит его автоматически. Если же мы хотим уменьшить размер картинки, то с помощью атрибутов widht и height можно задать меньшие размеры.

Стоит отметить, что хотя атрибуты alt и title не являются обязательными, рекомендуется их указывать и заполнять для улучшения ранжирования ваших изображений в поиске по картинкам.

1
<img src='my_picture.jpg' widht='100' height='200' alt='фотография кота' title='мой кот'>

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

Пример:

1
2
<p>Это первый абзац</p>
<p>Это второй абзац моего текста</p>

Браузер автоматически добавит перенос на новую строку после заключительного тега </p>

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

1
<p>Это <span style="color:red;">второй абзац</span> моего текста</p>

Два слова ‘второй абзац’ будут выделены красным цветом (только эти два слова). Атрибут style позволяет прописывать css-стили для изменения стандартного отображения элементов на странице.

Существуют также теги, которые позволяют видоизменить отображение текста:

1
2
3
<b></b> - жирный шрифт
<strong></strong> -  жирный шрифт
<i></i> - курсив

Горизонтальная линия — <hr>

Непарный тег <hr> позволяет задать горизонтальную линию на странице.

1
<hr width='50%'>

Отображение ссылок. Тег <a>.

Для отображение тегов на странице используется непарный html-тег <a>. Одного тега, конечно же, мало. Мы должны задать для него атрибуты:

href – указывает на адрес, по которому следует переходить
target – позволяет управлять окнами, в которых открываются страницы, указанные в href. К примеру, если мы укажем target=’_blank’, то страница будет открыта в новом окне (вкладке браузера). Если мы ничего не указываем, то по умолчанию страницы будут открываться в том же окне.
rel – дополнительные параметры. Например, rel=’nofollow’ сообщает поисковикам о том, что данную ссылку не учитывать при индексации страницы.

Пример использования:

1
2
3
<a href='new.html'>
<a href='new.html' rel='nofollow'>
<a href='new.html' rel='nofollow' target='_blank'>

Теги для списков.

Для форматирования списков используются теги <ul></ul> и <li></li>. Чтобы было понятно, как их использовать, лучше всего продемонстрировать это на реальном примере:

1
2
3
4
5
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>

Тег <ul>, как видно из примера, является ‘родительским’, то есть он объединяет несколько элементов li. Это позволяет группировать несколько списков на странице.

Блочные элементы <div></div>.

Тег <div> позволяет группировать другие элементы на странице, что позволяет создавать необходимую структуру – разметку страницы. Это очень важный тег, который лежит в основе так называемой ‘блочной’ верстки.
Пример использования на странице:

1
2
3
4
5
6
7
8
<div>
<a href='new_page.html'>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>

Чтобы сделать ваши страницы на html красивыми, вам мало знать и уметь использовать основные теги html. Красоту страницам придают css-стили, которые настоятельно рекомендуется изучить любому веб-мастеру.





Другие посты

Категория: HTML

Комментарии (1)

 

  1. Томенко:

    отличная статья- все понятно

Оставить комментарий