Что такое HTML?
HTML — это одна из фундаментальных технологий, которую вы можете изучить, когда начинаете заниматься веб-разработкой. HTML-код присутствует на каждой веб-странице в Интернете.
Как только вы хорошо разберетесь в фундаментальных концепциях языка, вы будете хорошо подготовлены для перехода к двум другим технологиям, присутствующим почти на всех веб-сайтах, — CSS и JavaScript.
В этой статье вы познакомитесь с основами HTML.
Вы начнете с изучения того, что означает аббревиатура. Затем вы поймете его назначение, ознакомившись с краткой историей эволюции языка на протяжении многих лет.
Вы также изучите некоторые из наиболее часто используемых тегов и некоторые из лучших современных практик, которым нужно следовать.
Этот атрибут размера может принимать значения от 1 до 7, в которых размер текста увеличивается от 1 до 7. Но, как я уже сказал, это уже давно обесценилось, и большинство людей даже не знают о его существовании.
Если вы спешите узнать, как можно изменить размер текста, то вот он:
Что означает HTML и для чего он используется? Введение в HTML
Документы любого типа, будь то печатные или цифровые, нуждаются в структуре.
Структура позволяет пользователям перемещаться по документу легко и не путаясь.
В верхней части большинства документов обычно имеется большой заголовок.
Этот заголовок верхнего уровня передает общее сообщение страницы, объясняет, о чем содержание, и задает тон тому, что последует.
Далее идет вводный текст и несколько заголовков меньшего размера.
Различные уровни заголовков создают иерархическую структуру информации.
Некоторые абзацы текста обычно следуют за каждым заголовком.
Когда дело доходит до веб-документов, изображения, видео и гиперссылки (или ссылки) сопровождают текстовое содержимое. Ссылки помогают пользователям перейти к другому разделу страницы или вообще к другой веб-странице. Эти элементы оживляют документ.
Также могут быть формы для ввода данных пользователями, флажки для отметки или даже переключатели для выбора параметра из группы элементов.
Чтобы создать структуру, отформатировать содержимое и отобразить его в веб-браузерах, вам необходимо использовать HTML.
HTML — это сокращение от языка гипертекстовой разметки , и это язык всемирной паутины.
С момента своего создания он претерпел множество изменений, изменений и усовершенствований.
В разделе ниже вы увидите, как появился HTML, а также изменения, которые он претерпел, пока не превратился в самую последнюю и стандартизированную версию HTML5, которую мы используем сегодня.
Краткая история HTML
В 1989 году британский ученый по имени сэр Тим Бернерс Ли работал в CERN (Европейский совет по ядерным исследованиям) в Женеве, Швейцария.
Как исследователь, он думал о создании взаимосвязанной распределенной системы. При наличии такой системы обмен и систематизация информации могут быть достигнуты с большей скоростью и гораздо более легким и удобным способом.
Ученые и академики со всего мира смогут обмениваться ресурсами и результатами исследований друг с другом.
Цель заключалась в том, чтобы перейти от одного справочного документа к другому и позволить пользователям легко переходить с одной страницы на другую, предоставляя эти ссылки.
Из этой идеи родилась Всемирная паутина.
В 1990 году он разработал HTTP (аббревиатура от HyperText Transfer Protocol), коммуникационный протокол, который определяет, как происходит обмен и передача ресурсов.
Он также разработал HTML, сервер и браузер.
SGML (сокращение от Standard Generalized Markup Language) уже существовал и был основой для HTML. Но все было гораздо проще.
Вместо того, чтобы создавать HTML с нуля, Бернерс-Ли перенял некоторые заранее установленные концепции из SGML.
Одной из таких особенностей SGML, встроенных в HTML, являются структурные элементы, также известные как теги .
Теги в SGML идут парами (с открывающим и закрывающим тегом).
Еще одной принятой функцией было обозначение тегов угловыми скобками
.Сэр Тим Бернерс Ли включил несколько пар тегов, которые уже существовали в SGML. Например, он включил тег заголовка ( <h1>, </h1>) и тег абзаца ( <p>, ), </p>а также добавил собственный тег гипертекстовой ссылки ( <a>, </a>).
В 1991 году он выпустил первое предложение для HTML.
Однако первой официальной версией HTML был HTML 2.0, разработанный IETF (сокращение от Internet Engineering Task Force), в который было включено множество других дополнительных функций.
Одной из них, в частности, была возможность вставлять изображения в документы с помощью <img> тега .
Mosaic, ведущий браузер того времени, изначально включал эту возможность, и IETF сделала ее стандартом.
В то время полным ходом шли так называемые браузерные войны.
Компании-производители браузеров, такие как Netscape Communications Corporation с именем браузера Netscape Navigator, манипулировали HTML и создали проприетарную версию тегов HTML для конкретного браузера.
Другие браузеры пытались воспроизвести их, но безуспешно: веб-страницы выглядели хорошо в одном браузере, но не могли использоваться в другом.
Был основан W3C (аббревиатура от World Wide Web Consortium), который взял на себя создание столь необходимых стандартов.
W3C взял на себя задачу дальнейшего развития HTML.
В течение оставшейся части 90-х были опубликованы различные версии HTML, такие как HTML 3.0 и HTML 3.2.
Последующим стандартом, рекомендованным W3C, стал HTML 4, ориентированный на интернационализацию.
Теперь документы можно было писать на любом другом языке мира, а не только на английском.
В 1999 году было больше обновлений HTML, с новой версией HTML 4.01.
После выпуска HTML 4.01 развитие HTML резко изменилось и пошло в другом направлении.
W3C создал XHTML 1.0, ответвление HTML, включающее XML (сокращение от eXtensible Markup Language). На этот раз были более строгие правила кодирования и меньше свободы для работы кода в браузере.
Следующая версия XHTML 1.0, XHTML 1.1, еще больше напоминала XML до такой степени, что Internet Explorer, самый популярный браузер того времени, не поддерживал документы.
В центре внимания W3C был XML, поэтому они начали работу над созданием XHTML 2.0. Но прогресса не было, и они поняли, что идут не по правильному пути. W3C отказался от проекта.
В то время как W3C работал над разработкой XHTML 2.0, была сформирована другая рабочая группа под названием WHATWG (сокращение от Рабочая группа по технологиям веб-гипертекстовых приложений).
WHATWG состояла из представителей различных компаний, таких как Mozilla и Apple, которые работали над созданием новой версии HTML, ориентированной на веб-приложения.
В 2006 году сэр Тим Бернерс Ли объявил о сотрудничестве обеих групп, W3C и WHATWG, для совместной работы над новой версией HTML — HTML5.
HTML5 — это стандартная рекомендуемая версия HTML, используемая до сих пор.
Обзор синтаксиса HTML
Давайте подробнее рассмотрим HTML, особенно HTML-теги, и познакомимся с основным синтаксисом. Как вы видели в предыдущем разделе, теги представляют собой синтаксическую структуру, унаследованную от SGML.
В качестве примера возьмем следующий HTML-код:
<a> FrontendColors </a>
Давайте разберем это:
- Есть два вида тегов. Открывающий тег (
<a>
) и закрывающий тег (</a>
) - Тег состоит из одной левой угловой скобки, правой угловой скобки и символа между ними.
- Закрывающие теги имеют косую черту ( /) после левой угловой скобки и перед символом.
- Символ в теге позволяет нам узнать больше о содержании между тегами. В этом случае символ
a
, обозначающий anchor, указывает на то, что это ссылка на место в сети с именем FrontendColors. - Между открывающим и закрывающим тегами находится некоторый контент — в данном случае это текст FrontendColors.
- В целом открывающий тег, содержимое и закрывающий тег составляют HTML- элемент.
Стоит отметить, что в приведенном выше примере вы видели элемент, состоящий как из открывающего, так и из закрывающего тега.
При этом некоторые элементы состоят только из самозакрывающегося тега, например <img>
тег . В таких случаях косая черта (например, <img />
) совершенно необязательна.
В приведенном выше примере что-то не так с элементом HTML.
Предполагается, что он указывает на ресурс, отсюда и символ a, но нигде нет указаний на доступный связанный ресурс.
Для этого вам нужно использовать атрибут HTML . Атрибуты предоставляют дополнительную информацию об элементе.
Итак, поправим код:
<a href="https://frontendcolors.ru/"> FrontendColors </a>
А теперь разберем:
- href="https://www.freecodecamp.org/"атрибут, сопровождающий элемент. В большинстве случаев определенные элементы принимают определенные атрибуты и сочетаются с ними.
- Атрибуты размещаются только на открывающем теге перед правой угловой скобкой. Обратите внимание на пробел сразу после символа.
- Атрибуты состоят из пар
имя
-значение
. В данном случаеhref
- это имя атрибута,https://frontendcolors.ru/
- значение атрибут. - Пара имя-значение разделяется оператором присваивания
=
. - Значение всегда заключается в двойные кавычки
""
.
Теперь, когда вы изучили основы HTML-элементов, как настроить HTML-документ для своего проекта?
В следующем разделе вы узнаете, как создать шаблон HTML5. Шаблон служит своего рода формулой для всех ваших HTML-проектов.
Как создать шаблон HTML5
При настройке новых HTML-проектов вы обнаружите, что каждый раз должны включать одни и те же несколько элементов.
Эти элементы необходимы, и они потребуются вам для правильной работы HTML-сайта в соответствии с рекомендациями и стандартами.
Некоторые редакторы кода предлагают ярлыки для автоматического заполнения и ввода элементов, используемых в каждом новом HTML-проекте, что значительно экономит ваше время.
Это также известно как HTML-шаблон.
Шаблон — это базовый скелет и фундаментальная структура, которая необходима каждому новому HTML-документу.
Чтобы создать шаблон, выполните следующие шаги:
- Во-первых, обязательно установите редактор.
- Создайте файл с
.html
расширением. Файлы, содержащие код HTML, должны заканчиваться этим расширением. - Пропишите код снизу.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FrontendGradients</title>
</head>
<body>
</body>
</html>
Давайте разберем это:
<!DOCTYPE html>
— это первая строка кода, которая должна присутствовать в начале всех современных HTML-документов. Вы можете заметить, что он имеет другой цвет, чем остальная часть кода. Это потому, что это не элемент HTML, а объявление типа документа . Это позволяет браузерам узнать, какой документ ожидать. Он также сообщает им об используемой версии HTML. В этом случае это объявление информирует браузеры о том, что документ содержит код HTML5.- Элемент
<html>
является первым элементом в каждом документе HTML и считается корневым элементом. Открытие<html>
указывает на начало всего HTML-кода, а закрытие</html>
— на конец всего HTML-кода. Атрибутlang
обозначает язык документа. Внутриhtml
всегда есть два вложенных элемента:head
иbody
. - Элемент
<head>
содержит метаданные и конфигурации. Метаданные — это информация о странице. Эта информация скрыта от пользователей и не отображается в браузере. Единственная видимая информация — это содержимоеtitle
элемента, который является заголовком страницы. Заголовок отображается на вкладке браузера в верхней части окна браузера. - Элемент
<body>
содержит весь контент, который будет виден в окне браузера. Здесь вы добавите свой HTML-код для своего проекта.
Обзор основных элементов HTML
Как создавать комментарии к коду
Комментарии помогают прояснить ваш код и его логику. Воспринимайте их как заметки для себя в будущем или для коллег.
Это синтаксис для создания комментариев:
<!-- Я комментарий -->
Все, что между <!--и -->
не будет отображаться на вашей веб-странице, так как оно игнорируется браузерами.
Как создавать заголовки
В HTML существует шесть уровней заголовков:
<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>
По мере увеличения числа, содержащегося в теге, уровень значимости снижается. Заголовок <h1>
имеет большее значение, чем <h6>
заголовок.
Как создавать списки
В HTML есть два типа списков:
<!-- неупорядоченный (или маркированный) список -->
<ul>
<li> Пункт </li>
<li> Другой пункт </li>
</ul>
<!-- упорядоченный (или нумерованный) список -->
<ol>
<li> Пункт 1 </li>
<li> Пункт 2 </li>
</ol>
Обратите внимание, что как в неупорядоченных, так и в упорядоченных списках элементы списка создаются с помощью <li>
элемента.
Как создавать абзацы
Чтобы создать блок текста, используйте <p>
элемент:
<p> Я абзац! </p>
Как создавать ссылки
Вы видели этот <a>
элемент в предыдущем разделе.
<a href="https://frontendcolors.ru/"> FrontendColors.ru </a>
Обычно под текстом между открывающим и закрывающим <a>
тегом ставится подчеркивание. Курсор также меняется при наведении на него курсора. Этот текст указывает на страницу / или связанный ресурс.
Атрибут href
является пунктом назначения, так как он содержит адрес ссылки.
Еще одна вещь, о которой следует помнить, это то, что вы можете вкладывать одни элементы внутрь других.
Например, вы можете добавить создать ссылку из некоторого текста в абзаце, например:
<p>Найдите все нужные цвета в <a href="https://frontendcolors.ru/"> FrontendColors.ru </a>! </p>
Не забудьте сначала закрыть вложенный тег. Например, не допускайте этой распространенной ошибки новичков:
<!--Так делать нельзя!-->
<p>Найдите все нужные цвета в <a href="https://frontendcolors.ru/"> FrontendColors.ru </p>! </a>
Вы также можете ссылаться на разные разделы на одной странице.
Во-первых, вам нужно включить idатрибут в раздел, на который вы хотите сослаться, и присвоить ему значение.
Скажем, вы хотите сделать ссылку на абзац:
<p id="text">Я абзац, на которого будут ссылаться!</p>
Когда вы создаете ссылку (так же, как вы видели ранее), включите знак решетки (#) перед значением, присвоенным idатрибуту:
<a href="#text">Я ссылка, которая будет ссылаться на абзац!</a>
Как создать контейнер
Элемент <div>
создает общий контейнер для хранения некоторого содержимого.
Он обычно используется с CSS для создания различных макетов на странице.
<div></div>
Как создавать изображения
Для создания изображения используйте <img> элемент. Напомним, что это самозакрывающийся элемент.
Используйте src
атрибут, указывающий источник изображения (либо URL-адрес, либо путь к изображению), и alt
атрибут. Атрибут alt
— это текст, который будет отображаться, если изображение по какой-либо причине не загрузится.
Также важно всегда включать alt
атрибут в целях доступности, так как программы чтения с экрана будут читать контент вслух для слабовидящих пользователей.
<img src="путь-к-изображению" alt="Описание изображения">
Как создавать формы
Формы являются необходимым аспектом почти каждой веб-страницы. Это то, как пользователи могут отправлять информацию и как вы можете собирать эти данные.
Вы создаете форму, используя <form>
элемент:
<form></form>
Тем не менее, при создании формы задействовано множество атрибутов.
Что такое семантический HTML и почему это важно
Семантический HTML — одна из самых важных функций HTML5.
Слово « семантический » относится к элементам HTML, описывающим содержимое, которое они содержат, а не просто к универсальным контейнерам без смысла.
Вместо использования <div>
элементов, которые являются общими пустыми контейнерами без семантического значения и используются только для хранения контента, вы можете использовать семантические элементы HTML5.
Семантический HTML также предназначен для создания лучшей структуры сайта.
Например, вы можете использовать <header>
элемент для информации, расположенный вверху страницы. Здесь вы можете включить логотип и заголовок верхнего уровня для страницы. Внутри <header>
вы можете вложить еще один семантический элемент, <nav>
чтобы создать панель навигации со ссылками на разные страницы.
Для основного контента страницы можно использовать <main>
элемент.
Вы можете хранить информацию внизу страницы в <footer>
элементе. Обычно это карта сайта, ссылки на социальные сети, ответы на общие вопросы, которые могут возникнуть у пользователей, или контактная информация.
Семантический HTML не фокусируется на том, как выглядит контент.
Например, есть два HTML-элемента <b>
и <i>
, для создания жирного и курсивого текста соответственно.
Тем не менее, эти элементы сосредоточены на представлении и том, как отображается содержимое — это должно быть ролью CSS (каскадных таблиц стилей), а не HTML.
Используйте <strong>
, чтобы показать, что фрагмент текста имеет большое значение. Браузеры будут отображать текст жирным шрифтом.
Используйте <em>
, чтобы сигнализировать о том, что текст нуждается в выделении. Браузеры будут отображать текст курсивом.
Эти элементы не фокусируются на том, как выглядит текст, а вместо этого предоставляют больше информации о типе текста, который они содержат.
Как вы уже видели, все упомянутые элементы предоставляют информацию о разметке и типе содержимого, которое они содержат, и, таким образом, создают более осмысленные страницы и лучшую структуру.
Зачем писать семантический HTML? По нескольким причинам:
- Это улучшает доступность. При проектировании и разработке веб-сайтов необходимо помнить, что вы создаете веб-сайты для всех. Люди с нарушениями зрения полагаются на вспомогательные технологии, такие как программы чтения с экрана, чтобы читать контент вслух. Люди с другими ограниченными возможностями могут полагаться на навигацию только с помощью клавиатуры. Итак, научившись писать доступный HTML, вы сможете создавать более удобные веб-страницы.
- Улучшает SEO (поисковая оптимизация). Использование элементов, которые правильно описывают контент, поможет вашему веб-сайту занять более высокое место в поиске Google, поскольку цель вашего веб-сайта будет более ясной. Поисковые системы помогут вашему сайту охватить целевую аудиторию, которая ищет именно этот контент.