Основы языка HTML

Здравствуйте! В этой статье рассмотрим основы языка разметки HTML, познакомимся со структурой HTML-документа и основными тегами. Для создания HTML-документа можно использовать обычный блокнот, сохранив файл с расширением .html, но лучше работать в специальном блокноте для написания кода Notepad++, скачать его можно с официального сайта, он абсолютно бесплатен.

После скачивания и установки, откройте программу и установите кодировку «UTF-8 (без бом)», как на скриншоте.

Установка кодировки UTF-8 (без бом) в редакторе Notepad++

Теперь разберем структуру документа. Вот так выглядит так называемый скелет HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Заголовок всего документа</title>
  <meta name="description" content="Описание содержимого страницы">
  <meta name="keywords" content="Ключевые слова через запятую">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

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

Элемент <html> является родительским для элементов <head> и <body>, а они соответственно дочерними, так как находятся внутри тега <html> … </html>. Такая иерархия будет распространяться на все вложенные элементы документа.

Основы языка HTML

Элемент <head>

В теге <head> …  </head> содержится техническая информация о web-странице: кодировка, заголовок, описание, ключевые слова, подключение таблицы стилей, шрифтов и т.д. То, что находится в этом разделе, не выводится в окне браузера, но эти данные указывают браузеру, как именно показать страницу.

Обязательным тегом, входящим в <head> …  </head>, является <title> … </title>. Это заголовок всего документа, он отображается на открытой вкладке браузера и в результатах выдачи поисковых систем, в так называемом, сниппете, а его размер не должен превышать 60 символов. Тег <title>  очень важен для SEO-продвижения сайта.

<title>Заголовок всего документа</title>

Тег <meta> считается необязательным элементом раздела <head>, но он используется почти всегда. Этот тег является одинарным и не требует закрытия, как, например, <title> … </title>. С его помощью указываются метаданные страницы, о которых говорилось выше, еще всевозможные элементы разметки, закрытие от индексации и т.д.

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

<meta name="description" content="Описание содержимого страницы">

На счет значения keywords ходит много споров, многие вебмастера считают, что на ключевые слова поисковые системы давно не обращают внимания и поэтому вообще их не прописывают, а другие утверждают обратное.

<meta name="keywords" content="Ключевые слова через запятую">

Атрибут charset указывает кодировку документа, на данный момент стоит UTF-8.

<meta charset="UTF-8">

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

<link rel="stylesheet" type="text/css" href="style.css">

Элемент <body>

Элемент <body> это основная часть документа, которая выводится в окне браузера, то есть, что находится в теге <body> … </body>, показывается пользователю при открытии HTML-документа. В этом разделе прописываются разные теги и их атрибуты с разными значениями, о которых просто не реально рассказать в одной статье, поэтому я рекомендую сайт htmlbook.ru. На этом сайте вы найдете все теги HTML и CSS с примерами использования и подробным описанием каждого.

Добавлено коментариев  -    3

  1. Александр

    Доброго времени суток
    При создания сайта получилась небольшая проблема, весь текст состоит из вопросительных знаков в ромбиках, подскажите пожалуйста что делать и как исправить ошибку?

    1. Евгений

      Это проблема с кодировкой. Нужно установить кодировку UTF-8 (без бом). Скорее всего вы сохранили файл в другой кодировке, вам нужно просто открыть файл в редакторе и преобразовать его в UTF-8 (без бом). Если вы используете Notepad++, то данную настройку можно посмотреть на картинке в начале статьи.

  2. Александр

    все получилось. спасибо

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