Базовая структура HTML-документа с объяснением каждой строчки
Обычно, когда я начинаю новый проект, я либо копирую HTML-структуру последнего сайта, который я создал, либо перехожу к HTML5 Boilerplate и копирую их шаблон. Недавно я не начал новый проект, но мне пришлось документировать структуру, которую мы используем на работе для сайтов, которые мы строим. Таким образом, простое копирование и вставка не были вариантом, я должен был понять, какой выбор был сделан. Поскольку я потратил довольно много времени на исследование и создание структуры, я решил поделиться ею с вами.
Разбор каждой строки
Общее
Для олдскульщиков, нам не нужны никакие другие doc types, которые вы выучили наизусть. Этот будет единственным и неповторимым. Несмотря на то, что сегодня нет других реальных вариантов, он должен присутствовать по соображениям совместимости.
Атрибут lang является одним из самых важных атрибутов в HTML, потому что он мощный и отвечает за многие вещи. Вы можете прочитать больше об этом On Use of the Lang Attribute и The lang attribute: browsers telling lies, telling sweet little lies. Примененный к элементу html , он определяет естественный язык страницы. Он содержит один “языковой тег” в формате, определенном в Tags for Identifying Languages (BCP47), например, en для английского, de для немецкого или ru для русского.
Я использую класс no-js в случае, если я хочу применить стиль к определенным компонентам в браузерах, которые не поддерживают JavaScript. Этот класс будет удален в браузерах, поддерживающих и выполняющих современный JavaScript.
Этот атрибут объявляет кодировку символов документа. Если оставить его выключенным, определенные символы могут отображаться некорректно в некоторых браузерах.
Вот как Safari отображает мое имя с метатегом charset и без него.
Manuel Matuzović — Manuel Matuzović
Он должен стоять перед элементом title , чтобы избежать неправильных символов в заголовке страницы.
Мета-тег области просмотра позволяет нам изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана. initial-scale управляет уровнем масштабирования при первой загрузке страницы.
Я не уверен, что установка initial-scale = 1 по-прежнему необходима. Кажется, я где-то читал, что это нужно только для Safari на <iOS 9, но я больше не могу найти эту статью.
Метатег viewport должен появляться в документе как можно раньше, чтобы обеспечить правильную визуализацию документа.
Параметр shrink-to-fit = no больше не нужен, начиная с iOS 9.3.
Заголовок, описание, соцмедиа
Уникальное название страницы. Он отображается во многих местах, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.
Я режу горчицу при поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что это браузер, который поддерживает современный JavaScript, такой как модули, синтаксис ES 6, выборка и т. Д. Я отправляю большую часть JS только этим браузерам и использую класс js в CSS, если стили компонента отличается, когда JS активен.
Print CSS для сайта.
Уникальное описание страницы, например, отображаемое на страницах результатов поиска. Он может быть любой длины, но поисковые системы усекают фрагменты до
Уникальное название страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Уникальное описание страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Изображение, отображаемое, когда вы делитесь ссылкой на страницу в социальных сетях, приложениях чата или других сайтах, которые очищают URL-адреса.
В идеале это должно быть квадратное изображение с важным содержанием, размещенным в центре квадрата в прямоугольнике с соотношением сторон 2:1. Это гарантирует, что изображение будет хорошо смотреться на карточках с изображениями прямоугольной и квадратной формы.
Вот как это изображение будет выглядеть в Twitter и WhatsApp.
Правила для Twitter: изображения для этой Card поддерживают соотношение сторон 2:1 с минимальными размерами 300×157 или максимальными 4096×4096 пикселей. Размер изображений не должен превышать 5 МБ. Поддерживаются форматы JPG, PNG, WEBP и GIF.
Описание изображения. Не используйте этот метатег, если изображение носит чисто декоративный характер и не содержит значимой информации. Программы чтения с экрана игнорируют изображение, если мы не предоставляем замещающий текст.
Необязательное свойство Open Graph, но рекомендуется. Он определяет естественный язык страницы.
Тип контента, которым вы делитесь, например website , article , или video.movie . Обязательное свойство для допустимых страниц Open Graph.
Канонический URL страницы. Обязательное свойство для допустимых страниц Open Graph.
Этот метатег определяет, как будут выглядеть карточки при публикации в Twitter. Есть два варианта для веб-сайтов: summary и summary_large_image .
summary_large_image
Как видите, я использую квадратное изображение, чтобы карточка выглядела хорошо в обоих вариантах. Я закрасил верхнюю и нижнюю часть карточки в розовый цвет, чтобы вы могли видеть, что эти части будут обрезаны на Summary_large_image .
Иконки и адресная строка
theme-color предоставляет браузерам цвет CSS для настройки отображения страницы или окружающего пользовательского интерфейса.
Поддерживаемые браузеры: Chrome, Brave и Samsung Internet на Android.
Значок 32 × 32 пикселя для устаревших браузеров. Он должен находиться в корне вашего веб-сайта.
Большинство современных браузеров поддерживают значки SVG. Преимущества favicon.svg в том, что он выглядит лучше при масштабировании, потому что это векторное, а не растровое изображение, и мы можем добавлять HTML и CSS в SVG, что означает, что мы можем поддерживать темный режим.
Фавикон на моем сайте в светлом режиме.
Фавикон на моем сайте в тёмном режиме. 
Значок 180 × 180 пикселей устройства Apple будут использовать, если вы добавите страницу на главный экран.
Для устройств Android нам нужен файл .webmanifest , который предоставляет браузерам информацию о том, где расположены значки, необходимые для домашнего экрана и заставки для PWA.
Используйте элемент canonical ссылки, чтобы предотвратить проблемы SEO, вызванные дублированием контента, указав исходный источник для страниц, доступных по нескольким URL-адресам.
Если я хочу обслуживать JavaScript, предназначенный специально для браузеров, не поддерживающих модули, я добавляю атрибут nomodule , который заставляет скрипт запускаться только в устаревших браузерах, а именно в IE 11.
JavaScript с type = "module" будет работать только в браузерах, поддерживающих модули, это противоположно атрибуту nomodule .
Это не абсолютный минимум, но это то, что мне нужно на большинстве сайтов, которые я создаю. Подводя итог, я добавил к этому сообщению несколько тегов, которые нам, вероятно, больше не нужны, а также некоторые другие, которые могут вам понадобиться время от времени. Если вы хотите узнать больше об элементе head и его дочерних элементах, ознакомьтесь с фантастическим репозиторием HEAD Джоша Бучи.
Штуковины, которые нам больше не нужны
По словам Андрея Ситника, для последних версий Windows этого больше не требуется.
Начиная с Safari 12, нам больше не нужен отдельный вариант значка для закрепленных вкладок.
Другие примечательные элементы
Используйте preload , если вы хотите, чтобы определенные ресурсы были доступны на более раннем этапе жизненного цикла страницы.
RSS-канал для вашего сайта.
Отключите автоматическое определение и форматирование телефонных номеров.
Запретите Twitter использовать информацию о вашем сайте в целях персонализации.
Облачные серверы от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
ИнфоБлог
Для успешного ответа на тестовые задания этого раздела учащиеся должны знать основные понятия веб-конструирования.
1. Для каких целей может использоваться тег <A>:
1. Для вставки рисунков;
2. Для оформления текста полужирным шрифтом;
3. Для создания гиперссылки;
4. Для оформления текста курсивом;
2. Увеличить размер шрифта можно, используя тег:
3. Какой из вариантов структуры HTML-документа правильный?
4. Чтобы закончить строку и начать новую используют тег:
5. Какой из тегов разместит текст посередине окна браузера?
6. Какой из тегов служит для управления различными параметрами шрифтового оформления?
7. Какие из тегов не являются парными:
8. С помощью тега <I> можно.
1. Оформить выделенный участок текста курсивом
2. Создать гиперссылку
3. Вставить рисунок
4. Оформить выделенный участок текста полужирным шрифтом
9. Какой из вариантов вставки рисунка правильный?
1. <IMG SRC=»file.gif» ALT=»Хороший рисунок»>;
2. <IMC SRG=»file.gif’ ALT=’Хороший рисунок»>;
3. <IMG SRG=file.gif ALT=Хороший рисунок>;
4. <IMG SRC=file.gif ALT=»Хороший рисунок»>>;
10. Что делает тег <P> ?
1. Оформляет выделенный участок текста курсивом;
2. Создает абзац;
3. Выделяет текст полужирным шрифтом;
4. Вставляет пробелы перед следующим словом текста;
11. С помощью тега <B> можно:
1. Оформить выделенный участок текста курсивом;
2. Создать таблицу;
3. Оформить выделенный участок текста полужирным шрифтом;
4. Создать гиперссылку;
12. Когда следует использовать тег <SUB>:
1. Когда надо написать значение температуры в градусах;
2. Когда надо написать формулу серной кислоты H 2 0;
3. Когда надо задать ширину таблицы;
4. Когда надо уменьшить размер шрифта;
13. Для чего можно использовать тег <SUP>
1. Когда надо написать значение температуры в градусах;
2. Когда надо написать формулу серной кислоты H 2 0;
3. Когда надо задать ширину таблицы;
4. Когда надо уменьшить размер шрифта;
Структура HTML документа: html, head, body, title
Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.
Общая правильная структура HTML документа
В первую очередь, без долгих предисловий – общая структура любого HTML документа должна быть такой:
Структура HTML документа
Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так
Тип текущего документа DTD
Тип текущего документа (Document Type Definition, DTD) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.
Кроме этого есть другие языки разметки отличные от HTML, например XHTML.
Примечание: XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.
XHTML похож на HTML, но отличается синтаксисом. Чтобы браузер не путался языки и нужно показать ему в первой строке кода, тип текущего документа DOCTYPE .
Понятие тега в HTML
Вы обратили внимание, что вся структура HTML документа задается определенными тегами – некими словами, заключенными в угловые скобки.
Слово, заключенное в угловые скобки HTML документа называется тегом. Каждый тег имеет свой смысл, определенный правилами разметки.
- Тег [head] означает заголовок html документа. В тегах head хранится информация для браузеров и поисковых систем. В том числе в виде мета-тегов;
- Тег [body] означает основное содержание html документа. Именно текст, изображения, скрипты Java Script и т.д.;
- Тег [p] это блочный элемент, всегда начинается с новой строки. Он означает абзац основного содержания html документа.
Важно! Все теги html разметки должны быть парными. То есть, открывающий тег <тег> , должен быть закрыт закрывающим тегом, с косой чертой </тег> .
Теги заголовков и подзаголовков h1-h6
Для улучшения структурирования текста документа, а также улучшения SEO веб-страниц, существуют дополнительные теги основного содержания. Они называются теги заголовков и подзаголовков от h1 до h6 , всего 6 штук.
Они так же как теги [p] -обзаца, который, позволяет выделить смысловые участки текста, позволяют поделить текст на смысловые участи, дав каждому участку свой заголовок.
Теги h1–h6 имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.
Важно отметить, что нарушение подчиненной зависимости тегов h1-h6-p не нарушит отображение и валидность документа, а лишь ухудшит его оптимизацию для поисковых систем.
Пример развитой структуры HTML документа
Приведу академический пример более развитой структуры HTML документа:
Структура HTML 5
В версии HTML 5 должна быть такая структура документа:
<!DOCTYPE html> Это декларация показывает, что этот документ в HTML5 ;
<html> это корневой элемент HTML страницы;
<head> Элемент, с мета-тегами о документе;
<title> Этот элемент определяет заголовок для документа;
<body> Этот элемент содержит видимое содержимое страницы;
<h1> Элемент определяет большой заголовок
<p> Элемент определяет абзац.
Работают в html5 теги h2 – h6
Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег – закрывающим тегом.
HTML разметка на сайте WordPress
Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона Twenty Seventeen:
Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа: <!DOCTYPE html>
Парные теги head , header
Открывающий тег body .
Закрывающий тег можно найти в файле footer.php .
Как посмотреть HTML код страницы сайта WordPress
То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело body страницы.
Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:
Открыть страницу в браузере;
Перейти в английский шрифт клавиатуры;
Нажать следующие кнопки:
- Chrome: Ctrl+U
- Opera: Ctrl+U
- Mozilla: Ctrl+U
Может быть, вы пока не знаете, зачем это нужно. Поверьте, это будет нужно не раз, для анализа своего сайта и возможно сайтов конкурентов.
Вывод
В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд большая разница. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.