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

Для создания веб-сайтов чаще всего используют HTML, отвечающий за содержание и строение страницы, и CSS, создающий ее внешний вид. HTML состоит из тегов и их атрибутов, а также, как и любой язык, имеет свою структуру и пунктуацию. Каждый тег заключается в вот такие уголки <ТЕГ> или наглядней < DIV>, но только без пробела перед самим тегом.

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

  • Парные теги – это теги, состоящие из двух частей: открывающие <ТЕГ>, и закрывающие . Они нужны, для оформления определенного участка текста. Такие теги обязательно должны быть закрыты, иначе веб-страница не будет работать корректно или перестанет работать вообще.

    Например:

    Абзац, текст или предложение.

  • Непарные теги – это теги, состоящие только из одной части. В основном, они нужны для вставки какого-то элемента на страницу, и для этого им не нужно заключать в себя часть текста.

    Например:


    -- тег для перехода на следующую строчку

Значения тегов:

  • < !DOCTYPE html> — это тег, описывающий тип документа («Для HTML-5»)
  • < html>…< /html> — Эти теги должны быть началом и концом «HTML документа».
  • < head>… < /head> — Теги для указания служебной информации и специальных тегов.
  • < title>…< /title> — Нужны для указания заголовка в названии вкладки.
  • < body>…< /body> — в эти теги заключается вся видимая пользователю информация: текст, изображения и т.д.
  • < p>…< /p> — Теги, обозначающие границы абзаца.
  • < h1>…< /h1> — < h6>…< /h6> — Теги, обозначающие заголовки и их важность < h1> -- самый важный заголовок и т.д.
  • < !-- Комментарий --> — текст, который будет невидим для пользователя, но зато видим для вас. Если требуется спрятать какую-то часть текста на сайте, но вам не хотелось бы ее удалять, то можно просто закомментировать ее.

Все теги показанные в данной статье нужно использовать без пробела после стрелочки или уголка, как вам удобнее, т.е. <пробелhtml>, 'пробел' просто удаляем и все. Кто подскажет как сделать удобнее вывод тегов в статье, пишите в комментариях, заранее спасибо. Итак читаем далее.

Строение простейшего HTML документа:

< !DOCTYPE html>
< html>
< head>
 <!-- Название --> 
< /head>
< body>

< /body>
< /html>

Атрибуты Тегов

Практически каждый HTML тег может включать в себя какие-либо атрибуты, но существуют и такие теги, которые не существуют без них. Например: < img src="/ адрес картинки ">. Без использования атрибута src, браузер просто проигнорирует тег < img>.

Кодировка

От заданной кодировки «HTML-страницы» зависит, сумеет ли веб-браузер корректно воспроизвести содержимое страницы. Если кодировка не указана, или указана ошибочно, то все содержимое страницы может превратиться в иероглифы.

Чтобы проинформировать браузер о кодировке «HTML-страницы», употребляется тег — < meta> и его атрибут — charset="имя кодировки". Указывать данный тег можно только внутри < head>…< /head> . Utf-8 это самая распространённая кодировка в мире, именно ее следует применять для создания сайтов.

< head> 
 
< /head> 

Правила использования тегов и атрибутов

  1. Теги и атрибуты возможно записывать строчными и заглавными буквами, поэтому только вам выбирать, как писать — HR, Hr или hr.
  2. Внутри тега, между используемыми атрибутами, позволительно употреблять перенос строк.

  3. Если какой-либо из использованных вами тегов или его атрибутов был написан неверно, то современный браузер пренебрежёт подобным тегом и воспроизведет текст, не учитывая его. Тем не менее, не следует оставлять подобные теги в коде, так как HTML не пройдёт проверку кода на присутствие ошибок.
  4. Абсолютно все значения атрибутов следует употреблять в двойных или одинарных кавычках (не книжных), а вот в таких "значение атрибута". Современные браузеры воспринимают корректно значения без кавычек, только если в них отсутствует пробел.
  5. Непременно должен быть пробел между названием тега и атрибутом, а также между используемыми атрибутами.
  6. Нельзя использовать атрибуты с одинаковым именем внутри одного тега.