Ваши первые 10 тегов в HTML

Этот урок расскажет вам о 10 базовых HTML тегов которые вам необходимо запомнить. В конце урока вы найдете пример страницы, где будут использованы все 10 тегов, и наглядно продемонстрировано как они сочетаются.

 

Теги и элементы

HTML тег это специальное слово или буква заключенная в острые скобы, <a>. В HTML теги используются для создания элементов, такие как абзацы, блоки или ссылки.

Большинство элементов имеют открывающий тег и закрывающий тег — например параграф имеет открывающий тег <p>, затем идет текст, и закрывающий тег </p>.

Некоторые элементы не имеют закрывающего тега. Это так называемые пустые элементы. Например <br> используемый для разрыва линии.

Если вам доведется работать с XHTML, то там нужно будет прописывать самозакрывающиеся теги — к примеру <br />.

Давайте взглянем поближе на каждый тег поотдельности.

 

1. <html> … </html> — Корневой элемент

Любая веб страница начинается с элемента html. Его еще можно назвать корневым элементов, так как он стоит в основе всего дерева элементов из которых состоят страницы.

HTML element and document tree
 

Для того чтобы создать элемент html, нужно написать открывающий тег <html> и его закрывающего родича </html>. Все остальное на вашей веб странице будет находится внутри этих 2 тегов:

 

2. <head> … </head> — Верхушка документа

Элемент head содержит информацию о веб странице и дополнительные сведения для веб браузера. В этот элемент прописываются другие элементы необходимые для корректного отображения страницы, информация для поисковиков, стили, скрипты.

  • title (описано ниже)
  • link (подключаем файлы стилей и favicon)
  • meta (описание страницы, ключевые слова, кодировка документа
  • script (подключаем JavaScript к странице)

Пример типичного элемента head:

 

3. <title> … </title> — Заголовок страницы

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

Заголовок страницы должен кратко и емко передавать ее содержимое. Постарайтесь каждой вашей странице дать уникальное имя.

Пример:

 

4. <body> … </body> — Содержимое страницы

Элемент body идет следом за head. Именно в нем и содержится весь контент страницы, текст, картинки, таблицы и т.д. Любая страница может содержать лишь один элемент body, исключением могут быть лишь страницы основанные на фреймах, но это очень редко используется и мы не будем вдаваться в детали (если вам все-же интересна тема фреймов, напишите об этом в комментариях).

Пример формата элемента body:

 

5. <h1> … </h1> — Заголовок секции

Такие заголовки помогают визуально разбивать контент страницы. Они работают по тому-же принципу что и абзацы в книгах или печатных статьях.

В HTML используется 6 заглавных элементов: h1, h2, h3, h4, h5, и h6. h1 для самых важных заголовков, h2 для менее важных и так далее по очередности. Обычно не требуется использовать более 3 типов, за исключением если ваша страница очень длинная и сложная.

Пример заглавного элемента h1 :

 

6. <p> … </p> — Параграф

Элемент p создает текстовые параграфы. Большинство браузеров отображают каждый параграф с вертикальным отступом друг от друга.

В принципе текст можно разделять и с помощью тега <br>, вставляя пустые строки между разделами текста, но гораздо лучше использовать тег <p>, так как он показывает браузерам и поисковиками структуру вашего документа.

Пример параграфа:

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

 

7. <a> … </a> — Ссылка

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

Чтобы создать ссылку используется тег <a> с его закрывающим собратом </a> именно в него вписывается URL нужной страницы.

Пример ссылки на www.example.com:

 

8. <img> — Изображение

Элемент img используется для вставки изображений на ваши страницы. Для того чтобы вставить изображение его, для начала, нужно выгрузить на ваш веб сервер, а затем уже вписать в тег <img> путь к файлу.

К примеру:

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

 

9. <div> … </div> — Блочный элемент

Элемент div используется для структурирования контента вашей страницы. К примеру вы хотите объеденить несколько параграфов или заголовков отобразить в от отдельном блоке на странице.
Типичные тег <div> используется для таких штук:

  • Шапка и подвал страницы
  • Колонки контента
  • Специфические области на странице (а примеру рекламные)
  • Галереи изображений

Добавляя атрибут class и/или id вы сможете стилизовать эти элементы с помощью CSS. Собственно этот элемент и является основой страниц собранных на CSS.

Пример использования элемента <div> для создания сайдбара на странице:

 

10. <span> … </span> — Дополнительный контейнер для контента

Элемент span очень похож на div в плане организации структуры контента. Разница в том, что span по сути является дополнительной оболочкой для строчных элементов:

  • Блочные элементы,  такие как div, h1 и p созданы для того чтобы в них помещать большие порции контента, вроде параграфов текста. И блочный элемент в коде всегда пишется с новой линии.
  • Строчные элементы, вроде span, a, или img призваны для мелкого отображения или стилизации информации — ссылка, фраза, предложение, внутри большого блока контент. Строчный элемент в коде не требует написания с новой линии. Блочные элементы могут содержать строчные, а строчные элементы НЕ могут содержать блочные.

Как и div, к элементу span можно добавлять атрибут class и/или id, и в дальнейшем стилизовать с помощью CSS.

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

 

А теперь все вместе!

Мы рассмотрели 10 важных элементов которые встречаются на 99% страниц в интернете, посмотрим как они выглядят:

 

Собственно вы видите, что даже с помощью этих 10 элементов можно создать самую простую HTML страницу. Готовы двигаться дальше?

 

Источник: http://www.elated.com

Роман Головчук

Создатель и куратор InfoStarve

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *