Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Синтаксис HTML

Синтаксис языка HTML

Синтаксис HTML
Описание синтаксиса языка HTML.

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

Структура HTML-документа

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

<!DOCTYPE html>
<html> 
 <head>
  <title>Название страницы<title>
 </head>
 <body>
  <h1>Заголовок статьи</h1>
  <p>Абзац
   статьи</p>
 </body>
</html>

Каждый HTML-документ должен начинаться со строки <!DOCTYPE html>, она означает что код в документе будет написан на языке HTML. Затем идёт сам HTML-код, который начинается и заканчивается тегами <html> </html>.

Между тегами <html> </html> располагаются два основных блока, первый блок — это голова HTML-документа, который начинается и заканчивается тегами <head> </head>, второй блок — это тело HTML-документа, который начинается и заканчивается тегами <body> </body>.

В голове HTML-документа содержится различная служебная информация, которую пользователь не видит (кроме тега title), там находятся следующие теги:
<title> </title> — название HTML-страницы,
<meta> — мета-теги, в них содержится служебная информация о странице,
<link> — тег ссылающийся на внешние файлы, например .css, .ico и т.д.,
<script> </script> — теги могут содержать JavaScript-код или ссылаться на внешний файл .js

В теле HTML-документа обычно содержится основная информация, которую мы видим на странице, там могут находиться следующие теги:
<h1> </h1> — заголовок статьи, первого уровня,
<img> — изображение,
<p> </p> — абзац,
<a> </a> — ссылка,
<table> </table> — таблица,
<form> </form> — форма ввода данных,
и т.д.

Правила написания HTML-кода

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

  • Блочные теги которые находятся внутри других тегов, лучше размещать на одну строку ниже и на один пробел (табуляцию, как вам удобней) правее от тега в котором он размещен. Например таким образом расположены заголовок h1 и абзац p, по отношению к тегу body, в схеме HTML-документа расположенной в начале этой статьи.
  • Закрывающий и открывающий теги одного элемента, могут находится либо на одном уровне, как например теги <body> </body>, либо закрывающий тег может находится в конце текста, как например закрывающие теги элементов title, h1 и p.
  • Равнозначные между собой элементы тоже можно размещать на одном уровне, в схеме HTML-документа что расположена выше, равнозначными по отношению друг к другу, являются head и body, h1 и p.
  • На самом деле, весь HTML-код можно записать в одну строку и браузер всё равно правильно покажет HTML-страницу. Правила синтаксиса языка HTML, где теги нужно записывать друг под другом и левее, существуют лишь для того, чтобы вебмастеру было удобнее создавать и изменять в дальнейшем код HTML-страницы.

Вот еще некоторые моменты, которые нужно учитывать при создании кода:

  1. Сколько бы вы не поставили пробелов в текстовом редакторе, браузер покажет их как один пробел.
  2. Переносы строк и табуляции в текстовом редакторе, не распознаются браузером.
  3. Если вам нужно перенести строку, которая должна быть видна на HTML-странице, то используйте тег <br>.
  4. Если вам нужна табуляция (например для создания "красной" строки), которая должна быть видна на HTML-странице, то используйте либо несколько спецсимволов неразрывного пробела &nbsp;&nbsp;&nbsp;&nbsp; либо CSS-свойство text-indent.

Читать далее: Адреса в HTML

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget