FrontendBook - Что такое HTML?

Что такое 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-документу.

Чтобы создать шаблон, выполните следующие шаги:

  1. Во-первых, обязательно установите редактор.
  2. Создайте файл с .html расширением. Файлы, содержащие код HTML, должны заканчиваться этим расширением.
  3. Пропишите код снизу.

<!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, поскольку цель вашего веб-сайта будет более ясной. Поисковые системы помогут вашему сайту охватить целевую аудиторию, которая ищет именно этот контент.