Руководство html для чайников - Insto.top - инструкции по эксплуатации и многое другое

HTML «коды».

HTML — это основа сегодняшнего интернета. Миллионы веб-сайтов вместе образовали интернет. HTML — это строительный блок всех этих сайтов. Двадцать лет назад, даже если вы просто хобби-блогер, вы должны были знать некоторые веб-коды, чтобы защитить себя или добавить простую функцию на свой сайт. Но сейчас существует так много редакторов и плагинов, что даже знание основ HTML больше не требуется.

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

А если вы столкнулись с тем, что содержимое сайта выглядит неправильно, знание HTML поможет вам вернуться на правильный путь.

Создаете свой первый сайт? Попробуйте использовать конструктор сайтов без кода
Для создания сайта с помощью такого конструктора, как Wix, вам не нужны навыки кодирования. Этот инструмент поставляется с 800+ дизайнерскими шаблонами и позволяет управлять сайтом с мобильного > Попробуйте Wix бесплатно, нажмите здесь

Что такое HTML?

HTML — это аббревиатура HYper TExt MArkupe Language. Это стандартный язык для тегов содержимого веб-браузеров.

HTML представлен «Элементами». Элементы также известны как «теги».

Зачем нужен HTML?

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

Вот почему вам нужен HTML.

Чувствителен ли HTML к регистру?

HTML не чувствителен к регистру. Но лучше всего писать HTML с правильным регистром.

Удобный для начинающих хостинг для размещения ваших HTML-проектов

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

Шаги по созданию вашего первого HTML-файла

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

Вам нужен редактор кода. Хороший редактор кода облегчит написание и организацию больших кодов. Я использую и рекомендую Notepad ++ (бесплатный и с открытым исходным кодом) для написания веб-языков. Есть и другие редакторы, которые вы можете использовать, например нижеlime Text, Atom и так далее

Вот что вам нужно сделать:

Установить редактор кода
Открыть его
Создать новый файл
Сохраните его как .html-файл

Содержание

Hello World
HTML-теги
Атрибуты HTML
Отображение кода: Блочный и встроенный
Двойная кавычка против одиночной кавычки
Семантический HTML против несемантического HTML
Проверка подлинности HTML
Дополнительные полезные ресурсы

1. Hello World!

Скопируйте и вставьте следующий код в новый HTML-файл и сохраните его. Теперь запустите его в своем веб-браузере.

HTML код

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Вывод:

Поздравляем! Вы создали свой самый первый HTML-файл. Вам не обязательно понимать его на данном этапе. Мы расскажем об этом в ближайшее время.

Понимание структуры HTML

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

Поэтому давайте попробуем понять это на примере кода «Hello World!». Следующие элементы являются обязательными для каждого HTML-файла.

= Это объявление браузеру о том, что это HTML-файл. Вы должны указать его перед тегом <html>.
= Это корневой элемент HTML-файла. Все, что вы пишете, проходит между а также .
= Это метаинформационная часть для браузера. Коды внутри этого тега не имеют визуального вывода.
= Это часть, которую отображает веб-браузер. На веб-сайте вы видите отображение кодов между а также .

2. HTML-теги

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

HTML-теги обычно имеют открывающий и закрывающий теги. Открывающий тег содержит ключевое слово, окруженное знаком «меньше» (<) и «больше» (>). Закрывающий тег имеет все то же самое, кроме дополнительной косой черты (/) после знака «меньше» (<).

Теги заголовков

Все теги заголовка идут между <head> и </head>. Они содержат метаинформацию для веб-браузера и поисковых систем. В основном они не имеют визуального вывода.

Тег Title определяет заголовок веб-страницы, который виден на вкладке браузера. Эта информация используется веб-программами и поисковыми системами. В каждом HTML-файле может быть только один заголовок.

Код:

<title>My first web page</title>

Тег заголовка отображается в верхней части браузера.

Тег ссылки связывает вашу HTML-страницу с внешними ресурсами. Его основное применение — связывание HTML-страницы с таблицами стилей CSS. Он является самозакрывающимся тегом и не нуждается в окончании </link>. Здесь rel означает связь с файлом, а src — источник.

Код:

<link rel="stylesheet" type="text/css" src="style.css">

Meta — это еще один самозакрывающийся тег, который предоставляет мета-информацию html-файла. Поисковые системы и другие веб-сервисы используют эту информацию. Мета-теги являются обязательным условием, если вы хотите оптимизировать свою страницу для поисковых систем.

Код:

<meta name="description" content="This is the short description that search engines show"

Тег script используется для включения сценария на стороне сервера или ссылки на внешний файл сценария. Он может иметь два атрибута в открывающем теге. Один из них — тип, а другой — источник (src).

Код:

<script type="text/javascript" src="scripts.js"></script>

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

Код:

<noscript><p>Alas! Scripts are disabled.</p></noscript>

Теги body

Все теги body находятся между <body> и </body>. Они имеют визуальный вывод. Именно здесь выполняется наибольшая работа. Вы должны использовать эти теги для структурирования основного содержимого страницы.

<h1 data-spai-bg-prepared=»1″></h1> к <h6 data-spai-bg-prepared=»1″></h6>

Это теги заголовков. Наиболее важный заголовок обозначается тегом <h1>, а наименее важный — <h6>. Вы должны использовать их в правильной иерархии.

Код:

<h1>This is  a h1 heading</h1>
<h2>This is  a h2 heading </h2>
<h3>This is  a h3 heading </h3>
<h4>This is  a h4 heading </h4>
<h5>This is  a h5 heading </h5>
<h6>This is  a h6 heading </h6>

Вывод:

Форматирование тегов

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

Код:

<p>You can highlight your text in many ways.</p>

<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>

Вывод:

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

Пример:

<!-- <p>You can comment out any code by surrounding them in this way</p> -->

Другие важные теги HTML

Анкор — это бесценный тег, который используется практически везде. Вы не увидите ни одной веб-страницы в Интернете без хотя бы одной анкорной ссылки.

Структура такая же. Имеет открывающуюся и закрывающуюся части . Текст, который вы хотите привязать, находится между и .

Есть некоторые атрибуты, которые определяют, куда и как переходит пользователь после нажатия на него.

