Введение[править]
HTML (Hyper Text Markup Language, расшифровывается как язык разметки гипертекстовых страниц) — каркас всех современных сайтов.HTML является языком разметки, но не языком программирования. Под языком разметки понимается набор символов созданный с целью передачи информации о строении текста. Это значит, что в отличии от языков программирования, язык разметки только управляет «внешним видом» текста для конечного пользователя.
Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет — в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно — HTML5.
Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста — теги показывали только структуру документа, например:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Это заголовок.
</h1>
<p>
Это абзац.
</p>
</body>
</html>
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<marquee>
Бегущую строку, умеет отображать только IE.
</marquee>
</body>
</html>
Вскоре, количество тегов сильно разрослось.
Также нежелательно было появление в стандарте HTML 3.2 тега (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.
Виды тегов html
Существует два типа тегов — одиночные и парные (контейнеры). Последние являются более распространенными. Все что включено между открывающимся <> и закрывающимся тегом </> называют содержимым контейнера. Как можно заметить внутри закрывающегося тега обязательно нужно ставить слеш, т.е. косую черту «/», находящуюся сразу же после первой угловой скобки. Действие тегов распространяется на заключенную между ними информацию.
Одиночные теги (метки) как можно догадаться состоят из одного html элемента — открывающегося тега (например <img>).
В независимости от вида каждый тег состоит из следующих элементов:
- открывающаяся угловая скобка (<);
- имя тега (p, body, br);
- закрывающаяся угловая скобка (>).
Для расширения возможностей используемого тега используются различные атрибуты и значения атрибутов, разделяющиеся между собой с помощью пробела. В свою очередь атрибуты можно условно разделить на обязательные и необязательные.
Собираем инструменты[править]
Текстовый редакторправить
Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере
Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц
Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.
Браузерправить
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 — различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.
Теги изображений
| Тег | Описание |
|---|---|
| <img> | Определяет изображение. |
| <map> | Определяет карту-изображение. |
| <area> | Определяет интерактивную область внутри карты-изображения. |
| <canvas> | Создает растровое двухмерное изображение при помощи скриптов (обычно с использованием языка JavaScript).Новый элемент в HTML5. |
| <figcaption> | Содержит заголовок элемента <figure>.Новый элемент в HTML5. |
| <figure> | Содержит контент, иллюстрирующий или поддерживающего определенную идею текста.Новый элемент в HTML5 |
| <picture> | Контейнер для элементов <source>, которые содержат альтернативные версии изображения.Новый элемент в HTML5 |
| <svg> | Контейнер для SVG графики.Новый элемент в HTML5 |
This is our list of basic HTML tags:
- for link
- to make bold text
- main HTML part
- for break
- it is a division or part of an HTML document
- … for titles
- to make an italic text
- for images in document
- is an ordered list, for an unordered list
- for paragraph
- to style part of text
<A> </A>
In short, this is a tag that helps you make a link to a web page, to your page, social media site, product within online store,… The main attribute for this HTML tag is the href (Hypertext Reference) attribute, where you put a link to a website you want to link to. The other attribute is target, it can be used to open a link in a new window, so that users don’t lose focus on the current page. Example 1:
Example 2: (link will open in new window) 
<B> </B>
If you have a lot of text, then you need to emphasise some words to let the reader know what is important. And you do that with bold parts of the text. Example:
<BODY> </BODY>
The body part of an HTML document. In fact, this is an integral part of all HTML documents but it is just a tag that marks what is the visible content of the page, where the most content is.
<BR>
With this basic HTML tag we let the browser know, where we want some blank lines or breaks in the text. As a matter of fact, using a few breaks makes our text breath, this means that it is easier to read and understand.Example (use this text in html, and it will look different): 
<DIV> </DIV>
An element which is mostly used to group elements and to act as a template for new controls. The div HTML tag is an element you will use to divide a significant part of an HTML document from other parts. For examplle, let’s say you have a list of products on your web page, you will use a div for each product.
<HEAD> </HEAD>
The head part of an HTML document. Moreover, this is where you have metadata, which is data about the styling of the document, what kind of JavaScript libraries the document uses, title and CSS files.
<H1> </H1> <H2> </H2> … <H6> </H6>
Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading). H1, H2,… tags are used to create titles. Why do we need titles, when we can style a text to look like H tags? For instance, titles are used so that search engines and other scrapers (bots) understand the important parts of our documents.Example: 
There is a great chapter about titles in our blog post about adding a bulleted list to your HTML document.
<I> </I>
If you have a lot of text, then you need to emphasise some words to let the reader know what is important. Rather, with italics you can present text that is a little tilted to the right.Example:
<IMG>
We use the IMG tag to show images. Considering that images can be within files for your web page or anywhere online. In addition, the most important attribute is src (source), which tells where the picture is.Example (this will show an apple and a text):
<LI> </LI>
List item. A tag that is used within an ordered (<OL>) or unordered (<UL>) list. Not to mention, you can have as many as you like.Example:
<OL> </OL>
Ordered list. Also includes <LI> List Items, which will be numbered automatically. As a consequence, this is very useful if you add more list items, because the numbers will always be in the right order.Example:
<P> </P>
The paragraph tag groups text into a paragraph 
(That is funny). Hence its purpose is to separate a part of text or paragraph, this way you make it more readable and organized.. Example:
<SPAN> </SPAN>
The span tag groups text for which we want to have different styling. A good example would be if we wanted to have a red word inside a sentence.Example:
<STRONG> </STRONG>
Text is emphasised strongly — usually appears in bold, most of the time it looks like bold too. But it has an additional meaning, that this text should be emphasised.Example:
<UL> </UL>
An unordered list just means that it will have bullets for each item in the list. List items will have bullets for each item. Example:Check our blog post about what is HTML to learn its origins and future.
Мета-теги: что это такое
Их задействуют для структурного описания сопроводительных сведений. Они указывают поисковикам и браузерам на то, что находится на определенной странице. Однако поисковые алгоритмы в один момент подверглись обновлению и теги стали просто фактором, определяющим контентное содержимое.
Данные отметки входят в область html файла. При настраивании мета-тегов необходим грамотный подход, так как они играют важную роль для SEO. Прописывать, корректировать, заполнять следует только после получения ядра семантики. Действия систематически продолжаются в течение всего процесса продвижения.
Форматирование
| Тег | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|
| <acronym> | Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>. | Да | Да | Да | Да | Да | Да |
| <abbr> | Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков. | Да | Да | Да | Да | Да | Да |
| <address> | Определяет контактную информацию (автор / владелец) документа или статьи. | Да | Да | Да | Да | Да | Да |
| <b> | Определяет жирное начертание текста. | Да | Да | Да | Да | Да | Да |
| <bdi> | Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью. | Да | Да | Да | Да | Нет | Нет |
| <bdo> | Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский). | Да | Да | Да | Да | Да | Да |
| <big> | Не поддерживается в HTML5.Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <blockquote> | Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа | Да | Да | Да | Да | Да | Да |
| <center> | Не поддерживается в HTML5.Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <cite> | Предназначен для выделения названия произведений (по умолчанию — курсивом). | Да | Да | Да | Да | Да | Да |
| <code> | Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом). | Да | Да | Да | Да | Да | Да |
| <del> | Перечёркнутый (удалённый) текст | Да | Да | Да | Да | Да | Да |
| <dfn> | Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом. | Да | Да | Да | Да | Да | Да |
| <em> | Экспрессивно-эмоциональное выделение текста | Да | Да | Да | Да | Да | Да |
| <font> | Не поддерживается в HTML5.Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <i> | Курсивное начертание текста | Да | Да | Да | Да | Да | Да |
| <ins> | Подчёркнутый текст, вставленный в документ. | Да | Да | Да | Да | Да | Да |
| <kbd> | Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре. | Да | Да | Да | Да | Да | Да |
| <mark> | Выделенный/подсвеченный текст. | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
| <meter> | Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение. | 8.0 | 6.0 | 11.0 | 6.0 | Нет | 13.0 |
| <pre> | Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк | Да | Да | Да | Да | Да | Да |
| <progress> | Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена. | 8.0 | 16.0 | 11.0 | 6.0 | 10.0 | 12.0 |
| <q> | Используется для выделения коротких цитат (строчная цитата). | Да | Да | Да | Да | Да | Да |
| <rp> | Определяет, что отображать браузеру, который не поддерживает тег <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <rt> | Помещает полезный текст фуриганы в составе элемента <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <ruby> | Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана). | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <s> | Определяет текст, который больше не является правильным или актуальным. | Да | Да | Да | Да | Да | Да |
| <samp> | Результат вывода компьютерной программы или скрипта. | Да | Да | Да | Да | Да | Да |
| <small> | Шрифт, который отображается меньшим размером(мелкий/юридический шрифт). | Да | Да | Да | Да | Да | Да |
| <strike> | Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s> | Да | Да | Да | Да | Да | Да |
| <strong> | Текст, которому придают особое значение (важный текст). | Да | Да | Да | Да | Да | Да |
| <sub> | Текст с нижним индексом. | Да | Да | Да | Да | Да | Да |
| <sup> | Текст с верхним индексом. | Да | Да | Да | Да | Да | Да |
| <time> | Тег временной разметки (семантическая разметка). | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
| <tt> | Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <u> | Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. | Да | Да | Да | Да | Да | Да |
| <var> | Математические/переменные величины. | Да | Да | Да | Да | Да | 12.0 |
| <wbr> | Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL). | 1.0 | 3.0 | 11.7 | 4.0 | Нет | Да |
Проверка мета-тегов сайта
Владельцу сайта проще всего проверить мета-теги с помощью сервиса Яндекс.Вебмастер. Войдите в свой аккаунт, на панели слева перейдите в раздел «Диагностика» и в подраздел «Диагностика сайта». Например, если на сайте есть страницы с незаполненным тегом description, в списке «Возможные проблемы» вы увидите ссылку «Ознакомьтесь с примерами и исправьте ошибки». Чтобы увидеть проблемные страницы, нажмите на нее.
Анализ мета-тегов на сайтах конкурентов можно выполнить в таких сервисах, как:
- Serpstat;
- Пиксель Тулс;
- Seo-inf.ru;
- Promopult.ru.
Мы рассказали о мета-тегах для сайта, которые помогают улучшить восприятие вашего ресурса поисковыми системами. Потому стоит внимательно относиться к составлению данных атрибутов и постараться указать то, что положительно повлияет на отображение страницы в поиске и предоставит полезную для пользователя информацию.
Метки как части языка HTML
Серверы и браузеры обмениваются между собой сведениями. Процесс этот непростой, он осуществляется при соблюдении положений протоколов HTTPS и HTTP. Вся необходимая информация передается в текстовом виде. Данная методика — идеальное решение для компьютера, но для человеческого восприятия она слишком сложная. Поэтому разработчики стали искать эффективный метод структурирования. Их решимость найти выход из сложившейся ситуации привела к появлению хештегов.
Изначально на страницах первых сайтов, где преимущественно происходило общение между программистами, появились решетки (#) с идущим за ними текстом. Таким образом удалось совершить переход от весьма неудобной формы обмена сведениями к более функциональной. Появились каталоги, в которых данные распределялись и группировались по определенным критериям. Теги стали обозначением этих каталогов, чем-то вроде границ, в рамках которых находится информация заданной тематики.
Так отметки успешно доказали свою эффективность и стали частью языка html.
Как они работают
Разметки текстовых данных обозначаются угловыми скобками (<Н3>). Между ними находится обозначение тематики располагающихся за тегом сведений.
Дескрипторы подразделяются на парные и непарные. Двойные объединяют некоторое количество текста и выглядят так: <тег>текстовая основа, соответствующая определенной теме</тег>. Первый является открывающим, второй закрывающим, он дополняется правым слешем.
Есть еще одиночные отметки без закрывающей части. Так, <p> говорит об имеющемся абзаце, он встречается не только в одиночном, но и в парном варианте. А <code> свидетельствует о том, что идущие за ним текстовые данные представляют собой код какой-либо программы.
Теги форматирования
Теги форматирования используются для визуального и логического выделения фрагментов текста.
Тег
Описание
Определяет акроним.Не поддерживается в HTML5.
Определяет аббревиатуру или акроним.
Содержит контактную информацию об авторе/владельце документа/статьи.
Устанавливает жирное начертание текста.
Изолирует фрагмент текста, который может быть отформатирован в другом направлении, что позволяет браузерам корректно обрабатывать двунаправленный текст.Новый элемент в HTML5.
Переопределяет текущее направление текста.
Определяет шрифт большего размера.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
Определяет длинную цитату.
Определяет выровненный по центру текст.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
Помечает текст как цитату или сноску на другой материал
Определяет фрагмент компьютерного кода.
Определяет удаленный текст.
Содержит определение термина или слова. По умолчанию, выделяется курсивом.
Используется для акцентирования фрагмента текста. Выделяется курсивом.
Определяет шрифт, цвет и размер текста. Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
Выделяет фрагмент текста курсивным начертанием.
Определяет вставленный текст, который отображается подчеркнутым.
Определяет вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.
Содержит выделенный/подсвеченный текст.
Новый элемент в HTML5.
Определяет скалярную величину в том же диапазоне или графическое представление дробного числа.
Определяет предварительно отформатированный текст.
Определяет индикатора прогресса выполнения задачи (progress bar).Новый элемент в HTML5.
Определяет короткую цитату.
Содержит альтернативный текст, который показывается в браузере, не поддерживающем тег .Новый элемент в HTML5.
Содержит аннотации сверху или снизу от текста, заключенного в тег (для западно-азиатских языков).
Новый элемент в HTML5.
Содержит аннотации сверху или снизу от текста, заключенного в тег (для восточно-азиатских языков).Новый элемент в HTML5.
Содержит текст, который уже не актуален.
Содержит результат вывода компьютерной программы или скрипта.
Подчеркивает важность выделенного фрагмента текста.
Определяет текст с нижним индексом.
Определяет текст с верхним индексом
Определяет шаблон.
Определяет время/дату.Новый элемент в HTML5.
Отображает шрифт моноширинным текстом.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
Определяет текст, стилистически отличающийся от обычного текста.
Определяет математические/переменные величины.
Указывает браузеру, что при необходимости можно сделать перенос строки.
Новый элемент в HTML5.
Основные теги html
Стандартизированный язык разметки гипертекста включает в себя предостаточно используемых HTML-тегов. Давайте остановимся на самых важных из них.
Основные парные теги html
- <html> —сообщает браузеру о том, что перед ним находится HTML документ.
- <head> — содержит описание интернет-страницы и является некой емкостью для всех заголовочных элементов html-документа, цель которых — помогать браузерам и поисковым системам в работе с данными.
- <body> — определяет видимую часть документа.
- <title> — отвечает за отображение и название документа.
- <table>, <tbody>, <thead>, <td>, <th> и <tr> — теги, относящиеся к созданию таблиц.
- <p> — закрытие данного тега сообщает браузерам о том, что текст отображается с новой строки, то есть с нового абзаца.
- <h> — задает заголовок (h1…h6).
- <br> — тег устанавливающий перевод строки в том месте, где он находится.
- <b>, <u>, <i> — каждый из тегов по отдельности выделяющий текст жирным, подчеркнутым или курсивом.
- <ol>, <ul>, <dl> — теги отвечающее за создание нумерованного или маркированного списка, а также списка определений.
- <tt>, <kbd> — эффект для текста имитирующий стиль печатной машинки.
- <strong> — еще один HTML-тег выделяющий текст жирным. В отличии от тега <b> воспринимается поисковыми механизмами как особо выделенный.
- <marquee> — тег, используемый для создания бегущей строки.
- <font> — тег, который используется для форматирования текста, но работающий исключительно при использовании специальных атрибутов.
- <a> — весьма распространенный тег, отвечающий за создание гиперссылки.
- <cite> — цитирование.
- <code> — выводит в HTML документе примеры кода.
- <q> — отвечает за отображение текста заключенного в скобки.
- <blockqote> — создает отступы с обеих сторон текста.
Основные одиночные теги
- <meta> — тег содержащий метаинформацию, предназначенную для поисковых механизмов. Внутри него при помощи соответственных атрибутов можно прописать ключевые слова, управление процессом индексации, имя автора, кодировку документа и т. п.
- <img> — тег, отвечающий за отображение графических элементов (картинки). Используется вместе с обязательным атрибутом <img src=»/URL»>.
- <style> — указывает на таблицу стилей CSS. Данный тег задается в теге <head>. HTML документ может состоять из энного количества тегов <style>, задающих странице стилистику в независимости от расположения ее содержимого.
- <hr> — добавляет горизонтальную линию.
Нажав сочетание клавиш Ctrl+U можно заметить, что весь HTML-документ построен на использовании HTML тегов и атрибутов. Совсем не обязательно запоминать все существующие HTML теги. Для внесения корректировок на сайт достаточно запомнить те, что приведены выше.
Надеюсь, статья оказалась для вас полезной, и теперь вы знаете, какие существуют виды тегов и что это вообще такое.
Что означает
По существу — это ключи (ключевые слова), с помощью которых удается быстро отыскать необходимые сведения. Так, таргетологи в Твиттере для информирования о предоставляемых ими услугах задействуют хештеги #Дешево_реклама. Это значительно расширяет возможности, и упрощает поиск клиентов.
Другими словами — это краткое, но емкое представление смысловой нагрузки текста или иной информации, находящейся в файле. Создание пометки осуществляет пользователь. При этом ему совершенно не обязательно учитывать уже имеющиеся категории. Такое отсутствие условий и ограничений делает теги самым передовым методом каталогизации данных.
Тематические отметки используют в двух случаях:
- Когда нужно пометить записи, статьи или иные элементы, чтобы сгруппировать их по темам.
- Для тегов HTML, являющихся символами разметки языка. Они дают возможность сформировать и структурировать сведения, находящиеся на сайтах. Внутри них находится содержимое, отображающееся на странице. Визуально можно представить как: <Открывающий_тег>Содержимое<Закрывающий_тег>.
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- <!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- <html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- <meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- <script> содержит ссылку на файл сценария или сам код.
- <style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
- <header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- <footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- <main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
- <a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- <img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- <blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- <div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- <span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
- <ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- <table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
- <form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
- <button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
- <input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
- <menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- <textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Для чего нужны и где используются
Ответ однозначный — везде. Каталогизация по категориям в последнее время используется все реже, что особо отчетливо видно на страницах западных сайтов, трекерах и файлообменниках. Переход на Tag здесь осуществили уже довольно давно. Конечно, подразделение на небольшие смежные тематики до сих пор не теряет актуальности. Но задействуется больше как элемент общения, а не с целью обмена данными.
Преимуществом задействования тегов выступает гибкость. Можно создать абсолютно любую отметку, ведь это определяющие слова для данных. В качестве них зачастую используют имена, даты, географические названия, какие-либо понятия и т.д.
Еще одно неоспоримое их достоинство — легкость в использовании. Сама по себе идея отличается простотой. Соответственно, каждый пользователь, поняв ее суть и рассмотрев примеры у других юзеров, запросто применяет их для своих сведений. Нельзя недооценивать их роль при создании текстового контента для сайта
Важно правильно их применить, чтобы сделать поиск информации максимально простым и привлечь внимание большого количества пользователей
Создание форм и кнопок
<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.
<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.
<label> — оформляет пометку для поля, созданного тегом <input>.
<textarea></textarea> — создаёт большие поля для ввода текста.
Основная структура страницы
Как выглядит основная структура html-страницы
Header
Элемент используется для создания шапки всего сайта или шапки отдельных компонентов. Шапка сайта — это блок с вводной информацией, в ней обычно находятся такие элементы как: логотип, меню, кнопки соцсетей, строка поиска и другие ключевые элементы.Чаще всего шапка располагается вверху страницы.
Запись в коде:
Как выглядит header на сайте (желтый цвет)
Довольно часто встречаются случаи когда в помещают контент идущий сразу после шапки (выделенный голубым цветом элемент на скриншоте выше), но правильнее будет поместить его в тег , обернув тегом с классом «hero» Тултип: Так часто называют первую секцию сайта, которую пользователь видит сразу при загрузке страницы .
Main
В элемент помещают главное содержимое — то, которое больше нигде не повторяется на сайте. В элемент main помещаются теги section — разделы сайта. Соответственно, второстепенные элементы сюда не входят: шапка сайта, подвал, боковые панели, ссылки навигации, информация об авторских правах, логотипы сайта, как правило, остаются вне контейнера .
Запись в коде:
Вспомним header из нашего примера, так вот контент идущий после шапки сайта уже будет обернут в тег (кроме footer-а):
Section
Элемент создает блок обертку для разделов сайта — например, цели проекта, функции продукта, партнеры, команда. Тег , как правило, помещается в .
Хороший пример использования — разделение книги на главы, ведь название главы описывает ее содержание. Также одна глава, без остальных, воспринимается вырванной из контекста. То же самое с контентом главной страницы. Смысловые разделы составляют содержание страницы, но сами по себе, в отрыве от страницы, эти «секции» жить не могут и теряют смысл.
Запись в коде:
Как выглядит section на сайте (желтый цвет)
Footer
Элемент создает нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт. В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
Запись в коде:
Как выглядит footer на сайте (желтый цвет)
Aside
Элемент размечает блок с дополнительным содержимым (sidebar). Он может не иметь отношения к главному () контенту сайта. Часто используется для боковой колонки на сайте, в которой может помещаться разделы сайта, реклама и т.д.
Запись в коде:
Как выглядит aside на сайте (желтый цвет)
Как мы можем заметить, не всегда бывает один.