Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать *.html
Создадим текстовый файл, назовем его index и изменим его расширение на .html.
Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:
<!DOCTYPE html> <html> </html>
Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration
сообщает веб-браузеру тип документа. <!DOCTYPE html>
указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.
А элемент html
между своим открывающим и закрывающим тегами содержит все содержимое документа.
Внутри элемента html
мы можем разместить два других элемента: head и body.
Элемент head
содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся.
Элемент body
собственно определяет содержимое html-страницы.
Теперь изменим содержимое файла index.html следующим образом:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Содержание документа HTML5</div> </body> </html>
В элементе head определено два элемента:
элемент title
представляет заголовок страницы
элемент meta
определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку.
В данном случае с помощью атрибута charset="utf-8"
указываем кодировку utf-8.
В пределах элемента элемента body
используется только один элемент - div
, который оформляет блок.
Содержимым этого блока является простая строка.
Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM:
После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.
Сохраним и откроем файл index.html в браузере:
Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title
заголовок "Документ HTML5", то именно такое название
будет иметь вкладка браузера.
Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.
А весь текст, определенный внутри элемента body
мы увидим в основном поле браузера.