ahref = »« = Определяет ссылку назначения. Ссылка находится между двойными кавычками.
target = «» = Определяет, будет ли URL открываться в новой вкладке браузера или в той же вкладке. target=»_blank» — для новой вкладки, а target=»_self» — для открытия в той же вкладке.
rel = «» = Определяет связь текущей страницы со связанной страницей. Если вы не доверяете связанной странице, вы можете определить rel=»nofollow».

Код:

<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google. 
It will open in a new tab.</p>

<p><a target="_self" href="https://www.google.com/">Click here</a>. 
It will also take you to Google but will open in the current tab.</p>

Вывод:

Тег изображения — еще один важный тег, без которого невозможно представить многие сайты, основанные на изображениях.

<img /> самозакрывающийся тег. Не требует традиционного закрытия вроде <img />. Есть некоторые атрибуты, которые вам необходимо знать, прежде чем вы сможете использовать его правильно.

src = »« = Это для определения исходной ссылки изображения. Поместите ссылку прямо между двойными кавычками.
alt = »« = Это означает альтернативный текст. Когда ваш образ не загружается, этот текст даст пользователям представление о недостающем изображении.
ширина = «» = Определяет ширину изображения в пикселях.
Высота = «» = Определяет высоту изображения в пикселях.

<p>This is the Googleplex in August 2014.</p>

<p>This image has a width of 500 pixels and a height of 375 pixels.</p>

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" 
alt="Google's Headquarter in August 2014" width="500" height="375" />

Вывод:

Советы: Хотите вставить интерактивное изображение? Оберните код изображения тегом. Посмотри, как получится.

или

Тег List предназначен для создания списка элементов. обозначает упорядоченные списки (нумерованный список) и обозначает неупорядоченные списки (маркеры).

Элементы списка внутри или помечен . li означает список. Вы можете иметь столько как хочешь внутри родителя или тег.

Код:

<p>This is an ordered list:</p>

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

<p>This is an unordered list:</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Вывод:

Тег Table предназначен для создания таблицы данных. Существует несколько тегов внутреннего уровня, которые определяют заголовки таблицы, строки и столбцы.

<table> </table> — это внешний родительский код. В этом теге <tr> обозначает строку таблицы, <td> — столбец таблицы, а <th> — заголовок таблицы.

Код:

<table>

<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>

<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>

<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>

<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>

</table>

Вывод:

Примечание: Значения внутри первого <tr> являются заголовками. Поэтому мы использовали <th>, который применяет эффект жирного текста к тексту.

Группировка таблиц

Вы можете расширить функциональность таблицы с помощью элементов группировки таблиц. Бывают случаи, когда необходимо создать большие таблицы, разбитые на несколько страниц.

Группируя данные таблицы в верхний, основной и нижний колонтитулы, вы можете разрешить независимую прокрутку. Верхний и основной колонтитулы будут печататься на каждой странице, на которую попала ваша таблица.

Тегами группировки таблиц являются:

= Для обертывания заголовков таблицы. Печатается на каждой разделенной странице таблицы.
= Для обертывания основных данных таблицы. Вы можете иметь столько <tbody>, сколько вам нужно. Тег <tbody> означает отдельную группу данных.
= Для обертывания информации нижнего колонтитула таблицы. Он печатается на каждой разделенной странице таблицы.

Обратите внимание, что использование группировки не является обязательным. Вы можете использовать ее, чтобы сделать большие таблицы более читабельными. Хотя некоторые специальные разработчики заметно используют эти теги в качестве селекторов CSS.

Вот как мы можем сгруппировать нашу примерную таблицу в <thead>, <tbody> и <tfoot>:

Код:

<table>

<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>

<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>

</table>

Вывод:

Элемент формы используется для создания интерактивных форм для веб-страниц. Форма HTML содержит несколько последовательных элементов. Например: <label>, <input>, <textarea> и т.п.

Атрибут action в форме очень важен. Он указывает на серверную или стороннюю страницу для обработки информации. Для обработки сначала необходимо определить метод.

Вы можете использовать один из двух методов, get или post. Get отправляет всю информацию в формате URL, а Post отправляет информацию в теле сообщения.

Существует множество типов ввода для форм. Самым основным типом ввода является текст. Он записывается как <input type=»text»>. Типы также могут быть radio, checkbox, email и так далее. В нижней части формы должен быть вход типа submit для создания кнопки отправки.

Тег <label> используется для создания меток и связывания их с входами. Правило связывания меток с входами заключается в том, чтобы иметь одинаковое значение в атрибуте for=»» метки и атрибуте id=»» входа.

Код:

<form action="#">

<label for="firstname">First Name: </label>

<input type="text" id="firstname"><br>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname"><br>

<label for="bio">Short Bio: </label>

<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>

<label>Gender:</label><br>

<label for="male">Male</label>

<input type="radio" name="gender" id="male"><br>

<label for="female">Female</label>

<input type="radio" name="gender" id="female"><br>

<input type="submit" value="Submit">

<form>

Вывод:

Примечание: Я указал действие на нулевое значение, потому что оно не было подключено к какому-либо серверу для обработки информации.

3. Атрибуты HTML

Атрибуты — это один из видов модификаторов для тегов HTML. Они добавляют новые конфигурации к тегам HTML.

Атрибут выглядит как attributename=» » и располагается в открывающем HTML-теге. Значение атрибута находится между двойными кавычками.

id = ”” и class = ””

id и class являются идентификаторами тэгов HTML. Различные имена назначаются различным HTML-элементам с использованием идентификаторов. Вы можете использовать один идентификатор класса для нескольких элементов. Но вы не можете использовать один идентификатор идентификатора для нескольких элементов.

Код:

<h1 class="heading">This is the main title</h1>

href = ””

href означает гипертекстовую ссылку. Они указывают пользователям ссылочные ссылки. Тег привязки использует href для отправки пользователей на целевой URL.

Код:

<a href="https://www.google.com/">Google</a>

src = ””

src обозначает источник. Он определяет источник носителя или ресурса, который вы используете в файле HTML. Источником может быть локальный или сторонний URL.

Код:

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt=””

alt означает альтернативу. Это резервный текст, который используется, когда элемент HTML не может загружаться.

Код:

<img  src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />

style = ””

Атрибут style часто используется в тегах HTML. Он выполняет работу CSS внутри HTML-тега. Свойства стиля заключаются в двойные кавычки.

Код:

<h2 style="color:red">This is another title</h2>

4. Отображение кода: Блочный и встроенный

