Базовая структура 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% скидку на первый месяц аренды сервера любой конфигурации!
Name already in use
PiRIS / articles / web_html_1.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
Введение в HTML
Что нужно, чтобы создать веб-страницу
Большинство вещей в сети ничем не отличаются от аналогичных вещей в вашем домашнем компьютере: такие же файлы, хранящиеся в таких же подкаталогах.
HTML файлы – это обычные текстовые файлы. Таким образом, чтобы начать писать на языке HTML, вам необходим всего лишь обычный текстовый редактор.
Например, создайте файл myfirstpage.html с содержимым
Чтобы просматривать HTML файлы, они не обязательно должны быть размещены в сети Интернет. Откройте браузер и в адресной строке, где вы обычно вводите адрес сайтов, введите адрес созданного вами файла (например, c:\html\myfirstpage.html ) и нажмите ввод.
Структура HTML документа
Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.
Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.
Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить».
Внешний вид страницы никак не изменился. Однако предназначение HTML – определение значения для содержимого, а не внешнего представления, и данный пример показал нам несколько фундаментальных элементов веб-страницы, задающих базовую структуру документа HTML.
Первая строка, начинающаяся с <!DOCTYPE. говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.
Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html> , — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html> , является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.
Теги </body> и </html> закрывают соответствующие открывающие теги. Все теги в структуре документа HTML должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.
Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html> ). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br/> . Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег .
У тегов также могут быть атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Все это выглядит следующим образом:
Подробнее о тегах с атрибутами мы поговорим немного позже.
Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body> , включая сами эти теги, является элементом body.
У каждой веб-страницы должна быть головная часть или заголовок документа.
Чтобы добавить заголовок документа HTML, измените код вашей веб-страницы следующим образом:
Мы добавили два новых элемента. Они начинаются с тегов <head> и <title> (также обратите внимание, как они оба закрываются).
Элемент <head> располагается перед элементом <body> . Он содержит информацию о веб-странице. Это и есть заголовок документа HTML. Информация, расположенная в элементе <head> , не отображается в окне браузера.
Позднее вы убедитесь, что внутри заголовка документа HTML могут располагаться некоторые другие элементы, и одним из самых важных является элемент <title> .
Если вывести в браузер нашу вновь модифицированную веб-страницу, то вы увидите строку «Моя первая веб-страница», появившуюся в верхней части браузера, там, где всегда отображается название файла. Таким образом, текст, помещенный между тегами <title> и </title> , стал названием веб-страницы. Если добавить эту веб-страницу в «Избранное», то вы заметите, что и здесь используется это же «название» страницы.
Абзац в веб-документе
Теперь, когда у вас есть базовая структура документа HTML, можно наконец добавить немного контента.
Вернитесь в текстовый редактор и добавьте в код вашей веб-страницы еще одну строку:
Посмотрите на получившийся документ в браузере.
Наверное, вы ожидали, что в браузере ваш документ будет отображаться так же, как вы его писали, т.е. на двух строчках. Однако вместо этого вы увидите что-то вроде:
Это произошло потому, что браузер совершенно не обращает внимание на количество строк, на которых расположен код веб-страницы. Также ему безразлично сколько пробелов вы ввели между словами (вы получите тот же результат, если напишите » Это моя первая веб-страница Вот здорово»).
Если вы хотите, чтобы текст отображался на разных строках, вы должны ясно указать это, определив абзац HTML.
Измените две строки вашего контента следующим образом:
Тег <p> создает параграф или абзац HTML.
Посмотрите на получившуюся веб-страницу в браузере: теперь две строки текста в браузере отображаются также на двух строках.
Рассматривайте контент HTML документа, как текст книги – с делением на параграфы и абзацы HTML там, где это необходимо.
Вы можете внутри абзаца HTML выделять текст при помощи тега <em> (акцент) и тега <strong> (усиленный акцент). Оба эти тега в принципе делают одно и то же – выделяют текст, хотя традиционно браузеры отображают текст внутри тега <em> курсивом, а внутри тега <strong> жирным шрифтом.
Для разделения строк также можно использовать тег разрыва строки <br/> :
Тем не менее, данный метод часто приводит к разным злоупотреблениям и в тех случаях, когда один блок текста должен быть отделен от другого, не рекомендуется к использованию (так как если речь идет об абзацах HTML, то лучше использовать элемент <p> ).
Шесть уровней текстовых заголовков
Тег <p> – это всего лишь один из тегов форматирования текста.
Если у вас есть документы с настоящими заголовками, то следующие теги HTML вам очень пригодятся.
Измените код вашей первой веб-страницы следующим образом:
Обратите внимание, что тег <h1> мы использовали всего один раз. Это потому что он считается основным заголовком страницы и не должен использоваться больше одного раза на странице.
Тем не менее, все остальные теги заголовков от <h2> до <h6> можно использовать столько раз сколько хотите. Однако их всегда следует использовать в соответствующем порядке. Например, <h4> должен быть подзаголовком <h3> , который в свою очередь должен быть подзаголовком <h2> .
Упорядоченные и неупорядоченные списки
Существует три типа списков: упорядоченные, неупорядоченные и списки определений. Здесь мы рассмотрим первые два вида списков, а о списках определений вы узнаете позже.
Упорядоченные и неупорядоченные списки работают одинаково, за исключением того, что последние используются для представления непоследовательных списков, элементы которых обычно маркируются крупной черной точкой (буллитом), а первые используются для представления последовательных списков, которые обычно имеют вид элементов пронумерованных в возрастающем порядке.
Для определения неупорядоченных списков используется тег <ul> , а для определения упорядоченных списков – тег <ol> . Внутри списков для определения каждого отдельного элемента списка используется тег <li> .
Измените свою веб-страницу следующим образом:
Если посмотреть эту веб-страницу в браузере, то увидите список, маркированный буллитами. Замените тег <ul> на тег <ol> , и вы увидите, что список стал нумерованным.
Кроме всего прочего можно включать одни списки в другие, формируя тем самым структурированную иерархию элементов.
Замените код списка из предыдущего примера следующим:
Определение HTML cсылок
До сих пор вы создавали одиночные веб-страницы, которые хороши сами по себе и работают хорошо, но вещь, делающая Интернет таким особенным, это то, что все страницы пересекаются, т.е. ссылаются друг на друга. Ведь буквы «HT» в аббревиатуре «HTML» обозначают слово «гипертекст», что в основе своей означает «текст со ссылками».
Чтобы определить ссылку, используется тег <a> , однако этому тегу требуется еще кое-что – направление ссылки, т.е. то, куда будет попадать пользователь при нажатии на ссылку.
Добавьте в свою веб-страницу следующее:
Направление ссылки задается в атрибуте href тега <a> . Ссылка может быть абсолютной, такой как «http://www.msiter.ru», или относительной, указывающей на текущую страницу. Таким образом, если, например, у вас другой файл с именем «flyingmoss.html», то код примет вид <a href=»flyingmoss.html»>Чудо летающего мха</a> .
Ссылка не обязательно должна ссылаться на другой HTML файл. Она может ссылаться на любой файл в сети.
Кроме этого ссылка может отсылать пользователя к другой части той же самой страницы. Для этого нужно добавить атрибут id к любому тегу, например, <h2 >Мох</h2> , а затем создать ссылку на этот тег, например, следующим образом: <a href=»#moss»>Перейти к моху</a> . При нажатии на такую ссылку браузер перелистнет страницу прямо к элементу с данным идентификатором id.
Тег <a> позволяет сделать так, чтобы ссылка открывалась в новом окне браузера, а не замещала ту страницу, на которой находится пользователь. Это может показаться разумной мыслью, так как в этом случае пользователь не покидает ваш веб-сайт. Тем не менее, существует множество причин, почему не стоит этого делать. С точки зрения удобства использования подобная практика нарушает линию навигации. Наиболее часто используемым инструментом навигации является кнопка браузера «Назад». При открытии нового окна браузера эта функция становится недоступной. Если же брать еще шире и перейти вообще к проблемам удобства использования, то пользователь вообще относится отрицательно к самовольно открывающимся окнам браузера. Если пользователь захочет открыть ссылку в новом окне, то у него всегда есть возможность сделать это средствами самого браузера.
Как добавить изображения
Один сплошной текст может казаться довольно скучным и плоским. Но ведь Интернет не только текст. Это мультимедийная сеть, и наиболее распространенная форма медийного представления информации – изображение.
Для того чтобы определить изображение в HTML документе, используется тег <img> . И выглядит это следующим образом:
Атрибут src показывает браузеру, где находится изображение. Как и при определении ссылки (о чем рассказывалось ранее) путь может быть абсолютным, как в примере, но обычно используется относительный путь. Например, если вы создадите свое изображение и сохраните его под именем «alienpie.jpg» в директории «images», то тег примет следующий вид: <img src=’images/alienpie.jpg’
Атрибуты width и height определяют ширину и высоту изображения в пикселях. Хотя это и необязательные атрибуты, лучше всего их указывать, так как если их опустить, то браузер будет рассчитывать размер изображения по мере его загрузки, что может привести к искажениям внешнего вида веб-страницы. Кроме этого эти атрибуты позволяют манипулировать отображаемыми размерами изображения. Тем не менее, следует помнить, что реальный размер файла изображения в килобайтах останется прежним, и прежним будет время его загрузки.
Атрибут alt – альтернативное описание. Оно полезно, если браузеру по той или иной причине не удалось загрузить изображение; при этом в том месте, где должно быть изображение, будет показан текст этого атрибута.
Обратите внимание, что тег <img> не имеет закрывающего тега и закрывает сам себя при помощи завершающей конструкции /> .
Таблицы я пропущу, т.к. в современной вёрстке они используются редко и вы сами при необходимости их изучите
Все в HTML предназначено для того, чтобы придать контенту некое значение. В то время как большинство HTML тегов в полной мере выполняют это предназначение (тег <p> создает параграф, тег <h1> – заголовок и т.д.), теги <span> и <div> никакого значения не имеют, что может вызвать некоторые сомнения в необходимости их существования. Однако эти теги используются чрезвычайно активно совместно с технологией CSS.
Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.
Разница между тегом <span> и тегом <div> заключается в том, что элемент <span> является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент <div> является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.
HTML File Structure: A Learning Journey to Web Development
Hello, folks! How’s your hacking going? Last time we learned about HTML and HTML tags. We also wrote a little bit of code. But those codes was completely random and unorganized. However, when we need to write code for creating a real web page, we need to follow certain structure for formatting our code as well as helping browser to render the content properly. And thus, HTML file Structure is what we’ll be learning today. Let’s Begin!
This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
HTML File Structure
So, basically, An HTML file have 4 main parts. They are Document type Declaration, HTML, Head, and Body. These four parts split up an HTML file in sections that delivers different information to the browsers to serve a different purpose. We’ll now discuss each part in details.
First comes the Document type declaration. Before we begin writing our HTML code, we need to define which version of HTML we are creating. HTML have many different versions which we’ve learned in HTML History. All these versions are somewhat different from one another, Even though they share a lot of tags and attribute with the same name. So, We have to let the browser know the exact version of HTML we are using so that it can render the content correctly.
Document Type Declaration
DocType Declaration is the very first thing we do in our HTML file using the <!DOCTYPE> tag. It’s a self-closing tag, which means we don’t have to write a separate closing tag for this element. We write the tag and we add the version information as an attribute of the tag. For example, if we were to write an HTML file with the version 4.01, we had to write our doctype as following:
Looks complicated, right? The good news is, Since the release of HTML5, we don’t have to write those complex lines of wired codes. Rather, all we need to write is this:
When you say ‘HTML’ after ‘!DOCTYPE’, it’ll tell the browser that you are using the latest version of HTML which is currently HTML5. But even when the latest version of HTML gets promoted to other versions, your file would still be using the up to date definitions of HTML. Cool, right? And with that, we’re done with doctype declaration.
The html Tag
The next part of an HTML file structure is the html tag itself. It’s just a simple notation of beginning the HTML codes. It marks the start point from where browsers start rendering content. This tag is the root of any HTML file. Everything we write in an HTML file goes inside this tag. Which means, this html tag is the descendant of every single element of a page.
We declare it like this:
The head Tag
The next part of an HTML file structure is the head tag. This tag contains meta information about the page. In other words, the head part of an HTML file has all the information that is not directly shown in a web page But is necessary for showing them properly.
The example of this would be the character set of fonts we’re using in our content. Or the title of our page that usually shows up in the browser’s tab bar. These things don’t show up in the visible part of our web page but still is very necessary. So, head’s purpose is to deliver all the important information about rest of the page to the browser while they don’t really show up in visible parts of web pages.
We write the head tags right after (and inside) the html tags. Like this:
The body Tag
The body is the main part of HTML file structure. This is the part of HTML file that contains all the content that actually shows up on the page to the viewers. So, as you may have already understand, everything you see on a web page; your friends selfie on Facebook, that video on Youtube or that news on BBC, everything is part of this body tag.
Body tag doesn’t have any structuring rules about how we organize our content inside it. We dump everything we want our users to see inside the body. But HTML5 introduces a lot of semantic tags that provide guidelines on formatting our content in a nice way. We’ll discuss that in future.
We start the body tag after the closing of head tag, while we’re still inside the html tags. So, a complete structured but blank web page would look like this:
Putting it all together
So, now we know almost everything about HTML file structure. Remember that page we’ve created in the last post to show you some basic HTML tags? That page was unstructured. Let’s take that page and organize those content with the structure we’ve learned today. Take a look at it and see how organized and readable it becomes after it is structured. And as always, Feel free to alter the codes and see what happens.
This is the standard structure that every single web page follows. While big and complex pages might contain a lot more tags and information in the major parts that we’ve discussed, But down to the skeleton, you’ll always find this simple structure in any web page exists on the web.
So, that is it. Now you’re capable of creating a real web page using a real structure that all the greatest web developers uses. Try creating some file on your computer and show it off to your friend. Show them what superpower you’ve gained.
Keep hacking with HTML file structure and we’ll learn about some major HTML tags in details soon. Till then, See ya!
This post was originally published here on UXArt blog. You can poke me here if you want to.