Дока

Доктайп стал для HTML чем-то вроде use strict в JS.

На практике

Скопировать ссылку "На практике" Скопировано

Дока Дог советует

Скопировать ссылку "Дока Дог советует" Скопировано

🛠 Если сравнивать HTML с устройством человека, то — это его вид. Важно знать, что было раньше, но не надо быть австралопитеком. Единственный вариант, который можно использовать — это , все остальные устарели.

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Программисты прошлого соревновались в том, кто может написать один из доктайпов по памяти и без ошибок.

Сейчас такого веселья уже не видать. Во-первых, доктайп усох: — сложно написать это с ошибками. А во-вторых, все разработчики используют плагин Emmet для написания стандартной разметки страницы. Гораздо удобнее напечатать ! и нажать клавишу Tab , чем запоминать доктайп. Аналогичного результата можно добиться, набрав в файле html : 5 и нажав Tab.

Так что нужно просто знать, что такое определение DOCTYPE должно быть во всех HTML-документах, где оно должно находиться в разметке и за что отвечает. Остальное сделает машина.

Источник

Структура HTML-кода

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

Пример 1. Исходный код веб-страницы

      
Заголовок
 
Первый абзац.
 
Второй абзац.
  

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

Элемент (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

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

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

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

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

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

Элемент

определяет абзац текста.

Элемент

является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

Следует добавить закрывающий тег , чтобы показать, что «тело» документа завершено.

Последним элементом в коде всегда идёт закрывающий тег .

Источник

Элементы в HTML5

Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами и . Здесь размещаются большинство элементов html.

Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.

Элемент head и метаданные веб-страницы

Как правило, одним из первых элементов html-документа является элемент head , задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.

Заголовок

Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title

      
Содержание документа HTML5
   

Элемент base

Элемент base позволяет указать базовый адрес, относительно которого устанавливаются другие адреса, используемые в документе:

Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html

Можно также указывать полный адрес:

В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset . Рекомендуемой кодировкой является utf-8:

При этом надо помнить, что указанная элементе meta кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM . Например, выбор кодировки в Notepad++:

Элемент meta также имеет два атрибута: name и content . Атрибут name содержит имя метаданных, а content - их значение.

По умолчанию в HTML определены пять типов метаданных:

• application name : название веб-приложения, частью которого является данный документ
• author : автор документа
• description : краткое описание документа
• generator : название программы, которая сгенерировала данный документ
• keywords : ключевые слова документа

Надо отметить, что наиболее актуальным является тип description . Его значение поисковики часто используют в качестве аннотации к документу в поисковой выдаче.

Добавим в документ ряд элементов meta:

       Содержание документа HTML5   

Источник