Некоторые элементы всегда начинаются с новой строки и занимают всю доступную ширину. Это «блочные» элементы.

Например: <div data-spai-bg-prepared=»1″>, <p data-spai-bg-prepared=»1″>,</p><h1 data-spai-bg-prepared=»1″>-</h1><h6 data-spai-bg-prepared=»1″>формы и т. д.</h6></div>

Некоторые элементы занимают только необходимое пространство и не начинаются с новой строки. Это «встроенные» элементы.

Например: <a>, <span>, <br>, <strong>, <img> и т.п.

Вам нужно будет отличать блочные элементы от встроенных, когда вы будете использовать стили CSS. В данном руководстве по HTML это не очень нужно.

Код:

<!DOCTYPE html>

<html>

<head>

<title>My first web page</title>

</head>

<body>

<h2>This is a H2 heading. It has Block display.</h2>

<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>

</body>

</html>

Вывод:

5. Двойные и одинарные кавычки в HTML

Этот вопрос очень очевиден. Что вы должны использовать в HTML? Одинарную или двойную кавычку? Кажется, что люди используют обе, но какая из них правильная?

В HTML одинарные и двойные кавычки одинаковы. Они не имеют никакого значения в выводе.

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

6. Семантический HTML против несемантического HTML

Семантический HTML — это последняя версия HTML, которая также называется HTML5. Это развитая версия несемантического HTML и XHTML.

Почему HTML5 лучше? В предыдущих версиях элементы HTML определялись идентификаторами / именами классов. Например: считалась статьей.

В HTML5 Тег представляет собой статью без идентификатора идентификатора / класса.

Благодаря HTML5 поисковые системы и другие веб-приложения теперь могут лучше понимать веб-страницу. Семантические веб-сайты оказались лучше для SEO.

Вот список некоторых популярных тегов HTML5:

= Это нужно для размещения основного контента, который вы хотите показать зрителям.
= Это предназначено для маркировки части заголовка содержимого, например, метаданных заголовка или автора.
= Определяет пользовательский или независимый контент для ваших зрителей.
= Он может группировать любой код, такой как верхний, нижний колонтитул или боковая панель. Вы можете сказать, что это семантическая форма div.
= Здесь находится контент нижнего колонтитула, отказ от ответственности или авторский текст.
= Он позволяет вставлять аудиофайлы без каких-либо проблем с плагинами.
= Как и <audio>, вы можете вставлять видео с помощью этого тега без проблем с плагином.

Простая структура HTML5 будет выглядеть так:

<!DOCTYPE html>
<html>
                <head>
                                <meta charset="utf-8" />
                                <title>My first web page</title>
                </head>

                <body>
                                <header>
                                               <nav>
                                                                <ul>
                                                                                <li>Menu 1</li>
                                                                                <li>Menu 2</li>
                                                                </ul>
                                                </nav>
                                </header>
                                <main>
                                                <article>
                                                               <header>
                                                                                <h2>This is the title of the article</h2>
                                                                                <p>Posted by John Doe</p>
                                                                </header>
                                                                <p>Content of the article goes here</p>
                                                </article>
                                </main>
                                <footer>
                                               <p>Copyright 2017 John Doe</p>
                                </footer>
                </body>
</html>

7. Проверка HTML

Большинство веб-специалистов проверяют свой код после его завершения. Почему необходимо проверять код, если он работает нормально?

Есть две возможные причины для проверки ваших кодов:

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

W3C Validator является самым популярным сервисом для проверки кодов. У них есть несколько методов проверки кодов. Вы можете загрузить файл или напрямую ввести код в механизм проверки.

Дополнительные полезные ресурсы

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

Вот некоторые полезные ресурсы для вас:

Учебники W3Schools HTML
Электронная книга TutorialsPoint
HTML-руководство Code Academy
Code Burst Let’s Make a [HTML] веб-сайт
Шпаргалка Mozila по HTML

Часто задаваемые вопросы по HTML

Легко ли освоить HTML новичкам?

Да, HTML легко изучить. Вы можете создать базовый HTML-файл с помощью блокнота на вашем компьютере; или вы можете использовать HTML-редактор для написания и лучшей организации более длинных страниц.

Как я могу самостоятельно обучиться HTML?

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

Что такое HTML простыми словами?

HTML — это аббревиатура от языка разметки гипертекста. Для неспециалистов HTML можно понять как строительный блок веб-сайтов. Это стандартный компьютерный язык, используемый для структурирования веб-страницы и ее содержимого.

Стоит ли изучать HTML в 2022 году?

Да, HTML является самым распространенным языком разметки и имеет наибольшее признание веб-браузеров. Он остается важнейшей составной частью (наряду с CSS и JavaScript) большинства веб-сайтов в Интернете. Если вы планируете стать веб-разработчиком или управлять веб-сайтом, лучше всего, если вы будете обладать базовыми знаниями HTML.

Создание HTML документов

Для того, чтобы создать HTML документ необходимо:

Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
Набрать произвольный текст и разметить его HTML тегами;
Cохранить файл с расширением .htm или .html.

Базовый документ HTML

Ниже приведен в своей простейшей форме пример HTML-документа:

Пример HTML:

Попробуй сам

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
  <body>
    <h1>Это заголовок</h1>
    <p>Это параграф.</p>
  </body>
</html>

Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

HTML теги

Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.

	Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа.

Рассмотренный пример HTML-документа использует следующие теги:

Название тега	Описание
<!DOCTYPE…>	Это инструкция для веб-браузера о том, на какой версии HTML написана страница.
<html>	Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ
<head>	Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д.
<title>	Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке.
<meta>	Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа.
<body>	Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д.
<h1>	Этот тег представляет собой заголовок.
<p>	Этот тег представляет собой абзац.

Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

Структура HTML-страницы

Ниже приведена визуализация структуры HTML-страницы:

Объявление doctype на самой верхней строчке:
<!DOCTYPE…>

Корневой элемент HTML-страницы:
<html>

Контейнер <head> содержит информацию для браузеров и поисковых систем:
<head>

<title>Заголовок окна веб-страницы</title>

</head>

Видимое содержимое страницы:
<body>

<h1>Это заголовок.</h1>

<p>Это абзац.</p>

</body>

</html>

The <!DOCTYPE> декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Раздел HEAD.

Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.

Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>

	Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы.

Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы.

С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

	В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала.

Источник

If you want to build a website, the first language that you need to learn is HTML.

In this article, we are going to go through the basics of HTML. At the end, we are going to build a basic website using only HTML.

Here’s a video you can watch if you want to supplement this article:

If you prefer video, you can watch it here

What Is HTML?

HTML, which stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What is HTML?

What Are HTML Elements?

HTML elements

The element usually starts with an opening tag, which consists of the name of the element. It’s wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.

Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element’s name.

Everything inside the opening and closing tags is the content.

But not all elements follow this pattern. We call those that don’t empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

In the example above, the <img> element only consists of one tag that does not have any content. This element is used to insert an image file from Unsplash in the document.

How to Nest HTML Elements

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Elements can be placed inside other elements. This is called Nesting. In the example above, inside the <div> element we have an <h4> element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are 3 <li> or list item elements.

Basic nesting is quite straight-forward to understand. But when the page gets larger, nesting can become complicated.

Therefore, before working with HTML, think about the layout structure you would like to have. You can draw it out on a piece of paper or in your mind. It will help a lot.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

<img src="https://images.unsplash.com/photo" width="50">

In the example above, the <img> element has 2 attributes: src or source to specify the path of the image, and width to specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

There is a space between attributes and the element name
Attributes are added in the opening tag
Elements can have many attributes
Attributes usually have a name and a value: name=“value”

But not every attribute has the same pattern. Some can exist without values, and we call them Boolean Attributes.

<button onclick=“alert('Submit')" disabled>Button</button>

In this example, if we want to disable the button, all we have to do is pass a disabled attribute without any values. This means that the presence of the attribute represents the true value, otherwise, the absence represents the false value.

Common HTML elements

There are in total more than 100 elements. But 90% of the time you will only use around 20 of the most common. I have put them into 5 groups:

Section elements

  <div>, <span>, <header>, <footer>, <nav>, <main>, <section>

These elements are used to organize the content into different sections. They are usually self-explanatory, for example, <header> usually represents a group of the introduction and navigation section, <nav> represents the section that contains navigation links, and so on.

Text content

  <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

These elements are used to organize content or text blocks. They are important to accessibility and SEO. They tell the browser the purpose or structure of the content.

Forms

  <form>, <input>, <button>, <label>, <textarea>

These elements can be used together to create forms that users can fill out and submit. Forms might be the trickiest part of HTML.

Images and Links

  <img>, <a>

These elements are used to insert an image or create a hyperlink.

Others

  <br>, <hr>

These elements are used to add a break to the webpage.

You can find all the elements on developer.mozilla.org. But for beginners, you just need to know the most common ones.

Block-level vs inline HTML elements

By default, an element can be either block-level or an inline element.

Block-level elements are the elements that always start on a new line and take up the full width available.

Inline elements are the elements that do not start on a new line and it only take up as much width as necessary.

Block level vs. Inline HTML elements

Two elements that represent block-level and inline elements, respectively, are <div> and <span>. In this example, you can see that the <div> elements takes 3 lines, whereas the <span> element only takes up 1 line.

But the question is: how do we know which ones are block-level elements and which ones are inline elements? Well, unfortunately you need to remember them. The easiest way is to remember which are inline elements – and the rest are block elements.

If we look back at the most common HTML elements, inline elements include: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.

<p>This is a paragraph.</p>

<!-- <p>I am not showing.</p> -->

The purpose of comments is to include notes in the code to explain your logic or simply to organize your code.

HTML comments are wrapped in the special markers:  and they are ignored in the browser.

How to use HTML entities

What if you want to show the text: the <p> tag defines a paragraph., but the browser interprets <p> as an opening tag for a new element? In this case, we can use HTML entities like in the following example:

<p>the <p> tag defines a paragraph.</p>

<p>the &lt;p&gt; define a paragraph.</p>

How to use emoji in HTML

In the modern web, we can display emoji in HTML pretty easily, like this: 👻

<p>😀 Grinning Face.</p>

<p>🎂 Birthday</p>

Common beginner mistakes in HTML

1. Tags/Element names

Tags/Element names are cAse-inSensitive. This means that they can be written in lowercase or uppercase, but it is recommended that you write everything in lowercase: <button> not <ButTon>.

2. Closing tag

Failing to include a closing tag is a common beginner error. Therefore, whenever you create an opening tag, immediately put in a closing tag.

3. Nesting

This is wrong:

<div>Div 1 <span> Span 2 </div></span>

The tags have to open and close in a way that they are inside or outside one another.

4. Single quotes and Double quotes

This is wrong:

<img src="https://images.unsplash.com/'>

You cannot mix single quotes and double-quotes. You should always use double quotes and use HTML entities if needed.

How to build a simple website with HTML

Individual HTML elements are not enough to create a website. So let’s see what more we need to build a simple website from scratch.

How to create an HTML document

First, let’s open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html.

In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

This is the minimal code that an HTML document should have to make up a website. And here we have:

<!DOCTYPE html>: First we have Doctype. For some weird historical reason in HTML we have to include the doctype for everything to work correctly.
<html lang="en"></html>: The <html> element wraps all the content on the page, also known as the root element. And we should always include the lang attribute to declare the language of the page.
<head></head>: The <head> element is a container for everything you want to include, but not content that you show to your users.
<meta charset="UTF-8" />: The first meta element is used to set the character set to be UTF-8, which includes most characters from written languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: The second meta element specifies the browser viewport. This setting is for a mobile-optimized site.
<title>Document</title>: This is the <title> element. It sets the title of the page.
<body></body>: The <body> element contains all the content on the page.

How to build a pancake recipe page

Alright, now that we have the starter code, let’s build a pancake recipe page. We are going to use the content from this AllRecipes Page.

First, let’s give the <title> element content of the pancakes recipe. You will see the text on the web page tab change. In the <body> element, let’s create 3 elements: <header>, <main> and <footer> representing 3 sections.

In the header, we want to have the logo and the navigation. Therefore, let’s create a div with the content ALL RECIPE for the logo.

For the navigation, let’s use the <nav> element. Within the <nav> element, we can use <ul> to create an unordered list. We want to have 3 <li> elements for 3 links: Ingredients, Steps, and Subscribe. The header code looks like this:

...
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredients</a></li>
          <li><a href="#steps">Steps</a></li>
          <li><a href="#subsribe">Subscribe</a></li>
        </ul>
      </nav>
    </header>
...

2. Build the Main Section

In the main section, first, we want to have a title and an image. We can use h1 for the title and <img> for the image (we can use an image from Unsplash for free):

...
    <main>
      <h1>Good Old Fashioned Pancakes</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
        alt="pancake"
        width="250"
      />
    </main>
...

Next, we want to list all the ingredients. We can use <ol> to create an ordered list and <input type="checkbox" /> to create a checkbox.

But before that, we can use <h2> to start a new content block. We also want to add the id attribute for <h2> so that the link in the navigation knows where to go:

...
    <main>
    ...
      <h2 id="ingredients">Ingredients</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
        <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
        <li><input type="checkbox" /> 1 teaspoon salt</li>
        <li><input type="checkbox" /> 1 tablespoon white sugar</li>
        <li><input type="checkbox" /> 1 ¼ cups milk</li>
        <li><input type="checkbox" /> 1 egg</li>
      </ol>
    </main>
...

After the ingredients, we want to list all the steps. We can use <h4> for the step heading and <p> for the step content:

...
    <main>
    ...
      <h2 id="steps">Steps</h2>
      
      <h4>Step 1</h4>
      <p>
        In a large bowl, sift together the flour, baking powder, salt and sugar.
        Make a well in the center and pour in the milk, egg and melted butter;
        mix until smooth.
      </p>
      
      <h4>Step 2</h4>
      <p>
        Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
        or scoop the batter onto the griddle, using approximately 1/4 cup for
        each pancake. Brown on both sides and serve hot.
      </p>
    </main>
...

Alright, now that we are done with the main section, let’s move on to the footer section.

In the footer, we want to have a subscribe form and copyright text.

For the subscribe form, we can use the <form> element. Inside it, we can have an <input type="text"> for text input and a <button> for the submit button.

For the copyright text, we can simply use a <div>. Notice here, we can use the HTML entity $copy; for the copyright symbol.

We can add <br> to add some space between the subscribe form and the copyright text:

...
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
...

Alright now we are done! Here is the full code for reference:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pancake Recipe</title>
  </head>
  <body>
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredients</a></li>
          <li><a href="#steps">Steps</a></li>
          <li><a href="#subsribe">Subscribe</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Good Old Fashioned Pancakes</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        alt="pancake"
        width="250"
      />
      <h2 id="ingredients">Ingredients</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
        <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
        <li><input type="checkbox" /> 1 teaspoon salt</li>
        <li><input type="checkbox" /> 1 tablespoon white sugar</li>
        <li><input type="checkbox" /> 1 ¼ cups milk</li>
        <li><input type="checkbox" /> 1 egg</li>
      </ol>
      <h2 id="steps">Steps</h2>
      <h4>Step 1</h4>
      <p>
        In a large bowl, sift together the flour, baking powder, salt and sugar.
        Make a well in the center and pour in the milk, egg and melted butter;
        mix until smooth.
      </p>
      <h4>Step 2</h4>
      <p>
        Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
        or scoop the batter onto the griddle, using approximately 1/4 cup for
        each pancake. Brown on both sides and serve hot.
      </p>
    </main>
    <hr />
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
  </body>
</html>

Conclusion

You can build a simple website with just HTML. But to be able to build beautiful and functional websites, you need to study CSS and JavaScript.

You can follow me on social media or Youtube for future updates on these topics. But meanwhile, you can check out the freeCodeCamp Curriculum to practice HTML by solving small tasks.

Otherwise, stay happy coding and see you in future posts 👋.

__________ 🐣 About me __________

I am the founder of DevChallenges
Subscribe to my Channel
Follow my Twitter
Join Discord

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

Основы HTML для начинающих — в этой статье я расскажу об основах языка гипертекстовой разметки HTML. Статья предназначена для начинающих: школьников и студентов начальных курсов. Первая статья из серии самоучитель HTML.

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для создания веб-страниц.

Гипертекст — текст связанный с другим текстом при помоги гиперссылок (или просто ссылок).

Гипертекстовые документы открываются в браузере.

Содержание:

История развития HTML
Версии HTML
Структура и элементы
Элемент <html>
Элемент <head>
Элемент <title>
Элемент <body>
Атрибуты тегов
Элемент meta
Description
Keywords
Http-equivs
Charset
Link
Script
Style
Отношения элементов
Как это работает
Doctype

В 1986 году Международной организацией по стандартизации (ISO) был принят стандарт который назвали «Standard Generalized Markup Language» — SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов. Он соответствовал международному стандарту ISO 8879.

Суть состояла в том, что бы создать разметку текста которую без проблем можно было распознать на любом компьютере (что было очень важно в те времена).

Если вы знаете основы компьютерных сетей, то SGML можно сравнить с моделью OSI. SGML это базовый принципы которые легли в основу HTML так же как модель TCP/IP основывается на модели OSI.

В 1991 году на британский ученый Тимо Бернерс Ли разрабатывает на основе SGML язык гипертекстовой разметки который получает название HyperText Markup Language (HTML).

Тим Бернерс Ли

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

Изначально HTML соответствовал особенностям и идеологии SGML. В 1993 году появилась версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не были рекомендованы к использованию, так как указывали на физические параметры предоставления документа. Этот факт, в свою очередь, противоречил идеологии SGML.

Вся HTML- разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ”в графических браузерах действие этого тега может передаваться жирным начертанием” (речь идет о теге <b>, одном из первых тегов).

В это время был единственный браузер – Mosaic, который поддерживал графические возможности. Этот браузер был разработан в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications — NCSA), там же, кстати, была разработана технология WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

Браузер Mosaic

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства — иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения, принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.

Версии HTML

HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года);
HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
HTML5— 28 октября 2014 года;
HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года.
HTML 5.2 был представлен 14 декабря 2017 года.
HTML 5.3 был представлен 24 декабря 2018 года.

Структура и основные элементы

Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки <...>.

Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом.

Например:
<html> ... </html>

Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).

Теги могут быть вложенными друг в друга.

Например:
<html> <head> ... </head> </html>

Редактор HTML

Теги прописываются в редакторе. Простейший пример редактора — блокнот. Но я советую пользоваться редактором Notepad++, скачать его можно на официальном сайте, устанавливается он в два клика.

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

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

Основные элементы web-страницы

Проста веб-страница состоит из «базового» набора тегов. Это следующие теги:

<html> — тег указывает что это HTML код.
<head> (голова — в переводе с английского) — тег содержащий техническую информацию, например заголовок страницы, подключаемы стили и скрипты, мета-информацию и так далее.
<title> (заголовок — в переводе с английского) — тег содержит заголовок HTML-документа который отображается во вкладке браузера.
<body> (тело — в переводе с английского) — «тело» или основное содержимое документа которое видит пользователь.

Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Структура простого HTML документа

Давайте наберем в редакторе следующий код:

<html>
<head>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.

Откройте файл в браузере и посмотрите результат.

Рассмотрим основные элементы подробнее.

Элемент <html>

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

Помните, в начале статьи я писал что теги имеют атрибуты со значениями? Так вот, атрибут это определенное свойство тега имеющее значение. Атрибут со значением прописывается после тега.

Атрибуты элемента <html>.

Атрибут	Описание	Возможные значения
`manifest`	Указывает путь к кешу манифеста.	URL.

Манифест (manifest) представляет из себя текстовый файл со списком ресурсов для кеширования. Я знаю, сейчас ничего не понятно. Про манифест можно нет запоминать. дальше я приведу более понятный пример.

Прописываются атрибуты так:

<html manifest = "URL">

, где:

html — тег;
manifest — атрибут;
URL — значение атрибута.

Элемент <head>

Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая», называть ее можно как угодно, но по сути она нужна для:

Роботов поисковых систем.
Стилизации и расширения функциональности сайта.
Указания, с помощью тега <title> заголовка документа в браузере.

Элемент <title>

Как я уже говорил, тег <title> используется для того, что бы указать название web-страницы которое будет отображаться в закладке браузера.

Элемент <body>

Между тегами <body> и </body> заключается все содержимое веб-страницы которое видит пользователь.

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

Теперь, когда у нас есть понимание основ HTML в общих чертах, давайте разберемся с атрибутами тегов.

Возьмем тег <p> — параграф. По сути это тег в который вкладывают одно или несколько предложений. Один из глобальных атрибутов — style.

Style — стиль, то есть с помощью этого атрибута мы можем изменять стиль текста в теге <p>. Разберемся на примере.

<p style="color:blue;">Какой-то текст...</p>

Результатом выполнения этого кода будет:

Какой-то текст…

Я повторюсь, но все же, в этом примере:

p — тег;
style — атрибут тега p;
color:blue — значение атрибута style тега p.

Тег meta (или мета-тег) является не обязательным. Но если вы хотите продвинуть свою веб-страницу или сайт в поисковых системах, то указывать его нужно.

С помощью тега meta можно указать:

Описание страницы.
Ключевые слова.
Кодировку.
Возможность индексирования.
Время перезагрузки страницы.

Meta тег description

Meta тег description указывает описание страницы.

<meta name="description" content="Описание содержимого вашей web-страницы">

Оптимальная длинна meta-тега description составляет 160-180 символов. Тег должен содержать конкретное описание страницы, желательно делать описания уникальными, но не обязательно если в таком случае описания искажают содержание страницы.

Meta тег keywords

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

<meta name="keywords" content="ключевые слова">

Meta тег robots

Мета-тег robots содержит инструкции для роботов поисковых систем. Первая задача мета-тега — указать поисковым системам на возможность индексации веб-страницы. То есть можно индексировать эту страницу (index) или нельзя (noindex). Вторая задача — указать можно ли переходить по ссылкам (follow) или нельзя (follow).

Пример.

<meta name="robots" content="index, follow">

В данном случае роботам поисковых систем разрешено индексировать страницу и переходить по ссылкам.

Meta http-equiv

Этот meta-тег позволяет перезагружать страницу (meta http-equiv=»refresh») и перенаправлять пользователя на другую страницу (content=»0; url=https://abuzov.com/»).

Например.

<meta http-equiv="refresh" content="5; url=https://abuzov.com/">

Этот код означает, что через 5 секунд вы будете перенаправлены на главную страницу моего сайта.

Meta charset

При помощи meta charset мы устанавливаем кодировку документа. Если кодировку указать неправильно появиться, так называемые, «кракозябры».

Стандартная кодировка для HTML-документа это UTF-8.

<meta charset="utf-8">

Эта кодировка включает в себя наибольшее количество языков.

Тег style

Элемент style используется для оформления сайта. Он указывает что код между тегами <style>…</style> является css кодом. Тег <style> располагается в теге <head>.

Подключение стилей будет рассмотрено отдельно. Давайте допишем небольшой код в наш, уже созданный файл. Например, заголовок будет красным, а текст синим курсивом.

<html>
<head>
<style>
h1{color:red;}
p {color:blue;font-style:italic;}
</style>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Наберите код в редакторе и сохраните под именем html-2.html. Так же вы можете скачать этот файл. Посмотрите результат в браузере.

Тег link

Link подключает внешние файлы. В предыдущем примере мы прописали стили непосредственно в HTML-документе. Но что если нам нужен сайт состоящий из тысячи страниц? Прописывать код в каждом крайне затруднительно. Поэтому создается отдельный файл (обычно его называют style.css) который подключается веб-странице.

Код выше можно переписать следующим образом:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

А файл style.css будет выглядеть следующим образом:

h1{color:red;}
p {color:blue;font-style:italic;}

При этом мы избавляемся от тега <style>.

Атрибуты тега link

Атрибут	Описание	Возможные значения
`href`	Место расположения ресурса.	URL.
`rel`	Атрибут, определяющий отношение между веб-страницей которая ссылается и веб-страницей на которую ссылаются.	`stylesheet`: ссылка на файл стилей. `alternate`: ссылка на альтернативную версию текущей web-страницы. `author`: ссылка на контакты автора текста. `help`: ссылка на справку для текущей страницы. `icon`: ссылка на фавиконку. `license`: лицензия и авторские права на веб-страницу. `next`: значение указывает на то, что страница находится в последовательности, а связанная страница является следующей страницей в последовательностиe. `prefetch`: связанный ресурс должен быть кэширован. `prev`: значение указывает на то, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности `search`: средство поиска, которое можно использовать для поиска текущих и связанных документов.
`type`	Тип документа, на который ведет ссылка.	MIME тип.
`media`	Тип (или типы) мультимедиа, к которому должен применяться связанный ресурс.	Медиа-запрос, например screen, print, или screen and max-width:640.
`hreflang`	Язык документа на который ведет ссылка.	Языковой код, например `en` (Английский) или `ru` (Русский).
`sizes`	Размер иконки, используется когда ссылка ведет на фавиконку `rel="icon"`.	[ширина]x[высота], например `32x64`.
`crossorigin`	Используется вместе с JavaScript, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками.	`anonymous` `use-credentials`

Фавиконка (favicon) это файл, рисунок, имеющий расширение .ico который отображается на вкладке браузера перед заголовком (тег <title>).

Favicon сайта abuzov.com

Тег script

Элемент <script> подключает к HTML-документу различные скрипты, например JavaScript. Скрипты, как в случае с тегом <style> могут находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.

Атрибуты тега script

Атрибут	Описание	Значение
`src`	Расположение файла со скриптами или сценариями.	URL.
`type`	Тип используемого сценария.	MIME тип. По умолчанию это `text/javascript`.
`charset`	Кодировка символов внешнего скрипта. Используется только при наличии `src` .	Объявление кодировки символов, например`UTF-8`.
`async`	Указывает, что внешний сценарий должен выполняться асинхронно. Используется только при наличии `src` .	Нет.
`defer`	Указывает, что внешний сценарий следует отложить и выполнить только после анализа страницы. Используется только при наличии `src` .	Нет.
`crossorigin`	Определяет, как обрабатываются запросы на совместное использование ресурсов между источниками.	`anonymous` `use-credentials`

Отношения между тегами

Очень важная тема которую нужно понять. Тут нет ничего сложного. Давайте разбираться.

Возьмем наш последний код.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Изобразим его в виде дерева.

Мы видим, что элементы этого дерева взаимосвязаны, взаимосвязи между тегами бываю следующих типов:

Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что <html> это предок для всех тегов, а <head> является предком для <link>, <script> и <title>. Аналогично <body> это предок по отношению к <h1> и <p>.
Потомок. Потомком называют элемент вложенный в другой. То есть <body> — потомок <html>, а <h1> потомок <body>.
Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их. <html> является родителем только для тегов <head> и <body>.
Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег <h1> является дочерним элементом тега <body>.
Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги <head> и <body> на рисунке — сестринские элементы, так же как и теги <h1> с <p>.

Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.

Расшифровка и перевод тегов

Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.

Тег	Значение	Перевод
<html>	Hyper Text Markup Language	Язык гипертекстовой разметки
<head>	Head	Голова (документа)
<body>	Body	Тело (документа)
<title>	Title	Название, заголовок
<h1>	Heading 1…6	Заголовок с 1 по 6 уровень
<p>	Paragraph	Параграф
<link>	Link	Ссылка
<style>	Style	Стиль

Как это работает?

Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?

Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.

Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.

После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.

Элемент DOCTYPE

В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.

DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

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

Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать <!DOCTYPE html>.

Типы синтаксиса:

Strict — строгий.
Transitional — переходный.
Frameset — набор фреймов.

Это типы для HTML 4.01.

Для строгого типа указываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU" "http://www.w3.org/TR/html4/strict.dtd">

Для переходного:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU" "http://www.w3.org/TR/html4/loose.dtd">

Для набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd">

Более старые версии HTML сейчас практически не используются.

На этом все, теперь вы знаете основы HTML.

Источник

Время на прочтение
9 мин

Количество просмотров 68K

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Под катом — разбор каждой строчки

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

Разбор каждой строки

Общее

<!DOCTYPE html>

Для олдскульщиков, нам не нужны никакие другие doc types, которые вы выучили наизусть. Этот будет единственным и неповторимым. Несмотря на то, что сегодня нет других реальных вариантов, он должен присутствовать по соображениям совместимости.

<html lang="en" class="no-js">

Атрибут 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 для русского.

lang Language tag syntax MDN

Я использую класс no-js в случае, если я хочу применить стиль к определенным компонентам в браузерах, которые не поддерживают JavaScript. Этот класс будет удален в браузерах, поддерживающих и выполняющих современный JavaScript.

<meta charset="UTF-8">

Этот атрибут объявляет кодировку символов документа. Если оставить его выключенным, определенные символы могут отображаться некорректно в некоторых браузерах.

Вот как Safari отображает мое имя с метатегом charset и без него.

Manuel Matuzović — Manuel MatuzoviÄ‡

Он должен стоять перед элементом title, чтобы избежать неправильных символов в заголовке страницы.

<meta name="viewport" content="width=device-width, initial-scale=1">

Мета-тег области просмотра позволяет нам изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана. initial-scale управляет уровнем масштабирования при первой загрузке страницы.

Я не уверен, что установка initial-scale = 1 по-прежнему необходима. Кажется, я где-то читал, что это нужно только для Safari на <iOS 9, но я больше не могу найти эту статью.

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

Параметр shrink-to-fit = no больше не нужен, начиная с iOS 9.3.

Time to remove the shrink-to-fit=no band aid?
Using the viewport meta tag to control layout on mobile browsers

Заголовок, описание, соцмедиа

<title>Unique page title - My Site</title>

Уникальное название страницы. Он отображается во многих местах, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.

Provide informative, unique page titles
Accessible page titles in a Single Page App

<script type="module">
  document.documentElement.classList.remove('no-js');
  document.documentElement.classList.add('js');
</script>

Я режу горчицу при поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что это браузер, который поддерживает современный JavaScript, такой как модули, синтаксис ES 6, выборка и т. Д. Я отправляю большую часть JS только этим браузерам и использую класс js в CSS, если стили компонента отличается, когда JS активен.

<link rel="stylesheet" href="/assets/css/styles.css">

CSS для сайта.

<link rel="stylesheet" href="/assets/css/print.css" media="print">

Print CSS для сайта.

I totally forgot about print style sheets

<meta name="description" content="Page description">

Уникальное описание страницы, например, отображаемое на страницах результатов поиска. Он может быть любой длины, но поисковые системы усекают фрагменты до ~ 155–160 символов.

<meta property="og:title" content="Unique page title - My Site">

Уникальное название страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.

<meta property="og:description" content="Page description">

Уникальное описание страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.

<meta property="og:image" content="image.jpg">

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

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

Вот как это изображение будет выглядеть в Twitter и WhatsApp.

Правила для Twitter: изображения для этой Card поддерживают соотношение сторон 2:1 с минимальными размерами 300×157 или максимальными 4096×4096 пикселей. Размер изображений не должен превышать 5 МБ. Поддерживаются форматы JPG, PNG, WEBP и GIF.

Twitter Developer Docs: Cards

<meta property="og:image:alt" content="Image description">

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

<meta property="og:locale" content="en_GB">

Необязательное свойство Open Graph, но рекомендуется. Он определяет естественный язык страницы.

<meta property="og:type" content="website">

Тип контента, которым вы делитесь, например website, article, или video.movie. Обязательное свойство для допустимых страниц Open Graph.

<meta property="og:url" content="https://www.mywebsite.com/page">

Канонический URL страницы. Обязательное свойство для допустимых страниц Open Graph.

The Open Graph protocol

<meta name="twitter:card" content="summary_large_image">

Этот метатег определяет, как будут выглядеть карточки при публикации в Twitter. Есть два варианта для веб-сайтов: summary и summary_large_image.

summary_large_image

summary

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

Иконки и адресная строка

<meta name="theme-color" content="#FF00FF">

theme-color предоставляет браузерам цвет CSS для настройки отображения страницы или окружающего пользовательского интерфейса.

Поддерживаемые браузеры: Chrome, Brave и Samsung Internet на Android.

<link rel="icon" href="/favicon.ico">

Значок 32 × 32 пикселя для устаревших браузеров. Он должен находиться в корне вашего веб-сайта.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Большинство современных браузеров поддерживают значки SVG. Преимущества favicon.svg в том, что он выглядит лучше при масштабировании, потому что это векторное, а не растровое изображение, и мы можем добавлять HTML и CSS в SVG, что означает, что мы можем поддерживать темный режим.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>
  path {
    fill: #153a51;
  }

  @media (prefers-color-scheme: dark) {
    path {
      fill: #FFFFFF;
    } 
  }
</style>
<path d="M397.8 117.9v290h-76.4V273.5h-.8l-46.4 97.2h-36.8l-46-96.8h-.8v134h-76.4v-290h80.4l60.8 150.8h.8l61.2-150.8h80.4z"/>
</svg>

Фавикон на моем сайте в светлом режиме.

Фавикон на моем сайте в тёмном режиме.

prefers-color-scheme in SVG favicons for dark mode icons

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Значок 180 × 180 пикселей устройства Apple будут использовать, если вы добавите страницу на главный экран.

<link rel="manifest" href="/my.webmanifest">

Для устройств Android нам нужен файл .webmanifest, который предоставляет браузерам информацию о том, где расположены значки, необходимые для домашнего экрана и заставки для PWA.

{
    "name": "matuzo.at",
    "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

How to Favicon in 2021: Six files that fit most needs

<link rel="canonical" href="https://www.mywebsite.com/page">

Используйте элемент canonical ссылки, чтобы предотвратить проблемы SEO, вызванные дублированием контента, указав исходный источник для страниц, доступных по нескольким URL-адресам.

<script src="/assets/js/xy-polyfill.js" nomodule></script>

Если я хочу обслуживать JavaScript, предназначенный специально для браузеров, не поддерживающих модули, я добавляю атрибут nomodule, который заставляет скрипт запускаться только в устаревших браузерах, а именно в IE 11.

<script src="/assets/js/script.js" type="module"></script>

JavaScript с type = "module" будет работать только в браузерах, поддерживающих модули, это противоположно атрибуту nomodule.

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

Штуковины, которые нам больше не нужны

<meta name="msapplication-TileColor" content="#efefef">

По словам Андрея Ситника, для последних версий Windows этого больше не требуется.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

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

Начиная с IE11, режим Edge является предпочтительным режимом документа; он представляет собой высочайшую поддержку современных стандартов, доступных для браузера.

Compatibility changes in IE11

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#36b1bf">

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

Другие примечательные элементы

<link rel="preload" href="font.woff2" as="font" type="font/woff2">

Используйте preload, если вы хотите, чтобы определенные ресурсы были доступны на более раннем этапе жизненного цикла страницы.

Preloading content with rel=«preload»
Preload, Prefetch And Priorities in Chrome
Prefetching, preloading, prebrowsing

<link type="application/atom+xml" rel="alternate" href="/feed.xml" title="My Blog - Manuel Matuzovic">

RSS-канал для вашего сайта.

<meta name="format-detection" content="telephone=no">

Отключите автоматическое определение и форматирование телефонных номеров.

<meta name="twitter:dnt" content="on">

Запретите Twitter использовать информацию о вашем сайте в целях персонализации.

Облачные серверы от Маклауд быстрые и безопасные.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник

Читайте также

Что такое HTML?

Зачем нужен HTML?

Чувствителен ли HTML к регистру?

Удобный для начинающих хостинг для размещения ваших HTML-проектов

Шаги по созданию вашего первого HTML-файла

Содержание

1. Hello World!

HTML код

Вывод:

Понимание структуры HTML

2. HTML-теги

Теги заголовков

Теги body

<h1 data-spai-bg-prepared=»1″></h1> к <h6 data-spai-bg-prepared=»1″></h6>

Форматирование тегов

Другие важные теги HTML

или

Группировка таблиц

3. Атрибуты HTML

id = ”” и class = ””

href = ””

src = ””

alt=””

style = ””

4. Отображение кода: Блочный и встроенный

5. Двойные и одинарные кавычки в HTML

6. Семантический HTML против несемантического HTML

Вот список некоторых популярных тегов HTML5:

7. Проверка HTML

Дополнительные полезные ресурсы

Часто задаваемые вопросы по HTML

Читайте также

Создание HTML документов

Базовый документ HTML

Пример HTML:

HTML теги

Структура HTML-страницы

The <!DOCTYPE> декларация

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

Раздел HEAD.

What Is HTML?

What Are HTML Elements?

How to Nest HTML Elements

What are HTML Attributes?

Common HTML elements

Section elements

Text content

Forms

Images and Links

Others

Block-level vs inline HTML elements

How to use HTML entities

How to use emoji in HTML

Common beginner mistakes in HTML

1. Tags/Element names

2. Closing tag

3. Nesting

4. Single quotes and Double quotes

How to build a simple website with HTML

How to create an HTML document

How to build a pancake recipe page

2. Build the Main Section

Conclusion

Версии HTML

Структура и основные элементы

Редактор HTML

Основные элементы web-страницы

Элемент <html>

Элемент <head>

Элемент <title>

Элемент <body>

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

Meta тег description

Meta тег keywords

Meta тег robots

Meta http-equiv

Meta charset