Содержание

Тег !DOCTYPE



Пример




Title of the document

<body>
The content of the document……
</body>

</html>


Определение и использование

Определение <!DOCTYPE> должно быть самой первой вещью в вашем HTML документ, до <html> Тега.

Определение <!DOCTYPE> не является HTML-тегом; Это инструкция для веб-браузера о том, что версия HTML страница написана на.

В HTML 4,01, <!DOCTYPE> определение относится к DTD, потому что HTML 4,01 был основан на SGML. DTD определяет правила для языка разметки, так что браузеры отображают содержимое правильно.

HTML5 не основан на SGML и поэтому не требует ссылки на DTD.

Совет: Всегда добавляйте <!DOCTYPE> объявление в HTML-документы, чтобы Браузер знал, какого типа документ ожидать.


Поддержка браузера

Элемент
<!DOCTYPE> Да Да Да Да Да

Различия между HTML 4,01 и HTML5

Существует три различных <!DOCTYPE> объявления в HTML 4,01. В HTML5 есть только один:



HTML элементы и документа

Посмотрите на наш стол всех HTML элементы, и то, что документ каждый элемент появляется в.


Общие объявления DOCTYPE

HTML 5

HTML 4,01 строгий

Этот DTD содержит все элементы и атрибуты HTML, но не включает в себя презентационные или устаревшие элементы (например, шрифт). Фреймов не допускаются.

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

HTML 4.01 Переходные

Этот DTD содержит все элементы и атрибуты HTML, включая презентационные и устаревшие элементы (например, шрифт). Фреймов не допускаются.

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

HTML 4.01 Рамок

Этот DTD равен HTML 4,01 переходный, но позволяет использовать содержимое фрейма.

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

XHTML 1.0 Strict

Этот DTD содержит все элементы и атрибуты HTML, но не включает в себя презентационные или устаревшие элементы (например, шрифт). Фреймов не допускаются. Разметка также должна быть написана как хорошо сформированный XML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

XHTML 1.0 Переходные

Этот DTD содержит все элементы и атрибуты HTML, включая презентационные и устаревшие элементы (например, шрифт). Фреймов не допускаются. Разметка также должна быть написана как хорошо сформированный XML.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

XHTML 1.0 Рамок

Этот DTD равен XHTML 1,0 переходный, но позволяет использовать содержимое фрейма.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>

XHTML 1.1

Этот DTD равен XHTML 1,0 Strict, но позволяет добавлять модули (например, чтобы обеспечить поддержку Ruby для восточно-азиатских языков).

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Все теги html с примерами. Атрибуты HTML-тегов

).

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

Знакомое название, правда? Действительно. Есть такой тег, и мы его ставим между и . Но сейчас я говорю именно об атрибуте, и подходит он практически к любому тегу, так как является универсальным. А нужен он в качестве подсказки при наведении. И суть состоит в том, что вы сами пишите эту подсказку. Выглядит это примерно так:

Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег

.

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

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

Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?

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

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

После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.

Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег . DIV — это просто пустой блочный элемент, который служит некоторым контейнером для объединения. Сюда можно запихнуть различные атрибуты с цель применения к общему фрагменту. А уж если вы вообще хотите применить атрибут ко всему документу, то его вообще можно прописать в основной тег

.

В общем в этом случае вам можно не ставить в каждый тег атрибут align=»center» . Вам лишь нужно нужно поставить

перед заголовком, и закрыть его с помощью

в конце всего текста. Ну а внутри

ставим align=»center» , но уже всего один раз. По моему это гораздо быстрее и удобнее и в итоге получается то же самое.

Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.

Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс «HTML5 и CSS3 с нуля до профи «. Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.

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

С уважением, Дмитрий Костин.

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

Атрибуты

Атрибуты прописываются в открывающем теге и состоят из двух частей. Первая — имя, которое пишется через пробел после названия тега. Вторая часть — значение атрибута, которое указывают после знака «=» и заключают в двойные кавычки. Атрибуты HTML разнятся для разных тегов. Большинство из них выполняет различные задачи, но есть несколько общих атрибутов. Их можно применить ко многим элементам веб-страницы.

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

Универсальные атрибуты элементов HTML

Есть несколько атрибутов, которые можно применить к разным тегам. Они отвечают за расположение элемента на странице, его высоту, ширину, цвет и прочие визуальные эффекты. Один из таких — Align, которому можно присвоить значения right, left или center. Он выравнивает тег по горизонтали, поэтому может оказаться полезным для большинства элементов разметки. Valign делает то же самое, но по вертикали. Ему можно присвоить значения top, bottom и middle. Следующий универсальный атрибут — bgcolor, отвечающий за Его значение указывают в виде числового кода, означающего один из цветов RGB. Фоном может стать изображение, если воспользоваться атрибутом background.

Элементу можно задать название, которое будет выводиться на экран при наведении на него. Для этого следует воспользоваться атрибутом title, значение которого определяет пользователь. Существует ещё один подобный атрибут, который служит для создания уникального идентификатора элемента. Этот атрибут называется id и позволяет создателю сайта задавать стиль для конкретного тега. Для работы с CSS используют атрибут под названием class, который будет рассматриваться как имя тега в каскадных таблицах стилей. Ширину таблицы, изображения или ячейки можно задать при помощи width, а высоту — с помощью атрибута height. Есть и другие глобальные атрибуты, но они едва ли понадобятся новичку.

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

Существует несколько полезных атрибутов, которые оказывают влияние на весь HTML- документ. Некоторые из них можно применять к отдельным фрагментам, например lang. Этот атрибут указывает язык текста на веб-странице. Зачем это нужно, если сайт выглядит корректно и без указания языка? На самом деле некоторые символы по-разному отображаются для различных языков. Например, кавычки для английского языка выглядят так — “…”, а для русского вот так «…». В некоторых случаях использование lang необходимо, но зачастую можно обойтись и без него. Атрибут xml:lang выполняет аналогичную функцию, но его применяют в документах XHTML.

Можно задать не только язык документа, но и специальную подсказку. Она выскакивает при наведении курсора на веб-страницу и задаётся с помощью атрибута title. Есть ещё один атрибут для тега , задающий пространство имён документа XHTML. Его название — xmlns. Значение сего атрибута является ссылкой — http://www.w3.org/1999/xhtml . Никакие другие значения ему присвоить нельзя.

Параметры шрифта CSS

Некоторые атрибуты HTML используют для указания шрифта в CSS. Первый из них называется font-family. В нём указывают список шрифтов, которые будут использованы в каком-либо элементе. Значение этого атрибута — название шрифта. Выбранный шрифт можно изменить при помощи font-style. Этот параметр может сделать шрифт наклонным или отметить его курсивом. Значения — normal (обычный), italic (курсив) и oblique (наклонный). Следующий полезный атрибут для каскадных таблиц стилей называется font-variant. С его помощью можно выделить текст особыми прописными буквами. У font-variant всего два значения — normal и small-caps.

Ещё один атрибут для шрифта называется font-weight и отвечает за толщину текста. Ему можно присвоить значение normal, если вам нужны буквы стандартной толщины. Для светлого текста следует поставить значение lighter, а для полужирного — bold. Жирный текст обозначен в данном атрибуте как bolder. Можно задавать толщину символов в числовом формате. В этом случае 100 — тонкий шрифт, а 900 — самый толстый вариант. При помощи атрибута font-size задают размер шрифта. Его можно обозначить в пунктах (pt), пикселях (px) и процентах (%). Для того чтобы получить стандартный размер шрифта, задайте этому атрибуту значение normal.

Свойства текста

При помощи грамотного использования атрибутов можно изменять не только шрифт, но и весь текст. Задать можно с помощью атрибута line-height. Этот параметр задают, указывая точное значение в пикселях, процентное соотношение или множитель. К данному атрибуту применимо значение normal. Можно добавить красивые эффекты для текста, если в этом есть необходимость. Для этого существует атрибут text-decoration. Присвойте ему значение none, если нужно убрать все эффекты оформления. Underline добавит в а overline — линию над текстом. Значение blink сделает текст мигающим, а line-through перечеркнёт его.

Ещё один полезный атрибут — text-transform. Если присвоить ему значение capitalize, то текст будет начинаться с прописных букв. Значение uppercase сделает все буквы прописными, а lowercase, наоборот, строчными. Чтобы убрать все эффекты, присвойте этому атрибуту значение none. Н астроить отступ первой строки поможет text-indent. Ему можно присвоить значение в пикселях или процентах. Text -align — атрибут, отвечающий за выравнивание текста. Возможные значения этого параметра — left, right, center, justify. Не пытайтесь сразу запомнить основные атрибуты, на начальном этапе вам поможет HTML-справочник.

Теги и атрибуты HTML

Если вы решили освоить искусство создания веб-страниц, вам придётся запомнить множество тегов. Атрибуты HTML не менее важны, так как без них невозможно создать сайт. Умелое использование этих компонентов языка позволит создавать приличные веб-страницы.

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

таблица с описанием, примерами и атрибутами

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

ИКСЫ НА ПОДПИСКАХ! Топовые связки, безлимитные крео

HTML-теги с описанием и примерами

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

Базовые

ОписаниеПример использования
 <!—…—> Позволяет добавить комментарии в документ для улучшения читабельности кода. Поддерживается всеми современными браузерами. Вот как нужно выделять шапку сайта вместе с логотипом:  <!—шапка сайта (лого/меню)—>. Или футер:  <!—подвал сайта—>.
<head>Техническая системная информация о документе. Элемент <head></head> представляет собой контейнер, в который помещаются метаданные документа. Содержимое блока видят только поисковые роботы, но для пользователей оно остается невидимыми. На страницах с большим количеством информации, <head> бывает довольно объемным и занимает место от <!DOCTYPE> до <body>.Например, вот как будет выглядеть простой <head> для небольшой страницы: <head> <meta charset=»utf-8»> <title>Моя тестовая страница</title> </head>.
<meta>Тег метаданных, который браузеры используют для обработки страницы, а поисковые боты — для индексации. Пример синтаксиса: <meta charset=»utf-8’’>. Означает кодировку документа — стандарт кодирования символов, позволяющий компактно хранить и передавать символы Юникода.
<body>Контейнер <body></body> обрамляет видимую пользователями часть документа. Другими словами, все что указывается внутри данного блока, отобразится на странице. Это текст, изображения, таблицы, формы, списки и т. д. Тег <body> идет после <head>.Пример использования: <body> <body text=?> цвет текста <body link=? цвет гиперссылок</body>.
<title>Определяет заголовок документа. Размещается внутри контейнера <head>. На странице используется всего 1 раз. Пользователи по <title> узнают, что это за сайт и как называется текущая страница. Поисковые роботы используют <title> для поиска страницы по ключевым словам, поэтому в <title> рекомендуется вставлять основные запросы, чтобы страница лучше ранжировалась в выдаче.Синтаксис: <head> <title> Заголовок страницы</title> </head>.
<p>Определяет параграф или текстовый абзац. Относится к блочным элементам.Синтаксис: <p>Абзац</p>.
<br>Устанавливает перевод строки в том месте, где находится тег. В отличие от <p> не добавляет пустой отступ перед строкой.Если написать текст<br>текст, то эта конструкция будет отображаться так: тексттекст
<hr>Рисует горизонтальную линию и разделяет контент на странице.
<strong>Выделяет текст, который обрамляет, полужирным шрифтом. 
  
<h2>, <h3>, <h4> и т. дОпределяет заголовки HTML от первого до шестого уровня. Относится к блочным элементам, всегда начинается с новой строки.
Синтаксис: <h2>Заголовок первого уровня</h2>.

Базовые tag включают элементы, которые структурируют документ, выводят заголовки, показывают браузерам кодировку, выделяют текст, устанавливают пробелы и линии. По сути, простая страница может состоять только из: <html>, <head>, <title>, <body>.

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

ОписаниеПример использования
<acronym>Определяет акроним (США, замполит, СПИД), поддерживается только HTML 4. По умолчанию подчеркивается пунктиром. 
<abbr>Показывает аббревиатуру или акроним. К тексту автоматически добавляется всплывающая подсказка, в которой можно дать расшифровку аббревиатуры.
<address>Отображает контактную информацию об авторе, может включать в себя другие элементы HTML — ссылки, выделения и т. д.
<bdi>Изолирует фрагмент текста, что требуется при объяснении слов на иврите или других терминов.
<bdo>Изменяет направление текста справа налево, что присуще арабскому языку.<bdo>Снова идет снег</bdo> будет отображаться вот так – генс теди авонС
<progress>С помощью данного tag можно отображать графику прогресса завершенности какой-то задачи.Например, выводите под надписью «Подождите, идет загрузка» — горизонтальный столбик, в которой часть выкрашена цветом.
<big>Увеличивает размер шрифта на 1 единицу по сравнению с используемым шрифтом. Допускается применение нескольких тегов <big>. <big>Все</big> в нашей жизни имеет свое начало и конец, даже неизлечимая болезнь или сумасшедшая <big>любовь</big>
<blockquote>Выделяет длинные цитаты внутри документа. Отображается как выровненный блок с отступами по краям.<blockquote>Какая-то цитата, которую хотим выделить</blockquote>
<q>Выделяет короткие цитаты в пределах одного предложения.
<center>Выравнивание содержимого блока по центру. Например, когда вставляете видео или изображение так, чтобы оно встало посередине между абзацами.
<cite>Выделяет источник статьи.
<del>Выделяет текст, который был удален. Используется для обозначения изменений в документе. Конкретный фрагмент текста вычеркивается.Мой любимый цвет <del>синий</del> красный 
<mark>Новый элемент в HTML5, помечает фрагменты текста фоновым цветом.Что такое хорошо и что такое плохо.
<meter>С помощью этого тега выводятся цифровые значения в виде разноцветной шкалы. Используется вместе с атрибутами value, min, max, low и другими.Например, можно показать изменение температуры воды в виде нескольких шкал. 
<font>Контейнер для изменения характеристик шрифта, размеров, цвета, гарнитуры. Ввиду широкого использования стилей, данный tag уже не так популярен, хотя и поддерживается всеми браузерами.Например, с помощью данного тега можно выделить другим цветом всего одну букву в слове или выделить курсивом только одно слово в предложении.
<rt>Добавляет аннотацию сверху или снизу текста в уменьшенном шрифте.Например, вот так можно выделить календарную дату в тексте:
<samp>Отображает текст в виде скрипта или компьютерной программы.
<dfn>Выделяет курсивом слово в предложении — обычно незнакомый термин или что пожелаете.
<kbd>Обозначает текст моноширным шрифтом, что подходит для наименования компьютерных терминов, клавиш, сочетаний на клавиатуре и т. д.
<pre>Позволяет отобразить блок с предварительно форматированным текстом. Выводится в формате моноширинного шрифта с пробелами между словами.
<small>Уменьшает размер шрифта на единицу по сравнению с используемым шрифтом.
<sub>Отображает нижний регистр.
<sup>Отображает верхний регистр.
<u>Подчеркивает какое-то слово.Например, с помощью <u> можно отобразить меню.
<time>Текст внутри этого тега будет отображен в виде даты и времени. Используется вместе с атрибутами datetime, pubdate.
<var>Выделяет математические формулы и переменные.
<wbr>Используется для очень длинных слов. С помощью этого tag можно указать браузерам, в каких местах слово нужно переносить на новую строку.
  Устанавливает жирный шрифт. Можно использовать вкупе с другими тегами, обозначающими начертание текста. <b>Изображения</b> особенно важны при верстке <b>макета</b>.
<b>

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

Для вставки форм

С помощью данных тегов вы сможете вставлять в текст или корректировать интерактивные опросы, систему комментариев, конвертер и т. д. 

Для фреймов

ОписаниеПример использования
<frameset>Определяет структуру фреймов на web-странице. Окно браузера делится на отдельные области, расположенные вплотную друг к другу, куда можно загружать самостоятельную web-page. 
<iframe>Отображает плавающий фрейм, позволяет загружать отдельные документы в область заданных размеров.

Теги для фреймов можно использовать для оформления оглавлений, неподвижных элементов интерфейса, форм и результатов. На данный момент большинство фреймов устарели и не поддерживаются HTML5. 

Для картинок

Эти теги позволят грамотнее работать с изображениями.

Для видео и аудио

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

Для ссылок

ОписаниеПример использования
<a>Вывод гиперссылки.
<nav>Отображает ссылки для навигации.

Эти tag дают возможность работать со ссылками.

Для списков

Теги списков структурируют текст на сайте.

Для таблиц

Эти теги задают различные настройки для работы с таблицами.

Для стилизации

Улучшают внешний вид различных элементов на сайте, значительно упрощают работу.

Для скриптов

С помощью тегов скриптов вы сможете манипулировать с изображениями, формами проверки, динамически изменять содержание и т. д. Чаще всего используется в этом случае JavaScript. 

Зачем знать HTML-теги

Зная HTML, вы сможете делать быстрые сайты без подключения к базе данных и PHP. Например, через стандартный блокнот. Но сегодня редко кто делает web-площадки с нуля и пишет для этого код (узнайте, как создать сайт самому). Однако в диджитал-маркетинге частенько приходится решать массу других задач: 

  • запускать Email-рассылки;
  • стильно оформлять УТП и замерять эффективность каждого предложения;
  • упрощать рутинные процессы;
  • проводить внутреннюю поисковую оптимизацию лендинга или сайта, чтобы страницы попадали на верхние строчки выдачи — для этого нужно понимать, как работают скрипты и какой блок за что отвечает;
  • развивать свой блог, вести аналитику и т. д.

Без знаний HTML хотя бы на базовом уровне, все это делать не получится. Этот язык отвечает за семантическую структуру. Именно этот код понимают поисковые роботы: какие слова и фразы особенно важны на странице, по каким запросам нужно показывать пользователям материал и т. д. 

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

Теги — это базовые и важнейшие единицы HTML. Вокруг них строится весь HTML язык. Именно tag указывают поисковикам, какие элементы текста особенно важны, а какие — второстепенны. Короче, с помощью данных элементов вы можете общаться с роботом Гугла или Яндекса. Например, сказать им: смотри, моя статья о том, как зарабатывать на арбитраже трафика, и если люди будут спрашивать, то приводи их ко мне, потому что у меня есть много полезной информации.

Для лучшего представления, что такое теги — сравним их с кейсами. В них вы кладете слова. Допустим, в один кейс положили основной заголовок статьи — подписываете, что это h2. В другой — поставили абзац. В третий — заголовок второго уровня и т. д. При этом в одном кейсе могут находиться несколько более мелких отделений. Например, в кейсе абзац могут находиться отделения с такими названиями: текст курсивом, текст полужирным, перенос, сплошная линия и т. д.

Все tag заключены в скобки типа <>. Бывают в основном парными (с закрывающимися </>), но встречаются и одиночные типа <br>. Внутри них вставляется текст, и в совокупности получается элемент HTML, то есть основная структурная единица web-документа.

Заключение

Без базовых навыков HTML невозможно представить SEO. Теги — основа этого языка, ведь с их помощью строятся все важные элементы.

2.1. Теги в HTML. Одинарные и парные теги — Знакомство с HTML — codebra

Думаю, что вы поняли из чего состоит код HTML? Верно, из множества парных и одинарных тегов. В этом параграфе разберемся подробнее с HTML тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А парные дескрипторы состоят из двух частей, одна из которых указывает начало, другая конец.

Одинарные теги HTML

Одинарные теги не имеют закрывающего тега. Например: <br>, <img>. В ранних версиях было правильно (согласно стандарта) писать: <br/>, <img/>, теперь такой стиль написания одинарных тегов не актуален. Как сказал А.П. Чехов: “Краткость — сестра таланта”, всегда при написании кода необходимо руководствоваться этим правилом. Если можно сократить, упростить, то сделайте это. Поэтому не стоит лишний раз ставить слэш, разумеется, если вы заявили о том, что ваш HTML документ пятой версии. Про версии HTML было сказано ранее. Самые используемые одинарные теги: <br> — перенос на новую строку, <hr> — разделительная линия, <img> — вставка изображения.

Парные теги HTML

Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В коде 2.1.1.1 есть строка <h2>Что такое дескрипторы в HTML?</h2>, так вот, это парный тег, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег <h2>, а концом </h2>, в данном случае слэш перед именем тега обязателен.

Главная проблема, с которой сталкиваются на начальных этапах, это путаница в написании парных тегов, это неразбериха во вложенности. Например, вот это правильная запись: <p><b>Жирный абзац</b></p>. А здесь заключена ошибка: <p><b>Жирный абзац</p></b>, HTML документ с такой версткой считается не валидным. Валидный код — это код написанный в соответствии со стандартами, разработаными Консорциумом Всемироной Паутины (W3C). Чтобы не путать вложенность, следуйте следующему алгоритму: создайте парные теги <p></p>, далее вложите в них другие <p><b></b></p>, и в конце напишите текст внутрь обоих тегов <p><b>Как правильно писать парные теги</b></p>.

Что нового в HTML5 в плане тегов?

Язык HTML5 является расширением HTML4, поэтому в нем сохранены все дескрипторы HTML4 и добавлены новые. В HTML5 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.

Почему важно научиться пользоваться тегами?

Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. В этом разделе речь идет о верстке страниц на HTML, поэтому не будём углубляться в эту тему, которая относится к продвижению (SEO).

Как выучить все теги HTML?

Да, тегов большое множество и это не все что нужно знать. Специально учить их нет необходимости. Индейцы метко подметили: “Скажи мне – и я забуду, покажи мне – и я не смогу запомнить, привлеки меня к участию – и я пойму”. Пока вы будете практиковаться, что-то писать, у вас все дескрипторы, парные и одинарные, легко запомнятся. Со временем, конечно. А если что-то забыли, то всегда можно обратиться к справочнику.

Если урок был полезным,
можете поделиться им с друзьями

тегов — теги html с примерами

Обратите внимание, что вы можете сделать что-то вроде этого (по крайней мере, в MVC3):

<td align="left" @(isOddRow ? "class=TopBorder" : "style=border:0px") >

То, что я считал, — это бритва, добавляющая цитаты, на самом деле браузер. Как отметил Райс при тестировании с MVC 4 (я не тестировал с MVC 3, но я предполагаю, что поведение не изменилось), это фактически создает class=TopBorder но браузеры могут разбирать этот штраф. Парсеры HTML несколько прощают отсутствующие атрибуты кавычек, но это может сломаться, если у вас есть пробелы или определенные символы .

<td align="left" >

ИЛИ

<td align="left" >

Что не так с предоставлением собственных котировок

Если вы попытаетесь использовать некоторые обычные C # -конвенции для вложенных кавычек, вы получите больше кавычек, чем вы рассчитывали, потому что Razor пытается безопасно избежать их. Например:

<button type="button" @(true ? "style=\"border:0px\"" : string.Empty)>

Это должно оцениваться как <button type="button"> но Razor избегает всего вывода из C # и, таким образом, производит:

style=&quot;border:0px&quot;

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

style="&quot;border:0px&quot;"

Но в инспекторе DOM HTML-коды символов отображаются правильно, поэтому вы действительно видите:

style=""border:0px""

В Chrome, если вы щелкните правой кнопкой мыши и выберите «Редактировать HTML», он переключится обратно, чтобы вы могли видеть эти неприятные коды символов HTML, давая понять, что у вас есть настоящие внешние кавычки и внутренние котировки с кодировкой HTML.

Таким образом, проблема с попыткой сделать цитату сама по себе — это Razor.

Если вы хотите получить полный контроль над котировками

Используйте Html.Raw для предотвращения сбрасывания котировок:

<td @Html.Raw( someBoolean ? "rel='tooltip' data-container='.drillDown a'" : "" )>

Оформляет как:

<td rel='tooltip' title='Drilldown' data-container='.drillDown a'>

Вышеизложенное абсолютно безопасно, потому что я не выводю HTML из переменной. Единственной переменной является тройное условие. Однако будьте осторожны, что этот последний метод может подвергнуть вас определенным проблемам безопасности, если строит строки из предоставленных пользователем данных. Например, если вы создали атрибут из полей данных, созданных из предоставленных пользователем данных, использование Html.Raw означает, что строка может содержать преждевременное завершение атрибута и тега, а затем начать тег скрипта, который делает что-то от имени текущего пользователя пользователь (возможно, отличный от зарегистрированного пользователя). Возможно, у вас есть страница со списком всех фотографий пользователей, и вы устанавливаете всплывающую подсказку, чтобы быть именем пользователя для каждого человека, а один пользователь назвал себя '/><script>$.post('changepassword.php?password=123')</script> и теперь любой другой пользователь, просматривающий эту страницу, мгновенно изменяет свой пароль на пароль, который знает злоумышленник.

Как использовать теги html

Основные теги HTML

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

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

Список тегов html

1. HTML тег <p></p> (для абзацев)

<p></p> — выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).

Например, html код:

Преобразуется на странице в следующее:

Текстовый абзац номер один

А это другой абзац

К тегу можно ещё приписать параметр style:

С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font.

Также можно прописать атрибуты CLASS и ID . Например:

2. HTML тег <b> и </strong> (выделение жирным)

<b></b> и <strong></strong> — два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет.

Приведем пример. Html код:

Преобразуется на странице в следующее:

Также можно прописать атрибуты CLASS и ID (как и в случае с <p>).

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

3. HTML тег <i> (создание курсива)

<i></i> — курсивный шрифт (допускает параметр style, class, id)

Например, html код:

Преобразуется на странице в следующее:

4. HTML тег <u> (подчеркнутый текст)

<u></u> — подчеркнутый шрифт (допускает параметр style, class, id)

Например, html код:

Преобразуется на странице в следующее:

5. HTML тег <a> (создание гиперссылки)

<a href=»links»></a> — создает ссылку на странице (допускает параметр style, class и другие).

Например, html код:

Преобразуется на странице в следующее:

Все параметры и атрибуты тега <a> будут рассмотрены в отдельном уроке: html тег <a>.

6. HTML тег <h2> (заголовки в контенте)

<h2></h2>. <h6></h6> — заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.

Например, html код:

Тег <h2> используют для названия страницы (также как и тайтл)

Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги <h2></h2>. <h6></h6> имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.

Более подробно про эти теги читайте в 14 уроке: HTML теги h2-h6

7. HTML тег <center> (выравнивание)

<center></center> — выравнивает контент по центру.

Например, html код:

Преобразуется на странице в следующее:

Рекомендуется не использовать тег <center></center> , а вместо него использовать такие конструкции:

  • <p>. </p> — для текста
  • <div>. </div> — для всего (например, изображение)
8. HTML тег <sub> (подстрочный текст)

<sub></sub> — выводит подстрочный шрифт.

Например, html код:

Преобразуется на странице в следующее:

9. HTML тег <sup> (надстрочный текст)

<sup></sup> — выводит надстрочный шрифт.

Например, html код:

Преобразуется на странице в следующее:

10. HTML тег <big>, <small>

<big></big>, <small></small> — выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).

Например, html код:

Преобразуется на странице в следующее:

11. HTML тег <ul> (создание списков)

<ul><li>. </li></ul> — выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li> .

Например, html код:

Преобразуется на странице в следующее:

  • первый элемент списка
  • второй элемент списка

Более подробно про списки читайте в 13 уроке тег <ul> — создание списков в HTML

12. HTML тег <table> (создание таблиц)

<table></table> — создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами <tr></tr> , а столбец <td></td> .

Например, html код:

Преобразуется на странице в следующее:

1-строка 1 элемент 1-строка 2 элемент
1-строка 1 элемент 1-строка 2 элемент

Все возможности тега <table> будут рассмотрены в отдельном уроке: html тег <table>.

13. HTML тег <br> (перенос строки)

<br/> — переход на следующую строку, представляет собой одиночный тег.

Например, html код:

Преобразуется на странице в следующее:

14. HTML тег <hr> (горизонтальная линия)

<hr/> — чертит линию, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

Преобразуется на странице в следующее:

15. HTML тег <img> (вывод картинки)

<img src=»https://zarabotat-na-sajte.ru/uroki-html/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D0%BD%D0%B0_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5″> — выводит изображение, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

Преобразуется на странице в следующее:

Все возможности тега <img> будут рассмотрены в отдельном уроке: html тег <img>.

16. HTML тег <font> (форматирование текста)

<font></font> — для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.

Например, html код:

Преобразуется на странице в следующее:

Аналогичным тегом является <span></span> .

Более подробно с font можете ознакомиться в статье: тег <font>

17. HTML тег <form> (создание формы)

<form></form> — создание формы на странице (допускает параметр style, class).

Например, ввод логина и пароля, любые кнопки, любая форма регистрации — все это формы.

Подробное описание этого тега читайте: тег <form> — создание html форм.

18. HTML тег <div> (создание блоков)

<div></div> — служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.

Подробное описание этого тега читайте в статье: html тег <div>.

19. HTML тег <!—ком—> (комментарии)

<!—комментарий—> — служит для добавления комментариев в коде html. Все, что заключено между <!— и —> является комментарием и не отображается на интернет странице.

Комментарии html очень удобны и позволяют упростить код, делая его более понятным. Приведем простой пример:

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

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

Супершпаргалка по верстке для новичков: все основные HTML-теги

Полное руководство для блогеров и начинающих верстальщиков. Разберем все самые необходимые HTML-теги и примеры их использования.

HTML-теги для форматирования текста

Заголовки

Заголовки подчеркивают особую важность заключенного в них текста. Вы можете использовать теги от <h2> до <h6> . Чем больше порядковый номер заголовка, тем меньше важность и размер текста по умолчанию.

Выравнивание заголовков

Заголовки можно выравнивать на странице, но для этого потребуется щепотка CSS:

Можно также использовать ключевые слова left , right или justify .

Абзацы

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

Выравнивание абзацев

Все работает точно так же, как для заголовков:

Другие значения: left , right или justify .

Разрыв строки

Вместо абзацев можно использовать разрыв строки. Это позволит перенести текст на новую строку в рамках одного параграфа.

Жирный текст

Установит жирное начертание:

Важный жирный текст

Кроме физического выделения жирным, добавляет семантическое. Выделенный текст будет считаться особенно важным для прочтения и понимания:

Курсивный текст

Устанавливает курсивное начертание:

Курсивный текст с особой важностью

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

Подчеркнутый текст
Перечеркнутый текст

Добавляет эффект перечеркивания:

Семейство шрифта

Можно изменить шрифт текста с помощью CSS. Используйте безопасные шрифты или подключите Google fonts.

Размер шрифта

Для указания размера можно использовать px , em или проценты. Вот пример с пикселями:

Цвет шрифта

Установите для текста любой HEX-цвет по вашему выбору.

Выделенный текст

Выделите фрагмент текста с помощью CSS и фонового цвета:

Цитата

Полезно для выделения цитат и важных фрагментов текста.

HTML-теги для ссылок

Обычные текстовые ссылки

Гиперссылкой можно сделать слово или целый фрагмент текста. Замените текст http://www.yourlink.com на нужный вам адрес:

Открытие в новой вкладке

Используется для открытия гиперссылки в новой вкладке браузера, а не на текущей странице:

Ссылка на email-адрес

Открывает почтовую программу на компьютере пользователя для отправки письма по указанному адресу:

Ссылка на email с указанием темы письма

Полезно, если вы хотите установить для письма клиента конкретную тему. Вместо пробелов используйте %20 :

Ссылка-якорь

Позволяет при клике «перепрыгнуть» на определенное место на странице. Ссылка-якорь состоит из двух частей. Первая – непосредственно конечная точка прыжка. Например, это может быть начало поста. Значение атрибута name должно быть уникальным в рамках страницы:

Вторая – ссылка, клик по которой отправит пользователя в нужное место документа:

Фон для элементов необходимо указывать в главном CSS-файле сайта или в определенном разделе вашей админ-панели. Если у вас нет такого файла или раздела, вы можете разместить код между тегами <style> и </style> в секции <head> прямо на странице. В большинстве случаев рекомендуется все же создать отдельный внешний CSS-файл.

Фоновый цвет страницы

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

Повторяющееся фоновое изображение

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

Чтобы изображение повторялось только по вертикали, замените значение repeat на repeat-y . Аналогично для повторения только по горизонтали используйте repeat-x .

Неповторяющееся фоновое изображение

Чтобы изображение отображалось на фоне всего один раз, используйте следующий код:

Неповторяющееся фоновое изображение сверху в центре

Установите фоновую картинку вверху страницы:

Вертикально повторяющееся фоновое изображение сверху в центре

Картинка отобразится наверху страницы и будет вертикально повторяться:

Не забудьте заменить URL-адрес изображения.

Списки

Нумерованный список

Создание упорядоченного списка элементов:

Маркированный список с буллитами

Буллиты заменяют собой цифры:

Маркированный список с другими маркерами

Вид буллита можно изменить. Возможные варианты: circle , square , disc (установлено по умолчанию).

Маркированный список с пользовательскими маркерами

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

Специальные символы HTML

© – копирайт &copy;
< – знак «меньше» &lt;
> – знак «больше» &gt;
& – амперсанд &amp;
™ – торговая марка &trade;
® – зарегистрированная торговая марка &reg;
неразрывный пробел &nbsp;
” – двойная кавычка &quot;
♥ – сердце &hearts;
€ – евро &euro;
← – стрелочка влево &larr;
→ – стрелочка вправо &rarr;
↑ – стрелочка вверх &uarr;
↓ – стрелочка вниз &darr;

Большую таблицу HTML-символов вы можете найти здесь.

Если, узнав базовые HTML-теги, вы захотели глубже изучить верстку, ознакомьтесь с небольшой подборкой наших материалов:

Таблица основных тегов html с примерами

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

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

Базовые теги

<!—. —> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

Форматирование текста

<h2></h2>. <h6></h6>. — теги заголовков, от самого большого к самому маленькому.

<b></b> — жирный текст без придания важности выделенному фрагменту.

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

<i></i> — выделение текста курсивом без придания важности.

<del></del> — зачёркивает текст, помечая его удалённым.

<s></s> — отображает перечёркнутый текст.

<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.

<u> — подчёркивание без дополнительного акцентирования внимания.

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.

<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия

<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

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

<code></code> — выделение фрагмента кода с помощью шрифта monospace.

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.

<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio> — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).

<source></source> — указывает местоположение файла для <video>, <audio> и <picture>

<track> — формирует субтитры для <video> и <audio>.

<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.

<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

Работа с таблицами

<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

<thead></thead> — определяет заголовок.

<tbody></tbody> — отмечает тело таблицы.

<th></th> — указывает на заголовок ячейки.

<tr> — создание одной строки.

<tfoot></tfoot> — показывает нижний колонтитул.

<caption></caption> — вставляет подпись. Указывается после тега <table>.

<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.

Создание форм и кнопок

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

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.

<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.

<input> — формирует поля для добавления пользовательских данных.

<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.

<textarea></textarea> — создаёт большие поля для ввода текста.

Основные теги HTML, структура html страницы

HTML(HyperText Markup Language) – это язык разметки гипертекста. Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag — именованная метка.

Гипертекст – это документ, разметка которого выполнена с помощью языка HTML. Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».

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

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

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> </body> </html>

<!DOCTYPE html>

<html lang=»ru»>

<head>

  <meta charset=»UTF-8″>

  <title>Document</title>

</head>

<body>

  

</body>

</html>

Строка <html> называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:

  • Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов: <html></html>
  • Непарные — теги, которые не закрываются. Пример: <br>

Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!

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

Рассмотрим структуру HTML документа:

  • <!DOCTYPE html> — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5.
  • <HTML></HTML> — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
  • <head></head> -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
  • <body></body> — все что отображается на странице, пишется в теге body.

Для расширения функционала HTML в тегах добавляют специальную информацию, которая называется атрибутами. Так в строке:

charset=»UTF-8″ — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.

Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.

Вопросы для самоконтроля

  1. Что такое гипертекст?
  2. В чем состоит необходимость использования HTML?
  3. Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
  4. Какие виды атрибутов вам известны?
  5. Что такое теги? Чем они отличаются от атрибутов?
  6. Какие теги обязательно должна содержать HTML страница?

Текст урока разработан совместно с Каменщик М.

Список тегов HTML: Шпаргалка по HTML

Понимание каждого тега HTML является важным шагом в реализации собственного HTML-кода.

Используйте это руководство в качестве справочника по стандартным тегам HTML и их использованию.

Теги HTML — это простые инструкции, которые сообщают веб-браузеру, как форматировать текст. Вы можете использовать теги для форматирования курсива, разрывов строк, объектов, маркеров и многого другого.

Эти теги находятся в HTML (или языке гипертекстовой разметки) каждой веб-страницы. Проще говоря, HTML — это язык веб-страниц.

Как веб-страницы читают теги HTML?

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

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

Тег HTML должен состоять из трех частей:

  1. Открывающий тег — начинается с символа < >
  2. Контент — краткие инструкции по отображению элемента на странице
  3. Закрывающий тег — заканчивается с символом

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

В чем разница между атрибутами и тегами HTML?

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

Элемент HTML — это элемент на странице; это часть содержимого веб-страницы. Тег HTML влияет на то, как отображается элемент HTML. Атрибут HTML описывает характеристики этого элемента.

Вот описание совместной работы элементов, тегов и атрибутов:

  • HTML-теги содержат инструкции по отображению элемента на странице. Они начинаются с < и заканчиваются > и предшествуют содержимому элемента и следуют за ним. (например, Полужирный тег )
  • HTML-элементы — это содержимое страницы, заключенное в теги. ( Жирный тег
  • HTML-атрибуты предоставляют дополнительную информацию об элементах HTML и отображаются внутри тега HTML (например,грамм. ).

Тип

HTML-теги

HTML Elements

HTML Атрибуты

Содержит

Инструкции о том, как отобразить на Элемент элемента

контент на странице, который будет отображаться

Дополнительная информация об элементах на странице

внешний вид

он начинается с <и заканчивается>

Появляются в начальном теге перед любыми элементами

Примеры HTML-тегов

Тег абзаца

и

теги HTML, а «тег абзаца» — это элемент HTML, т.е.е. текст на странице.

Этот тег форматирует любой текст между открывающим тегом

и закрывающим тегом

как стандартный абзац или основной текст.

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

В этом примере

и

— это теги HTML, а «Тег заголовка» — элемент HTML, т. е. заголовок на странице.

Использование этого тега отформатирует любой текст между открывающим тегом

и закрывающим тегом

как заголовок 2 (тип подзаголовка.) 

Жирный тег

Здесь и — это HTML-теги, а «Полужирный тег» — это элемент HTML, т. е. текст на странице.

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

Тег
Курсив

Здесь и — теги HTML, а «Тег курсива» — элемент HTML (текст на странице).

Этот тег будет отформатируйте любой текст между открывающим тегом и закрывающим тегом курсивом.

Тег подчеркивания

Здесь и — это теги HTML, а «Тег подчеркивания» — элемент HTML, т. е. текст на странице.

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

Существует около 100 различных типов тегов HTML, которые вы можете использовать для своих веб-страниц. Вот список самых распространенных тегов HTML:

HTML Text Tags

3

abbrviation

900 52

2

2

2

900 52

HTML-теги

Что это

HTML Text Теги

пункт

HTML Text Tags

заголовок 2

6

HTML Text Tags

заголовок 4

Текстовые теги HTML

Заголовок 5

6

HTML Text Tags

HTML Text Tags

STRIL

HTML Text Tags

акцент

HTML Text Tags

HTML Text Tags

Контактная информация

3

HTML Text Tags

Открытие текущего текста Направление

HTML Text Tags

Контент из другого источника

HTML Text Tags

Название работы, Книга, Сайт

HTML Text Tags

встроенные цитаты

<код>

<код>

HTML Text Tags

Дисплей часть программирования Код

HTML Text Tags

Text вставлен

HTML Text Tags

Текст Удаленный из документа

HTML Text Tags

Термин, определенный в предложении / фразу

Текстовые теги HTML

Ключ Доска ввода

 

6

Preformatted Text

2

HTML Text Tags

Пример вывода компьютерной программы

HTML Text Tags

Переменная Имя, используемые в математическом или программировании Context


HTML Text Tags

Однопроизводитель Break

HTML Text Tags

HTML Link Tags

6

Якорь для ссылки

Теги ссылок HTML 900 03

базовый URL для всех относительных URL в документе

HTML-изображения и теги объекта

6

изображение

<Область>

HTML Изображение и объектные теги

площадь карты

HTML Изображение и объектные теги

6

Карта изображения

HTML-изображения и объектные теги

Параметр для <Объект> Элемент

<Объект>

HTML-изображения и объектные теги

встроить объект

Теги списка HTML

Ненумерованный список

HTML List Tags

заказанный список

  • List

    HTML-теги списка HTML

    Описание

    HTML-теги

    срок в описании Список

    HTML Теги списка

    Определение/описание термина в списке описаний

    Полный список всех 100+ элементов HTML см. в этом полезном руководстве от javaTpoint.

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

    Чтобы просмотреть HTML-код вашей веб-страницы, вам необходимо:

    1. Щелкните правой кнопкой мыши на веб-странице в Google Chrome
    2. Нажмите «Проверить»
    3. Вы увидите HTML-код в поле сбоку или внизу страницы
    4. Используйте Ctrl + F, чтобы найти определенные теги или элементы

    Чтобы проверить, правильно ли ваш веб-сайт использует HTML-теги, вы можете провести SEO-аудит своего сайта.Сторонние инструменты, такие как инструмент аудита сайта, могут проверить правильность основных тегов и атрибутов HTML и не используют ли ваши страницы слишком много HTML.

    Чтобы выполнить SEO-аудит с помощью инструмента Site Audit, вам необходимо сначала создать проект для своего домена. Если у вас уже есть проект, выберите параметр «Аудит сайта» на панели инструментов проекта:

    Инструмент предложит вам ввести целевой домен и настроить любые дополнительные параметры:

    Используйте настройки инструмента, чтобы установить область сканирования, запретить URL-адреса или предоставить дополнительный доступ к веб-сайту.Выберите «Начать аудит сайта». Инструмент сообщит вам, когда аудит будет завершен.

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

    Выберите вкладку «Проблемы» для более подробного просмотра любых проблем с HTML. Инструмент также предоставляет рекомендации по устранению каждой проблемы:

    Заключительные мысли

    Понимание HTML не должно быть сложным. С помощью шпаргалки в этом руководстве вы должны определить и внедрить теги HTML для своих веб-страниц.

    Нужна дополнительная информация об атрибутах HTML и о том, как их исправить? Ознакомьтесь с нашим руководством по HTML-атрибутам.

    Для получения дополнительной информации о проведении аудита сайта и проверке HTML вашего сайта ознакомьтесь с нашим руководством по проведению полного аудита SEO за 18 шагов.

    Теги HTML — список всех тегов HTML с примерами TutorialBrain

    Главная » HTML » Теги HTML

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

    Тег Описание
    Описывает HTML-документ.
    <голова> Представляет головной раздел HTML-документа.
    <название> Описывает заголовок HTML-документа.
    <тело> Описывает содержимое документа.
    Этот тег используется для вставки комментария в код документа.
    Тег Описание

    Заголовок второго уровня 2

    Заголовок третьего уровня 3

    Заголовок четвертого уровня 4
    Заголовок пятого уровня 5
    Это наименьший заголовок 6
    Тег Описание

    Пункт

    Подробнее о

    см. здесь.

    Тег Описание
    <базовый> Описывает базовый URL-адрес для всех других относительных URL-адресов.
    <а> Задает гиперссылку.
    Тег Описание
    <сценарий> Описывает сценарий на стороне клиента, который представляет собой JavaScript.
    Когда сценарии отключены, тег
    Тег Описание
    <таблица> Чтобы определить таблицу в HTML.
    <заголовок> Чтобы определить заголовок таблицы в HTML. Это как имя таблицы
    -й похож на «Заголовок таблицы», чтобы указать ячейку заголовка в таблице. Он используется для предоставления имени столбца таблицы.
    tr похоже на «Table Row», чтобы указать строку в таблице.Он используется для каждой строки таблицы.
    <тд> td похож на «Данные таблицы», чтобы указать ячейку в таблице.
    <заголовок> thead похож на «Заголовок таблицы», используемый для изменения свойств, таких как цвет содержимого заголовка в таблице HTML. Мы можем изменить свойства заголовка.
    tbody похож на «Тело таблицы», используемое для изменения свойств, таких как цвет содержимого в теле в таблице HTML.Мы можем изменить свойства тела.
    tfoot похож на «нижний колонтитул таблицы», используемый для изменения свойств, таких как цвет содержимого нижнего колонтитула в таблице HTML. Мы можем изменить свойства нижнего колонтитула.
    <столбец> Определяет свойства каждого столбца в colgroup.
    Используется для указания группы из одного или нескольких столбцов в таблице для форматирования.
    Форма
    Тег Описание
    <форма> используется на всех веб-сайтах для сбора информации о пользователях, посещающих ваш веб-сайт.
    <ввод> Это поле ввода, где пользователь может ввести данные в заданной форме.
    <текстовое поле> Представляет многострочный элемент управления для редактирования обычного текста.
    <кнопка> Создает различные интерактивные кнопки, такие как «Отправить», «Сбросить», «Отменить», «ОК» и многие другие.
    <выбрать> Описывает раскрывающийся список.
    <оптгруппа> Отобразить группу связанных списков опций в виде выпадающего списка.
    <опция> Отображает параметр в раскрывающемся списке.
    <метка> Описывает текстовую метку с полем ввода формы.
    <набор полей> Для формирования связанных данных в группе используется элемент
    .
    <легенда> Представляет заголовок элемента
    .
    <список данных> В раскрывающемся списке указан предопределенный параметр.
    <выход> Объявляет результаты расчета.
    Тег Описание
    <сокращение> Указывает сокращения.
    <адрес> Мы можем предоставить контактную информацию автора страницы, используя элемент адреса.
    Используется для выделения жирным шрифтом.
    BDI означает двунаправленную изоляцию.Он форматирует текст в другом направлении.
    Описывает двунаправленное переопределение текста.
    <цитата> Элемент HTML blockquote используется для форматирования блока текста в виде длинной цитаты с большим отступом, чем окружающий текст.
    <цитировать> Указывает название работы.
    <код> Задает текст в компьютерном коде.
    <удалить> Определяет удаленный текст в документе HTML.
    Этот тег используется для термина определения в HTML.
    Форматирует текст в документе, делая его выделенным.
    <я> Форматирует текст в документе курсивом.
    ins описывает вставленный текст в HTML-документ.
    Обозначает вводимый пользователем текст с клавиатуры.
    <метка> помечает текст.
    <метр> В предопределенном диапазоне тег указывает скалярное измерение, известное как манометр.
    <пред> Описывает предварительно отформатированный текст на HTML-странице. Он используется для сохранения существующих пробелов или разрывов строк.
    <прогресс> Ход выполнения любой задачи определяется индикатором выполнения.
    Объявляет короткие котировки.
    <рп> Этот тег используется для помощи браузерам, которые не поддерживаются аннотацией ruby.
    Задает произношение символов в аннотациях ruby.
    <рубин> Задает рубиновую аннотацию, которая используется для отображения многих восточноазиатских языков.
    <с> Указывает, что данный текст неверен и перечеркнут текст.
    <образец> Описывает образец вывода компьютерной программы.
    <маленький> Опишите мелкий текст.
    <сильный> Используется для описания важного текста.
    Мы можем добавить индекс к тексту.
    <вверх> используется для добавления надстрочного индекса к тексту.
    <шаблон> Для шаблона.
    <время> Указывает дату и время в документе HTML.
    <тт> Опишите текст телетайпа.
    <вар> Указывает имя переменной в математическом выражении или контексте программирования.
    Указывает положение в тексте, где браузер может при необходимости разорвать строку.
    Тег Описание
    Представляет изображение.
    <карта> Представлять карту в теге . И карта изображения содержит интерактивные области.
    <область> Используется для определения области внутри карты-изображения, где он содержит интерактивную область на карте-изображении.
    <холст> Этот тег в HTML5 используется для рисования графики на веб-странице с помощью JavaScript.
    Этот тег дает подпись к элементу рисунка.Его можно поместить в качестве первого или последнего дочернего элемента элемента
    .
    <рисунок> Определяет медиа-контент с титрами. Содержимое элемента
    принадлежит основному потоку.
    Это язык, используемый для описания 2D-графики и графических приложений в формате XML.
    Тег Описание
    <голова> Представляет головной раздел HTML-документа, который содержит метаинформацию о HTML-странице
    <мета> Описывает метаданные HTML-страницы, где содержится описание страницы, автор страницы, ключевые слова.
    <базовый> Описывает базовый URL-адрес для всех других относительных URL-адресов.
    <базовый шрифт> Этот тег используется для указания размера шрифта, цвета и семейства шрифтов для документа. (устарело)

    вы можете щелкнуть здесь для получения дополнительных сведений о метатегах

    Тег Описание
    <объект> Используется для встраивания мультимедиа в HTML-документы, такие как видео, аудио, апплеты Java, ActiveX, PDF и Flash.

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

    .
    Тег Описание
    <ул> Тег используется для ненумерованного списка. В списке будут элементы, отмеченные маркированными элементами
    <ол> Представляет упорядоченный список в числовом или алфавитном порядке
  • Представляет элемент или элементы в списке.Мы можем перечислить термин и описание термина ниже этого
    <дл> Используется для списка описаний.
    <дт> Для Term в списке описания.
    <дд> Этот тег представляет описание термина в списке описаний.
    <меню> Представляет список команд, которые используются для построения меню.
    <пункт меню> Представляет команду, которую пользователь может вызвать из всплывающего меню.
    Тег Описание
    <час> Представляет тематический разрыв между элементами уровня абзаца в документе HTML. Если мы воспользуемся этим, он вставит горизонтальную линию.

    Используется для разрыва строки (разрыв строки).

    Интервью Вопросы и ответы

    Тег

    — это HTML-код, определяющий каждую структуру на HTML-странице.Теги начинаются с «<>» и заканчиваются на «». Большая часть тега содержит открывающий и закрывающий теги.
    Например,

    <> — открывающий тег.
    — закрывающий тег.

    Большинство тегов HTML также имеют закрывающий тег, но есть несколько тегов/элементов HTML, которые не требуют закрывающих тегов, а именно: -


    - разрыв строки


    - горизонтальная строка

    В HTML есть 6 заголовков: -

    ……


     

    ……


     

    ……


     
    ……

     
    ……

     
    ……

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


    – Для разрыва строки.


    - Выделить Абзац.
    - Для больших кавычек.

    Наиболее часто используемые теги в HTML

    HTML содержит множество предопределенных тегов. Некоторые из них описаны ниже:
     

    Тег структуры документа:  

    • Тег HTML : Это корень html-документа, который используется для указания того, что документ является html.
      Синтаксис:  
       
      Операторы...  

    HTML

    90 053

    < HTML>

    < головки>

    < название > Название вашей веб-страницы >

    >

    < Body > Содержание веб-страницы HTML Body >

    HTML >

    • Главный тег: Главный тег используется для содержения всех элементов головы в файле HTML.Он содержит заголовок, стиль, мета-тег и т. д.
      синтаксис:
      утверждения ...  
    5 html
  • < Глава > содержит элементы, описывающие документ головки >

    • Тег тела: Используется для определения тела HTML-документа. Он содержит изображения, таблицы, списки и т. д.
      Синтаксис:
      утверждения ...  

    html

    < body > Содержание вашей HTML Page Body >

    • Тег заголовка: Используется для определения заголовка HTML-документа.

    синтаксис:

      утверждения ... </ title> </pre> <p> <strong> код: <p> <strong> код: <p> <strong>: </strong> </p> <p> <strong> Контент контейнер Тег: </strong> </p> <p> <strong> Тег заголовка: </strong> Используется для определения заголовка HTML документ.<br/>   </p> <p> <strong> Синтаксис: </strong>   </p> <pre> <h2><span class="ez-toc-section" id="i-69"> Заявления... </span></h2></h>
     <h3><span class="ez-toc-section" id="i-70"> Утверждения... </span></h3> 
     <h4><span class="ez-toc-section" id="i-71"> Утверждения... </span></h4> 
     <h5><span class="ez-toc-section" id="i-72"> Утверждения... </span></h5> 
     <h5><span class="ez-toc-section" id="i-73"> Утверждения... </span></h5> 
    <H6> Отчеты ... </h6></ H6> </pre> <p> <strong> код: </strong> </p> <h3><span class="ez-toc-section" id="HTML-5"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> H2 </code> <code>> заголовок 1 </ </code> <code> H2 </code> <code>> </code> </p> <p> <code> <</code> <code> H3 </code> <code>> Заголовок 2 </ </code> <code> H3 </code> <code>> </code> </p> <p> </code> </p> <p> <code> <</code> <code> H4 </code> <code>> Руководство 3 </ </code> <code> H4 </code> <code>> </code> </p> <p> <code> <</code> <code> H5 </code> <code>> Руководство 4 < / </code> <code> h5 </code> <code>> </code> </p> <p> <code> <</code> <code> h5 </code> <code>> Heading 5 </ </code> <code> h5 </code> <code>> </code> </p> <p> <code> <</code> <code> H6 </code> <code>> Заголовок 6 </ </code> <code> H6 </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег абзаца: </strong> Используется для определения содержимого абзаца в html-документе.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <p> Отчеты ... </ P> </pre> <p>5 HTML </h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> P </code> <code>> GeeksForGeeks: компьютерный портал </ </code> <code> P </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег выделения: </strong> Используется для выделения выделенного текста. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <em> Операторы... </em> </pre> <ul> <li> <strong> Тег жирного шрифта: </strong> Используется для выделения содержимого html-документа жирным шрифтом.<br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <b> Операторы... </b> </pre> <ul> <li> <strong> Тег Italic: </strong> Используется для написания содержимого курсивом. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <i> Операторы... </i> </pre> <ul> <li> <strong> Малый (текстовый) тег: </strong> Используется для установки мелкого размера шрифта содержимого. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <small> Операторы... </small> </pre> <ul> <li> <strong> Тег подчеркивания: </strong> Используется для установки подчеркивания содержимого.<br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <u> Операторы... </u> </pre> <ul> <li> <strong> Тег удаленного текста: </strong> Используется для представления удаленного текста. Он пересекает текстовое содержимое. <br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <удар> Заявления ... </ Забастовка> </pre> <h3><span class="ez-toc-section" id="HTML-6"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> удар> GeeksforGeeks </ </code> <code> </code> <code> Забастовка> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег привязки: </strong> Используется для ссылки одной страницы на другую.<br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <a href="..."> Операторы... </a> </pre> <ul> <li> <strong> Тег списка: </strong> Используется для отображения содержимого. <br/> <strong> синтаксис: </strong> <br/> </li> </ul> <pre> <li> утверждения ... </ li> </pre> <h3><span class="ez-toc-section" id="html-2"> html </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <p> <code> <</code> <code> li </code> <code>> Список элемент 1 </ </code> <code> li </code> <code>> </code> </p> <p> <code> <</code> <code> li </code> <code>> Список элемент 2 </ </code> <code> li </code> <code>> </code> </p> </td> </tr> </tbody> <td> <ul> <li> <strong> Заказанный список заказанный список: </strong> Используется для перечисления контента в определенном порядке.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <ол> Заявления ... </ ол> </pre> <h3><span class="ez-toc-section" id="HTML-7"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> ол> </code> </p> <p> <code> </code> <code> <</code> <code> </code> <code> литий> Список элемент 1 </ </code> <code>> </code> <code>> </code> </p> <p> </code> </p> <p> <code> </p> <p> <code> </code> <code> <</code> <code>> Список элемент 2 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> li </code> <code>> Список товаров 3 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> Li </code> <code>> Список пункт 4 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </ </code> <code> ол </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег неупорядоченного списка: </strong> Используется для перечисления содержимого без порядка.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <уль> Заявления ... </ UL> </pre> <h3><span class="ez-toc-section" id="HTML-8"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> уль> </code> </p> <p> <code> </code> <code> <</code> <code> </code> <code> литий> Список элемент 1 </ </code> <code>> </code> <code>> </code> </p> <p> </code> </p> <p> <code> </p> <p> <code> </code> <code> <</code> <code>> Список элемент 2 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> li </code> <code>> Список товаров 3 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> Li </code> <code>> Список пункт 4 </ </code> <code> Li </code> <code>> </code> </p> <p> <code> </ </code> <code> уль </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег комментария: </strong> Используется для установки комментария в html-документе.В браузере его не видно. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <!-- Операторы... --> </pre> <ul> <li> <strong> Тег Scrolling Text: </strong> Используется для прокрутки текста или изображения. </li> </ul> <p> <strong> Синтаксис: </strong> </p> <pre> <шатер> Заявления ... </ шатровый> </pre> <h3><span class="ez-toc-section" id="HTML-9"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> шатровый BGCOLOR </code> <code> = </code> <code> "#cccccc" </code> <code> </code> петли <code> = </code> <code> "-1" </code> </p> <p> <code> Scrollamount </code> <code> = </code> <code> "2" </code> <code> (2 "</code> <code> = </code> <code> = </code> <code>" 100% "</code> <code>> </code> </p> <p> <code> Пример MARQuee </ </code> <code> Marquee </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Центральный тег: </strong> Используется для размещения содержимого в центре.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <центр> Заявления ... </ центр> </pre> <h3><span class="ez-toc-section" id="HTML-10"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> центр> GeeksforGeeks </ </code> <code> </code> <code> центр> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег шрифта: </strong> Используется для указания размера шрифта, цвета шрифта и семейства шрифтов в html-документе. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <font> Операторы ... </ font> </pre> <h3><span class="ez-toc-section" id="HTML-11"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> FATE </code> <code> = </code> <code> = </code> <code> "Times New Roman" </code> <code>> Пример </ </code> <code> шрифта </code> <code>> </code> </p> </td> </tr> </tbody> </table> <p> <strong> Пустые (неконтейнерные) Теги: </strong>   <br/>   </p> <ul> <li> <strong> Тег разрыва строки: </strong> Используется для разрыва строки. </li> </ul> <p> <strong> Синтаксис: </strong> </p> <pre> </pre>  <h3> </h3> <br> HTML </h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> GeeksforGeeks <</code> <code> </code> <code> бр> Компьютерная наука портала </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег изображения: </strong> Он используется чтобы добавить элемент изображения в html-документ.<br/> </li> </ul> <p> <strong> Синтаксис: +</strong> </p> <pre> <IMG> </pre>  <h3> </h3>  +<table border="0" cellpadding="0" cellspacing="0"> HTML <tbody> <tr> <td> <p> <code> <+</code> <code> IMG +</code> <code> <code> +</code> SRC = +</code> <code> "gfg.jpg" +</code> <code> ширина +</code> <code> = +</code> <code> «40 </code> </p> <p> <code> Высота </code> <code> = </code> <code> = </code> <code> "40" </code> <code> границы </code> <code> = </code> <code> "0" </code> <code> "0" </code> <code>> </code> </p> </td> </tr> <h4><span class="ez-toc-section" id="6">6 </span></h4><td> <ul> <li> <strong> Link Tag: </strong> Используется для связи контента от внешних источник.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <ссылка> </pre> <h3><span class="ez-toc-section" id="HTML-12"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> голова </code> <code>> </code> </p> <p> <code> <</code> <code> ссылка </code> <code> отн </code> <code> = </code> <code> "таблица стилей" </code> <code> тип </code> <code> = </code> <code> "текст / CSS" </code> <code> </code> <code> HREF = </code> <code> "style.css" </code> <code>> </code> </p> <p> <code> </ </code> <code> </code> <code> голова> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Горизонтальное положение тег: </strong> Используется для отображения горизонтальной линии в html документе.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> +<pre> <ч /> </pre> <h3><span class="ez-toc-section" id="HTML-13"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> ч </code> <code> ширина </code> <code> = </code> <code> "50%" </code> <code> размер </code> <code> = </code> <code> "3" </code> <code> />  </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Метатег: </strong> Используется для указания описания страницы. Например: последний модификатор, авторы и т. д. <br/> <strong> Синтаксис: </strong>   <br/>   </li> </ul> <pre> <meta> Операторы ... <META> </pre> <h3><span class="ez-toc-section" id="HTML-14"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <p> <code> <</code> <code> Meta </code> <code> = </code> <code> "Описание" </code> </p> <p> </code> </p> <p> <code> </code> <code> Content </code> <code> = </code> <code> "Описание вашего сайта" </code> <code> > </code> </p> <p> <code> <</code> <code> мета </code> <code> имя </code> <code> = </code> <code> "ключевые слова" </code> </p> <p> <code> </code> <code> Содержание </code> <code> = </code> <code> "ключевые слова, описывающие ваш сайт" </code> <code>> </code> </p> </td> </tr> </tbody> </table> <p> <strong> Столы Теги: </strong> Тег Table используется для создания таблицы в html документе.<br/> </p> <pre> <table> утверждения ... </ table> </pre> <h3><span class="ez-toc-section" id="HTML-15"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <p> <code> <</code> <code> границы </code> <code> = </code> <code> "4" </code> <code> CellPadding </code> <code> = </code> <code> "2" </code> <code> Cellspacing </code> <code> = </code> <code> "2" </code> <code> Ширина </code> <code> = </code> <code> "100%" </code> <code>> </code> </p> <p> </code> </p> <p> <code> <</code> <code> TR </code> <code>> <</code> <code> TD </code> <code>> Столбец 1 </ </code> <code> TD </code> <code>> </code> </p> <p> <code> <</code> <code> TD </code> <code>> Колонка 2 </ </code> <code> тд </code> <code>> </ </code> <code> тр </code> <code>> </ </code> <code> стол </code> <code>> </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег Tr: </strong> Используется для определения строки таблицы html.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <TR> Заявления ... </ TR> </pre> <h3><span class="ez-toc-section" id="HTML-16"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> таблица> </code> </p> <p> <code> </code> <code> <</code> <code> </code> <code> тр> </code> </p> <p> <code> </code> <code> <</code> <code>-й </code> <code>> месяц </ </code> <code>-й </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code>-й </code> <code>> Экономия </ </code> <code>-й </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> тр </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> тр </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> тд </code> <code>> январь </ </code> <code> тд </code> <code>> </code> </p> <p> <code> </code> <code> < </code> <code> TD </code> <code>> $ 100 </ </code> <code> TD </code> <code>> </code> </p> <p> </code> </p> <p> <code> </code> <code> TR </code> <code>> </code> </p> <p> <code> </ </code> <code> таблица </code> <code> > </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег Th: </strong> Определяет ячейку заголовка в таблице.По умолчанию он задает содержимое полужирным шрифтом и свойством center. <br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <й> Заявления ... </ е> </pre> <h3><span class="ez-toc-section" id="HTML-17"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> таблица> </code> </p> <p> <code> </code> <code> <</code> <code> </code> <code> тр> </code> </p> <p> <code> </code> <code> <</code> <code>-й </code> <code>> месяц </ </code> <code>-й </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code>-й </code> <code>> Экономия </ </code> <code>-й </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> тр </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> тр </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> тд </code> <code>> январь </ </code> <code> тд </code> <code>> </code> </p> <p> <code> </code> <code> < </code> <code> TD </code> <code>> $ 100 </ </code> <code> TD </code> <code>> </code> </p> <p> </code> </p> <p> <code> </code> <code> </ </code> <code> TR </code> <code>> </code> </p> <p> <code> </ </code> <code> Таблица 9 1481 <code> > </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег Td: </strong> Определяет стандартную ячейку в HTML-документе.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <TD> Заявления ... </ TD> </pre> <h3><span class="ez-toc-section" id="HTML-18"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> таблица> </code> </p> <p> <code> </code> <code> <</code> <code> </code> <code> тр> </code> </p> <p> <code> </code> <code> <</code> <code> тд </code> <code>> сота А </ </code> <code> тд </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> тд </code> <code>> сота B </ </code> <code> тд </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> </ </code> <code> TR </code> <code>> </code> </p> <p> <code> </ </code> <code> </ </code> <code>> </code> </p> </td> </tr> </p> <td> </tr> </tbody> <td> <p> <strong> <td> <p> <strong> <td> <p> <strong> <h4><span class="ez-toc-section" id="7">7 </span></h4><p> <strong> <br/> </p> <ul> <li> <strong> Форма Форма: </strong> Используется для создания HTML-формы для пользователя.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <Форма> Отчеты ... </ form> </pre> <h3><span class="ez-toc-section" id="HTML-19"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> Форма </code> <code> Action </code> <code> = </code> <code> "Mailto: you@yourdomain.com "девяносто одна тысяча четыреста восемьдесят один <code>> </code> </p> <p> <code> </code> <code> имя: <</code> <code> вход </code> <code> имя девяносто одна тысяча четыреста восемьдесят один <code> = </code> <code> "название" девяносто одна тысяча четыреста восемьдесят один <code> значение девяносто одна тысяча четыреста восемьдесят один <code> = </code> <code> "" девяносто одна тысяча четыреста восемьдесят один <code> размер девяносто одна тысяча четыреста восемьдесят один <code> = </code> <code> "80" девяносто одна тысяча четыреста восемьдесят один <code> > <</code> <code> уш </code> <code>> </code> </p> <p> <code> </code> <code> E-mail: <</code> <code> вход </code> <code> имя </code> <code> = </code> <code> </code> <code> значение "Отправить" </code> <code> = </code> <code> "" </code> <code> размер </code> <code> = </code> <code> " 80 "</code> <code>> <</code> <code> BR </code> <code>> </code> </p> <p> </code> </p> <p> <code> </code> <code> <</code> <code> BR </code> <code>> <</code> <code> Центр </code> <code>> <</code> <code> вход </code> <code> тип </code> <code> = </code> <code>" sub MIT "</code> <code>> </ </code> <code> Центр </code> <code>> </code> </p> <p> </code> </p> <p> <code> </ </code> <code> Форма </code> <code>> </code> </p> </td> </tr> <li> <td> <ul> <li> <strong> <ul> <li> <strong> Отправить входной тег: </strong> Используется для того, чтобы принять вход от пользователя.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> +<pre> <вход> </pre>  <h3> </h3>  <table border="0" cellpadding="0" cellspacing="0"> HTML <tbody> <tr> <td> <p> <code> <<code> +</code> форма +</code> <code> метод +</code> <code> = <code> +</code> сообщение +</code> <code> <code> +</code> действие = +</code> <code> «/cgibin/example.cgi </code> <code>> </code> <code>> </code> </p> <p> <code> <</code> <code> вход </code> <code> тип </code> <code> = </code> <code> "Text" </code> <code> "Стиль" </code> <code> "</code> </p> <p> <code> </code> <p> <code> </code> <code> Семья шрифта: Verdana; Вес шрифта: жирный ; </code> </p> <p> <code>   </code> <code> размер шрифта: 12 пикселей; цвет фона: #72a4d2;" </code> </p> <p> <code> </code> <code> Размер </code> <code> = </code> <code> "10" </code> <code> MaxLength </code> <code> = </code> <code> "30" </code> <code>> </code> </p> <p> <code> <</code> <code> вход </code> <code> Тип </code> <code> = </code> <code> "Отправить" </code> <code> Value </code> <code> = </code> <code> "Отправить" </code> <code>> </code> </p> <p> </code> </p> <p> <code> </ </code> <code> Форма </code> <code>> </code> </p> </td> </tr> </tbody> <td> <ul> <li> <strong> Опция выпадает Опция: </strong> Используется для выбора опции из раскрывающейся список.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> <pre> <опция> Заявления ... </ опции> </pre> <h3><span class="ez-toc-section" id="HTML-20"> HTML </span></h3> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> Форма метод </code> <code> = </code> <code> </code> <code> после действия </code> <code> = </code> <code> "/ acgibin/example.cgi" </code> <code>> </code> </p> <p> <code> <</code> <code> Центр </code> <code>> Выбрать вариант: <</code> <code> Выбор </code> <code>> </code> </p> <p> <code> <</code> <code> Вариант </code> <code>> Вариант 1 </ </code> <code> Вариант </code> <code>> </code> </p> <p> </code> </p> <p> <code> <</code> <code> Вариант </code> <code> Опция> Вариант 2 </ </code> <code> вариант </code> <code>> </code> </p> <p> <code> <</code> <p> <code> <</code> <code> Вариант 3 </ </code> <code> Вариант </code> <code>> </code> </p> <p> <code> </ </code> <code> форма </code> <code> >  </code> </p> </td> </tr> </tbody> </table> <ul> <li> <strong> Тег переключателя: </strong> Используется для выбора только одного варианта из заданных вариантов.<br/> <strong> Синтаксис: </strong> <br/> </li> </ul> девяносто одна тысяча четыреста семьдесят одна <вход> </pre>  <h3> </h3>  <table border="0" cellpadding="0" cellspacing="0"> HTML <tbody> <tr> <td> <p> <code> <</code> <code> </code> <code> Форма Метод </code> <code> = </code> <code> </code> <code> после действия </code> <code> </code> <code> = «/cgibin/example.cgi </code> <code>> </code> <code>> </code> </p> <p> <code> Выберите вариант: <</code> <code> BR </code> <code>> </code> </p> <p> <code> <</code> <p> <code> <</code> <code> типа </code> <code> = </code> <code> "Радио" </code> <code> название </code> <code> = </code> <code> "Вариант" </code> <code>> Вариант 1 </code> </p> <p> <code> вход </code> <code> типа </code> <code> = </code> <code> = </code> <code> "Радио" </code> <code> "</code> <code> = </code> <code>" Опция "</code> <code> Проверено> Вариант 2 </code> </p> <p> <code> <</code> <code> вход </code> <code> </code> <code> = </code> <code> = </code> <code> "Радио" </code> <code> имя </code> <code> = </code> <code> "Вариант" </code> <code>> Вариант 3 </code> </p> </td> </tr> </tbody> <td> <p> </p> <p> <strong> SU поддерживаемые браузеры: </strong> </p> <ul> <li> Google Chrome </li> <li> Internet Explorer </li> <li> Firefox </li> <li> Opera </li> <li> Safari </li> </ul> <p> HTML является основой веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений.Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML. </p> <br/> <h2><span class="ez-toc-section" id="HTML-_-_Tutorial_Republic"> HTML-теги против элементов - Tutorial Republic </span></h2>
                                    
                    
                    
                    
                     <p> В этом уроке вы узнаете о тэгах и элементах HTML. </p>
                      <h3><span class="ez-toc-section" id="_HTML-15"> Синтаксис элемента HTML </span></h3> 
                     <p> HTML-элемент — это отдельный компонент HTML-документа. Он представляет семантику или значение.Например, элемент <code> title </code> представляет заголовок документа. </p>
                     <p> Большинство HTML-элементов пишутся с начальным тегом <em> </em> (или открывающим тегом) и конечным тегом <em> </em> (или закрывающим тегом), с содержимым между ними. Элементы также могут содержать атрибуты, определяющие его дополнительные свойства. Например, абзац, представленный элементом <code> p </code>, будет записан как: </p>.
                    
                     <p> Мы узнаем об атрибутах HTML в следующей главе.</p>
                    
                    
                        
                            
                            
                                 <p> <strong> Примечание: </strong> Все элементы не требуют присутствия закрывающего или закрывающего тега. Они обозначаются как <em> пустые элементы </em>, <em> самозакрывающиеся элементы </em> или <em> пустые элементы </em>. </p>
                            
                        
                    
                    
                     <hr/>  <h3><span class="ez-toc-section" id="HTML-21"> HTML-теги и элементы </span></h3> 
                     <p> Технически элемент HTML представляет собой набор начального тега, его атрибутов, конечного тега и всего, что между ними.С другой стороны, тег HTML (открывающий или закрывающий) используется для обозначения начала или конца элемента, как вы можете видеть на иллюстрации выше. </p>
                     <p> Однако в обычном использовании термины HTML-элемент и HTML-тег взаимозаменяемы, т. е. тег — это элемент, это тег. Для простоты на этом веб-сайте термины «тег» и «элемент» используются для обозначения одного и того же — поскольку они будут определять что-то на вашей веб-странице. </p>
                     <hr/>  <h3><span class="ez-toc-section" id="_HTML-16"> Нечувствительность к регистру в HTML-тегах и атрибутах </span></h3> 
                     <p> В HTML имена тегов и атрибутов не чувствительны к регистру (но большинство значений атрибутов чувствительны к регистру).Это означает, что тег <code> <P> </code> , а тег <code> <p> </code> определяет в HTML то же самое, что и абзац. </p>
                     <p> Но в XHTML они чувствительны к регистру, а тег <code> <P> </code> отличается от тега <code> <p> </code> . </p>
                    
                    
                        
                            
                             <pre> <code> <p>Это абзац.</p>
    <P>Это также допустимый абзац.</P> </code> </pre>
                        
                    
                    
                    
                    
                        
                            
                            
                                 <p> <strong> Совет: </strong> Мы рекомендуем использовать строчные буквы для тегов и атрибутивных имен в HTML, так как это сделает ваш документ более совместимым для будущих обновлений.</p>
                            
                        
                    
                    
                     <hr/>  <h3><span class="ez-toc-section" id="_HTML-17"> Пустые элементы HTML </span></h3> 
                     <p> Пустые элементы (также называемые самозакрывающимися или недействительными элементами) не являются тегами-контейнерами — это означает, что вы не можете писать <code> <hr> <i> некоторый контент </i> </hr> </code> или <code> <br> <i> некоторый контент </i> </br > </code> . </p>
                     <p> Типичным примером пустого элемента является элемент <code> <br> </code>, представляющий разрыв строки.Некоторые другие распространенные пустые элементы: <code> <img> </code> , <code> <input> </code> , <code> <link> </code> , <code> <meta> </code> , <code> <hr> </code> и т. д. </p>
                    
                    
                        
                            
                             <pre> <code> <p>Этот абзац содержит <br>разрыв строки.</p>
    <img src="images/sky.jpg" alt="Облачное небо">
    <тип ввода = "текст" имя = "имя пользователя"> </code> </pre>
                        
                    
                    
                    
                    
                        
                            
                            
                                 <p> <strong> Примечание: </strong> В HTML самозакрывающийся элемент записывается просто как <code> <br> </code> .В XHTML для самозакрывающегося элемента требуется пробел и косая черта в конце, например <code> <br /> </code> . </p>
                            
                        
                    
                    
                     <hr/>  <h3><span class="ez-toc-section" id="_HTML-18"> Вложенные элементы HTML </span></h3> 
                     <p> Большинство элементов HTML могут содержать любое количество дополнительных элементов (кроме пустых элементов), которые, в свою очередь, состоят из тегов, атрибутов, содержимого или других элементов. </p>
                     <p> В следующем примере показаны некоторые элементы, вложенные в элемент <code> <p> </code>.</p>
                    
                    
                        
                            
                             <pre> <code> <p>Вот текст <b>жирным</b>.</p>
    <p>Вот немного <em>выделенного</em> текста.</p>
    <p>Вот <mark>выделенный</mark> текст.</p> </code> </pre>
                        
                    
                    
                    
                    
                        
                            
                            
                                 <p> <strong> Совет: </strong> Размещение одного элемента внутри другого называется вложением.Вложенный элемент, также называемый дочерним элементом, также может быть родительским элементом, если в него вложены другие элементы. </p>
                            
                        
                    
                    
                     <p> теги HTML должны быть вложены в правильном порядке. Они должны быть закрыты в порядке, обратном тому, как они определены, это означает, что последний открытый тег должен быть закрыт первым. </p>
                    
                    
                        
                            
                             <pre> <code> <p><strong>Эти теги вложены правильно.</strong></p>
    <p><strong>Эти теги неправильно вложены.</p></strong> </code> </pre>
                        
                    
                    
    <hr/>  <h3><span class="ez-toc-section" id="_HTML-19"> Написание комментариев в HTML </span></h3> 
                     <p> Комментарии обычно добавляются для облегчения понимания исходного кода. Это может помочь другому разработчику (или вам в будущем, когда вы будете редактировать исходный код) понять, что вы пытались сделать с HTML. Комментарии не отображаются в браузере.</p>
                     <p> Комментарий HTML начинается с <code> <!-- </code> и заканчивается <code> --> </code> , как показано в примере ниже: </p>
                    
                    
                        
                                
                             <pre> <code> <!-- Это HTML-комментарий -->
    <!-- Это многострочный HTML-комментарий.
         который занимает более одной строки -->
    <p>Это обычный фрагмент текста.</p> </code> </pre>
                        
                    
                    
                     <p> Вы также можете закомментировать часть своего HTML-кода в целях отладки, как показано здесь: </p>
                    
                    
                        
                                
                             <pre> <code> <!-- Скрытие этого изображения для тестирования
    <img src="изображения/смайлик.png" alt="Смайлик">
    --> </code> </pre>
                        
                    
                    
                     <hr/>  <h3><span class="ez-toc-section" id="_HTML-20"> Типы элементов HTML </span></h3> 
                     Элементы <p> можно поместить в две отдельные группы: <em> блочных уровня </em> и <em> встроенных элементов уровня </em>. Первые составляют структуру документа, а вторые украшают содержимое блока. </p>
                     <p> Кроме того, блочный элемент занимает 100% доступной ширины и отображается с разрывом строки до и после.Принимая во внимание, что встроенный элемент будет занимать ровно столько места, сколько ему нужно. </p>
                     <p> Наиболее часто используемые элементы блочного уровня: <code> <div> </code>, <code> <p> </code>, <code> <h2><span class="ez-toc-section" id="i-74"> от </span></h2></code> до <code>  <h6> </h6> </code>, <code> <form> </code>, <code> <ol> </code>, <code> <ul> </code>, <code> <li> </code> и так далее. Принимая во внимание, что обычно используемые элементы встроенного уровня: <code> <img> </code>, <code> <a> </code>, <code> <span> </code>, <code> <strong> </code>, <code> <b> </code>, <code> <em> </code>, <code> <i> </code>, <code> <код> </code>, <code> <ввод> </code>, <code> <кнопка> </code> и т. д.</p>
                     <p> Подробно об этих элементах вы узнаете в следующих главах. </p>
                    
                    
                        
                            
                            
                                 <p> <strong> Примечание: </strong> Элементы блочного уровня не должны размещаться внутри элементов встроенного уровня. Например, элемент <code><p></code> не следует размещать внутри элемента <code><b></code>. </p>
                            
                        
                    
                    
                    
                    
                    
              
                    
    
                  <h2><span class="ez-toc-section" id="20_HTML_bitarray"> 20 тегов HTML, которые вам нужно знать | bitarray </span></h2>  <p> 20 лучших тегов в HTML.HTML — это строительный блок для веб-сайтов, и есть некоторые теги, которые мы должны знать, чтобы начать работу. Это простой язык для начала. </p>
      <h4><span class="ez-toc-section" id="HTML-22"> HTML </span></h4> 
     <p> Используется как </p>
     <pre data-enlighter-language="null"> <html></html> </pre>
     <p> Это строительный тег для HTML. Если вы создаете HTML-файл, вы должны включить весь свой контент в HTML-тег. </p>
     <h4/>
     </h4> <h4><span class="ez-toc-section" id="i-75"> ДОКТИП </span></h4> 
     <p> Используется для определения типа документа. Это не тег HTML. Он объявляется перед тегом HTML, так как это инструкция для веб-сайта, в которой говорится, что документ впереди имеет тип HTML.Он объявлен с использованием синтаксиса (для HTML5): </p>
     <pre data-enlighter-language="null"> <!DOCTYPE html> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-76"> ГОЛОВКА </span></h4> 
     <p> После того, как вы откроете тег HTML, тег заголовка должен появиться первым. Это тег, который не содержит текста, но охватывает все остальные теги. Название, стиль, мета и т. д. все теги написаны внутри него. Он используется для описания контента на веб-сайте. </p>
     <p> Синтаксис: </p>
     <pre data-enlighter-language="null"> <голова></голова> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-77"> НАЗВАНИЕ </span></h4> 
     <p> Этот тег используется, когда вы хотите дать название своему контенту.Тег title также находится под тегом head. Внутри него нет никаких других тегов. Внутри этого тега может быть написан только текст. </p>
     <p> Пример: </p>
     <pre data-enlighter-language="null"> <название> это заголовок<\название> </pre>
     <h4/>
     </h4> <h4><span class="ez-toc-section" id="i-78"> КОРПУС </span></h4> 
     <p> Под этим тегом пишется все, что вы видите на сайте. Таким образом, контент, который вы хотите, должен быть виден людям, должен быть включен в тег body. Следует помнить, что это идет после тега head. </p>
     <p> Пример использования: </p>
     <pre data-enlighter-language="null"> <Body>это тело</body> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-79"> ОТДЕЛ </span></h4> 
     <p> Тег div, также известный как тег разделения, используется для определения разделения содержимого в файле.Он часто действует как контейнер для других элементов или тегов в файле. Обычно это используется для стилизации содержимого в файле. Используется как </p>
     <pre data-enlighter-language="null"> <дел></дел> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-80"> РАЗМЕР </span></h4> 
     <p> Используется для переноса всего текста в файл. Он в основном используется для группировки встроенного содержимого файла. Используется как: </p>
     <pre data-enlighter-language="null"> <span></span> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-81"> А </span></h4> 
     <p> Это тег гиперссылки. В этом теге вы можете передать ссылку на страницу или сайт, на который хотите направить зрителя.Он состоит из атрибута «href», который очень важен, поскольку пункт назначения передается в этот атрибут. <br/> Пример: </p>
     <pre data-enlighter-language="null"> <a href="https://www.ggogle.com">google</a>. </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-82"> ТАБЛИЦА </span></h4> 
     <p> Это тег таблицы, объявленный как </p>.
     <pre data-enlighter-language="null"> <таблица></таблица> </pre>
     <p> Хотя этот тег не будет иметь никакого значения, если в него не будет передан некоторый контент. Есть много других тегов, которые передаются вместе с ним для обеспечения макета.</p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-83"> ТЕАД </span></h4> 
     <p> Это еще один из тегов таблицы, который используется для группировки содержимого заголовка таблицы в файле. Он представляет собой верхнюю строку таблицы, которая содержит заголовок для столбцов. </p>
     <pre data-enlighter-language="null"> <thead></thead> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-84"> ТБОДИ </span></h4> 
     <p> Это еще один из тегов таблицы, который используется для группировки основного содержимого таблицы в файле. Используется внутри тегов таблицы и используется для отображения фактических данных таблицы (используется после тега «<thead>» (если есть).</p>
     <p> Синтаксис: </p>
     <pre data-enlighter-language="null"> <таблица>
    <тело>
    <tr><td>Сайт</td><td>URL</td></tr>
    <tr><td>Bitarray</td><td>https://bitarray.io</td></tr>
    <tr><td>google</td><td>https://www.google.com</td></tr>
    </tbody>
    </таблица> </pre>
     <p> в приведенном выше примере у нас есть тег tbody (Примечание: нет <thead>). В приведенном выше примере есть 3 строки (один заголовок и два других значения).</p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-85"> ТР </span></h4> 
     <p> Этот тег передается внутри тега таблицы. Он используется для объявления строки таблицы. Даже этот тег недействителен до тех пор, пока в него не будут переданы теги, передающие содержимое. Записывается как <tr></tr>. Он содержит по крайней мере один элемент <td> или <th>. </p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-86"> ТД </span></h4> 
     <p> Этот тег передается внутри тега <tr>. Он может содержать внутри себя любой контент. Он используется для определения содержимого, которое должно быть передано в строке таблицы.Содержимое внутри <td></td> эквивалентно одной ячейке. <tr> — это начало новой строки. Синтаксис этого тега: </p>.
    
     <pre data-enlighter-language="null"> <tr><td>Value1</td><td>Value2</td></tr> </pre>
     <p> В приведенном выше примере есть одна строка с двумя столбцами. </p>
    
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-87"> БР </span></h4> 
     <p> Это команда разрыва строки, которая используется для разрыва строк внутри файла. Все, что он делает, это добавляет интервал в абзац и гарантирует, что строка, следующая за ним, появится в новой строке.Для <br> <br/> нет закрывающего тега Синтаксис: </p>
     <pre data-enlighter-language="null"> <br> </pre>
     <p>   </p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-88"> СЦЕНАРИЙ </span></h4> 
     <p> Если вы хотите определить скрипт на стороне клиента внутри вашего файла, вы используете тег скрипта. Обычно он содержит оператор сценария внутри себя или может указывать на любое другое использование атрибута src. Он также может содержать файлы javascript и плагинов, чтобы сделать веб-страницы интерактивными. </p>
     <p> Синтаксис: </p>
     <pre data-enlighter-language="null"> <скрипт>
    <!-- код JavaScript -->
    </скрипт> </pre>
     <p>   </p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-89"> ИМГ </span></h4> 
     <p> Если вы хотите поместить любое изображение в файлы HTML, вы можете сделать то же самое, используя тег img.Вы можете определить высоту и ширину изображения, используя другие атрибуты внутри него, и, таким образом, можете настроить изображение по своему усмотрению. <br/> Синтаксис: </p>
     <pre data-enlighter-language="null"> <img src=https://bitarray.io/images.logo.png alt="логотип bitarray"> </pre>
     <p> Тег <img> не имеет закрывающего тега. </p>
     <p>   </p>
      <h4><span class="ez-toc-section" id="UL"> UL </span></h4> 
     Тег <p> Ul используется для определения неупорядоченного списка в файле. Он публикует ограничения с помощью маркеров на веб-сайте. Это элемент уровня блока, в котором размещаются элементы списка. <br/> Синтаксис: </p>
     <pre data-enlighter-language="null"> <ул>
     <li> Пункт 1
     <li> Пункт 2
    </ul> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-90"> ЛИ </span></h4> 
     Тег <p> Li используется вместе с тегом для передачи иерархии списка в файле.Когда вы хотите передать список внутри списка, мы используем тег li. </p>
     <p> Пример: </p>
     <pre data-enlighter-language="null"> <ul>книги
    <li>вымышленный</li>
    <li>классический</li>
    <li>тайна</li>
    </ul> </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-91"> ЧАС </span></h4> 
     <p> Этот тег используется для отображения смены тем в содержимом файла. Когда есть какие-либо изменения между контентом, мы используем тег <hr>. Он разделил контент на две части, чтобы изменения были легко видны зрителю.Он вставляет горизонтальную линию. до HTML 4.01 он использовался для представления горизонтального правила. <br/> Пример: </p>
     <pre data-enlighter-language="null">  <h2><span class="ez-toc-section" id="_1"> заголовок 1</span></h2> 
    //линия 1
    //строка 2
    // строка 3
    <час>
     <h3><span class="ez-toc-section" id="_2-2">заголовок 2</span></h3>  </pre>
     <p>   </p>
      <h4><span class="ez-toc-section" id="i-92"> СИЛЬНЫЙ </span></h4> 
     <p> Тег <strong> используется для объявления важного текста в файле. Все, что он делает, это выделяет текст жирным шрифтом. Это сделано для того, чтобы важный текст легко читался зрителем. <br/> Пример: </p>
     <pre data-enlighter-language="null"> <strong> это сложный текст</strong> </pre>
     <p>   </p>
    
     <p>
     <h4> </h4> <em> Родственные </em> </h4>
     </p>  <h2><span class="ez-toc-section" id="_HTML-21"> Базовый список тегов HTML с примером </span></h2> 
    
                  
    
                  
                   <p> Когда вы изучаете HTML для начинающих, важно иметь базовое понимание тегов HTML.Здесь перечислены все основные HTML-теги, которые помогут вам в обучении. </p>
    
                    <h3><span class="ez-toc-section" id="HTML-23"> HTML-тег абзаца </span></h3> 
                   <p> Определяет абзац в веб-документе. Абзац HTML определяется с помощью тега <p>. </p>
    
                  
                   <pre data-line="2,3"> <code> <тело>
      <p> Это первые абзацы </p>
      <p> Это второй абзац </p>
    </тело> </code> </pre>
                  
                   <p>
                    Запустить его...   "
                   </p>
    
                    <h3><span class="ez-toc-section" id="HTML-24"> HTML-тег комментария </span></h3> 
                   <p> Определяет тег Комментарии <!-- Ваш комментарий -->.</p>
    
                  
                   <pre data-line="2"> <code> <тело>
        <img src="../../images/w2t.png" /> <b> <!-- </b> Файл изображения <b> --> </b>
    </тело> </code> </pre>
                  
                   <p>
                    Запустить его...   "
                   </p>
    
                    
    
                    <h3><span class="ez-toc-section" id="_HTML-22"> Тег изображений HTML </span></h3> 
                   <p> Для отображения изображений в веб-документе. HTML-изображения определяются внутри тега <img />. </p>
    
                  
                   <pre data-line="2"> <code> <тело>
        <имг источник="../../изображения/w2t.png" />
    </тело> </code> </pre>
                  
                   <p>
                    Запустить его...   "
                   </p>
    
                    <h3><span class="ez-toc-section" id="HTML-25"> HTML-тег ссылки </span></h3> 
                   <p> Определяет ссылку во внутреннем или внешнем документе. HTML-ссылка определяется внутри тега <a>. </p>
    
                  
                   <pre data-line="2"> <code> <тело>
        <a href="http://www.way2tutorial.com">Учебник по веб-разработке</a>
    </тело> </code> </pre>
                  
                   <p>
                    Запустить его...   »
                   </p>
    
    
                    <h3><span class="ez-toc-section" id="_HTML-23"> Теги заголовков HTML </span></h3> 
                   <p> Определяет теги заголовка от  <h2><span class="ez-toc-section" id="i-93"> до </span></h2><h6><span class="ez-toc-section" id="i-94">. </span></h6> </p>
    
                  
                   <pre data-line="2-7"> <code> <тело>
         <h2><span class="ez-toc-section" id="_h2">Заголовок h2</span></h2> 
         <h3><span class="ez-toc-section" id="_h3">Заголовок h3</span></h3> 
         <h4><span class="ez-toc-section" id="_h4">Заголовок h4</span></h4> 
         <h5><span class="ez-toc-section" id="_h5">Заголовок h5</span></h5> 
         <h5><span class="ez-toc-section" id="_h5-2">Заголовок h5</span></h5> 
         <h6><span class="ez-toc-section" id="_h6">Заголовок h6</span></h6> 
    </тело> </code> </pre>
                  
                   <p>
                    Запустить его...   »
                   </p>
    
                  
    
                    
                                  
    
                    <h2><span class="ez-toc-section" id="_HTML-24"> Список всех основных HTML-тегов с объяснением на примере </span></h2>  <p> Вы хотите изучить самый полезный базовый HTML-тег, который будет очень полезен при разработке каждой веб-страницы? </p>
     <p> В этом руководстве вы найдете список всех основных тегов HTML. Знание синтаксиса этих тегов HTML поможет вам на каждом этапе разработки вашей веб-страницы. </p>
     <p> </p>
     <p> HTML — это язык разметки, который используется для создания веб-страниц.Вы можете запускать HTML-код в браузере, поэтому вам не нужно какое-либо внешнее программное обеспечение для тестирования HTML-кода из этого руководства. </p>
     <p> Начнем… </p>
    
      <h4><span class="ez-toc-section" id="_HTML-25"> Синтаксис для всех основных тегов HTML с примером </span></h4> 
     <p> В этом учебном пособии для отработки и выполнения HTML-кода используйте онлайн-редактор HTML. Скопируйте приведенный ниже пример кода в онлайн-редактор HTML и запустите его. </p>
     <p> <strong> Pro Tips: </strong> Выполнение кода на практике всегда предпочтительнее и является хорошей практикой для любого программиста, чем просто его чтение.</p>
      <h5><span class="ez-toc-section" id="1_HTML-2"> 1) Создание параграфа HTML </span></h5> 
     <p> HTML имеет тег <code> <p> </code> для определения абзаца для веб-страницы. Текст внутри тегов <code> <p> </code> и <code> </p> </code> будет считаться одним абзацем. </p>
     <p> <strong> Пример: </strong> </p>
     <pre> <тело>
    <p>Вот текст из первого абзаца.</p>
    <p>Вот текст из второго абзаца.</p>
    </тело> </pre>
     <p> Если вы запустите этот код, вы увидите, что каждый абзац начинается с новой строки.</p>
      <h5><span class="ez-toc-section" id="2_HTML-2"> 2) Настройка заголовка текста в HTML </span></h5> 
     <p> Для определения заголовка в HTML существует шесть тегов от <code>  <h2> </h2> </code> до <code>  <h6> </h6> </code> . Тег <code>  <h2> </h2> </code> содержит наиболее важные теги, а тег <code>  <h6> </h6> </code> — наименее важные. </p>
     <p> <strong> Пример: </strong> </p>
     <pre>  <h2><span class="ez-toc-section" id="i-95"> заголовок один</span></h2> 
     <h3><span class="ez-toc-section" id="i-96"> второй заголовок</span></h3> 
     <h4><span class="ez-toc-section" id="i-97"> третий заголовок</span></h4> 
     <h5><span class="ez-toc-section" id="i-98"> заголовок четыре</span></h5> 
     <h5><span class="ez-toc-section" id="i-99"> пятый заголовок</span></h5> 
     <h6><span class="ez-toc-section" id="i-100"> заголовок шесть</span></h6>  </pre>
     <p> Теги заголовка HTML с их важностью.</p>
     <p> </p>
     <p> Обычно размер шрифта текста заголовка уменьшается с тега <code>  <h2> </h2> </code> до <code>  <h6> </h6> </code> . </p>
      <h5><span class="ez-toc-section" id="3_HTML-2"> 3) Различные теги HTML для форматирования текста </span></h5> 
     <p> Ниже приведен список тегов, которые можно использовать для форматирования текста. </p>
    
     <table> <tbody> <tr> <th> Метки HTM </th>
     <th> Описание </th>
     </tr> <tr> <td> <b>…</b> </td>
     <td> Описывает полужирный текст </td>
     </tr> <tr> <td> <em>…</em> </td>
     <td> Описывает выделенный текст </td>
     </tr> <tr> <td> <i>…</i> </td>
     <td> Описывает курсивный текст </td>
     </tr> <tr> <td> <маленький>…</маленький> </td>
     <td> Описывает меньший текст </td>
     </tr> <tr> <td> <strong>…</strong> </td>
     <td> Описывает важный текст </td>
     </tr> <tr> <td> <sub>…</sub> </td>
     <td> Описывает подстрочный текст </td>
     </tr> <tr> <td> <sup>…</sup> </td>
     <td> Описывает текст в верхнем индексе </td>
     </tr> <tr> <td> <ins>…</ins> </td>
     <td> Описывает вставленный текст </td>
     </tr> <tr> <td> <дел>…</дел> </td>
     <td> Описывает удаленный текст </td>
     </tr> <tr> <td> <знак>…</знак> </td>
     <td> Описывает отмеченный/выделенный текст </td>
     </tr> </tbody> </table>
     <p> Описание каждого тега простое для понимания.Попробуйте использовать различные теги форматирования текста в своем HTML-коде, чтобы понять разницу между ними. </p>
     <p> Давайте сделаем это немного интереснее 😉 </p>
     <p> </p>
     <p> HTML — это весело 😀 </p>
      <h5><span class="ez-toc-section" id="4_HTML-2"> 4) Как добавить таблицу в HTML? </span></h5> 
     <p> HTML имеет <code> тег <table> </code> для создания таблицы. <code> Тег <table> </code> состоит из <code> тегов <tr> </code> (строка таблицы). Теги каждой строки таблицы могут иметь теги <code> <th> </code> (заголовок таблицы) или <code> <td> </code> (данные таблицы).</p>
     <p> <strong> HTML-код для таблицы: </strong> </p>
     <pre> <таблица>
    <tr>
    <th>Имя учащегося</th>
    <th>Класс</th>
    <th>Оценка</th>
    </tr>
    <tr>
    <td>Боб</td>
    <тд>10</тд>
    <td>78</td>
    </tr>
    <tr>
    <td>Алиса</td>
    <тд>9</тд>
    <td>67</td>
    </tr>
    </таблица> </pre>
     <p> На изображении ниже подробно описаны теги таблицы HTML.</p>
     <p> </p>
     <p>   </p>
      <h5><span class="ez-toc-section" id="5_HTML-2"> 5) Ссылки на другие страницы в HTML </span></h5> 
     <p> Вы можете добавлять ссылки в текст HTML. </p>
     <p> Существует два типа ссылок: <strong> внутренняя ссылка </strong> и <strong> внешняя ссылка </strong>. Если вы ссылаетесь на страницу своего собственного веб-сайта, это называется внутренней ссылкой. Если вы ссылаетесь на любую другую страницу веб-сайта, это называется внешней ссылкой. </p>
     <p> <strong> Синтаксис HTML для добавления ссылки: </strong> </p>
     <pre> <a href="url">Текст привязки</a> </pre>
     <p> Здесь текст ссылки также называется якорным текстом.</p>
      <h5><span class="ez-toc-section" id="6_HTML-2"> 6) Как создать список в HTML? </span></h5> 
     <p> Существует два типа списков: <strong> упорядоченный список </strong> и <strong> неупорядоченный список. </strong> </p>
     <p> Тег <code> <ul> </code> используется для ненумерованного списка. <code> Тег <ol> </code> используется для упорядоченного списка. </p>
     <p> Здесь <code> <li> </code> — это тег элемента списка. </p>
     <p> <strong> Пример неупорядоченного списка HTML: </strong> </p>
     <pre> <ул>
    <li>Питон</li>
    <li>С</li>
    <li>Ява</li>
    </ul> </pre>
     <p> <strong> Пример упорядоченного списка HTML: </strong> </p>
     <pre> <ол>
    <li>Питон</li>
    <li>С</li>
    <li>Ява</li>
    </ол> </pre>
     <p> Элементы в упорядоченном списке перечислены по возрастанию.</p>
     <p> </p>
      <h5><span class="ez-toc-section" id="7_HTML-2"> 7) Как добавить изображения на HTML-страницу? </span></h5> 
     <p> Вот простой синтаксис для добавления изображения на HTML-страницу. </p>
     <pre> <img src=" <i> URL-адрес </i> "> </pre>
     <p> <code> src </code> — это атрибут, которому необходимо передать полный путь к образу. </p>
     <p> <strong> Вы также можете добавить некоторые другие атрибуты: </strong> </p>
     <p> <code> alt </code> — этот атрибут определяет альтернативное имя для изображения. </p>
     <p> <strong> Какая польза от тега alt? </strong> </p>
     <p> И есть много целей для его использования.Это имя будет показано пользователю, если изображение не сможет правильно загрузиться (из-за плохого подключения к Интернету). Он также используется поисковой системой для идентификации изображения. </p>
     <p> <code> ширина </code> и <code> высота </code> — с помощью этих атрибутов вы можете указать размеры отображаемого изображения. </p>
     <pre> <img src="example.jpg" alt="экземпляр"> </pre>
     <p> <strong> PS: </strong> Изображения, показанные выше в этом посте, являются примером использования HTML-тега <code> img </code>.<div class='yarpp-related yarpp-related-none'>
    <p>No related posts.</p>
    </div>
        </div>
    </div><!-- .entry-content -->
        <div class="single-meta">
                        <footer class="entry-footer">
                    #<a href="https://gnomesmonetized.ru/category/raznoe-2" rel="category tag">Разное</a>            </footer><!-- .entry-footer -->
                        </div>
    </article><!-- #post-## -->
    
                    
    	<nav class="navigation post-navigation" aria-label="Записи">
    		<h2 class="screen-reader-text">Навигация по записям</h2>
    		<div class="nav-links"><div class="nav-previous"><a href="https://gnomesmonetized.ru/raznoe-2/301-redirekt-so-starogo-domena-na-novyj-redirekt-cherez-htaccess-pomoshh.html" rel="prev"><span class="screen-reader-text">Предыдущая запись:</span> <span class="post-title">301 редирект со старого домена на новый: Редирект через .htaccess – Помощь</span></a></div><div class="nav-next"><a href="https://gnomesmonetized.ru/raznoe-2/kak-delat-stavki-na-sport-chtoby-vyigryvat-instrukcziya-kak-pravilno-delat-stavki-na-sport.html" rel="next"><span class="screen-reader-text">Следующая запись:</span> <span class="post-title">Как делать ставки на спорт чтобы выигрывать: инструкция как правильно делать ставки на спорт</span></a></div></div>
    	</nav>
                    
    <div id="comments" class="comments-area">
        <div class="comments-wrapper">
            	<div id="respond" class="comment-respond">
    		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/tegi-html-s-primerami-html-uroki-s-nulya-uchebnik-dlya-nachinayushhih.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://gnomesmonetized.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p>
    <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p>
    <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
    <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='14569' id='comment_post_ID' />
    <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
    </p></form>	</div><!-- #respond -->
    	    </div>
    </div><!-- #comments -->
                
            </main><!-- #main -->
        </div><!-- #primary -->
    
    <aside id="secondary" class="widget-area" role="complementary">
        <div class="theiaStickySidebar">
        	<div id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://gnomesmonetized.ru/">
    				<label>
    					<span class="screen-reader-text">Найти:</span>
    					<input type="search" class="search-field" placeholder="Поиск…" value="" name="s" />
    				</label>
    				<input type="submit" class="search-submit" value="Поиск" />
    			</form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h5 class="widget-title center-widget-title">Рубрики</h5><div class="menu-1-container"><ul id="menu-1" class="menu"><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://gnomesmonetized.ru/category/bez-vlozhenij">Без вложений</a></li>
    <li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://gnomesmonetized.ru/category/raznoe">Бизнес развитие</a></li>
    <li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://gnomesmonetized.ru/category/bystro">Быстрый заработок</a></li>
    <li id="menu-item-5383" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5383"><a href="https://gnomesmonetized.ru/category/zarabot">Где заработать</a></li>
    <li id="menu-item-5384" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5384"><a href="https://gnomesmonetized.ru/category/zarabot-3">Заработок</a></li>
    <li id="menu-item-5385" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5385"><a href="https://gnomesmonetized.ru/category/shkolniku">Заработок школьнику</a></li>
    <li id="menu-item-5386" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5386"><a href="https://gnomesmonetized.ru/category/na-sajtax">На сайтах</a></li>
    <li id="menu-item-5387" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5387"><a href="https://gnomesmonetized.ru/category/proverennye">Проверенные схемы</a></li>
    <li id="menu-item-5389" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5389"><a href="https://gnomesmonetized.ru/category/sposoby">Способы заработка</a></li>
    <li id="menu-item-5390" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5390"><a href="https://gnomesmonetized.ru/category/frilans">Фриланс</a></li>
    <li id="menu-item-5388" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5388"><a href="https://gnomesmonetized.ru/category/raznoe-2">Разное</a></li>
    </ul></div></div><div id="custom_html-10" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
    </div></div>	</div>
    </aside></div><!-- #content -->
    
        <footer id="colophon" class="site-footer" role="contentinfo">
                    <div class="copyright-area">
                <div class="wrapper">
                    <div class="col-row">
                        <div class="col col-full">
                            <div class="site-info">
                                <div class="footer_image">
                                    
                                </div>
                                <h4 class="site-copyright">
                                    2019 © Все права защищены.
    
                                </h4>
                                <div class="col col-full site-copyright">
                        <a href="/sitemap.xml" class="c_sitemap">Карта сайта</a>
                    </div>
                                
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <div class="scroll-up alt-bgcolor">
        <i class="ion-ios-arrow-up text-light"></i>
    </div>
    		<style type="text/css">
    			.archive #nav-above,
    					.archive #nav-below,
    					.search #nav-above,
    					.search #nav-below,
    					.blog #nav-below,
    					.blog #nav-above,
    					.navigation.paging-navigation,
    					.navigation.pagination,
    					.pagination.paging-pagination,
    					.pagination.pagination,
    					.pagination.loop-pagination,
    					.bicubic-nav-link,
    					#page-nav,
    					.camp-paging,
    					#reposter_nav-pages,
    					.unity-post-pagination,
    					.wordpost_content .nav_post_link,.page-link,
    					.page-links,#comments .navigation,
    					#comment-nav-above,
    					#comment-nav-below,
    					#nav-single,
    					.navigation.comment-navigation,
    					comment-pagination {
    						display: none !important;
    					}
    					.single-gallery .pagination.gllrpr_pagination {
    						display: block !important;
    					}		</style>
    	<link rel='stylesheet' id='yarppRelatedCss-css'  href='https://gnomesmonetized.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=6.0' type='text/css' media='all' />
    <link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://gnomesmonetized.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.0' type='text/css' media='all' />
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/js/skip-link-focus-fix.js?ver=20151215' id='jumla-skip-link-focus-fix-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/headroom/headroom.js?ver=6.0' id='headroom-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/headroom/jQuery.headroom.js?ver=6.0' id='jquery-headroom-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/owlcarousel/js/owl.carousel.min.js?ver=6.0' id='owlcarousel-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/magnific-popup/jquery.magnific-popup.min.js?ver=6.0' id='jquery-magnific-popup-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/twp/js/twp-scroll.js?ver=6.0' id='jquery-scroll-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/libraries/theiaStickySidebar/theia-sticky-sidebar.min.js?ver=6.0' id='theiaStickySidebar-js'></script>
    <script type='text/javascript' id='mediaelement-core-js-before'>
    var mejsL10n = {"language":"ru","strings":{"mejs.download-file":"\u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b","mejs.install-flash":"Flash player \u043f\u043b\u0430\u0433\u0438\u043d \u0431\u044b\u043b \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d \u0438\u043b\u0438 \u043d\u0435 \u0431\u044b\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d Flash player \u0438\u043b\u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441 https:\/\/get.adobe.com\/flashplayer\/","mejs.fullscreen":"\u041d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d","mejs.play":"\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438","mejs.pause":"\u041f\u0430\u0443\u0437\u0430","mejs.time-slider":"\u0428\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438","mejs.time-help-text":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u043b\u0435\u0432\u043e\/\u0432\u043f\u0440\u0430\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u0443 \u0441\u0435\u043a\u0443\u043d\u0434\u0443; \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u044c \u0441\u0435\u043a\u0443\u043d\u0434.","mejs.live-broadcast":"\u041f\u0440\u044f\u043c\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u044f","mejs.volume-help-text":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c.","mejs.unmute":"\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0437\u0432\u0443\u043a","mejs.mute":"\u0411\u0435\u0437 \u0437\u0432\u0443\u043a\u0430","mejs.volume-slider":"\u0420\u0435\u0433\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u0438","mejs.video-player":"\u0412\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440","mejs.audio-player":"\u0410\u0443\u0434\u0438\u043e\u043f\u043b\u0435\u0435\u0440","mejs.captions-subtitles":"\u0421\u0443\u0431\u0442\u0438\u0442\u0440\u044b","mejs.captions-chapters":"\u0413\u043b\u0430\u0432\u044b","mejs.none":"\u041d\u0435\u0442","mejs.afrikaans":"\u0410\u0444\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439","mejs.albanian":"\u0410\u043b\u0431\u0430\u043d\u0441\u043a\u0438\u0439","mejs.arabic":"\u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439","mejs.belarusian":"\u0411\u0435\u043b\u0430\u0440\u0443\u0441\u0441\u043a\u0438\u0439","mejs.bulgarian":"\u0411\u043e\u043b\u0433\u0430\u0440\u0441\u043a\u0438\u0439","mejs.catalan":"\u041a\u0430\u0442\u0430\u043b\u043e\u043d\u0441\u043a\u0438\u0439","mejs.chinese":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439","mejs.chinese-simplified":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439 (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439)","mejs.chinese-traditional":"\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439 (\u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439)","mejs.croatian":"\u0425\u043e\u0440\u0432\u0430\u0442\u0441\u043a\u0438\u0439","mejs.czech":"\u0427\u0435\u0448\u0441\u043a\u0438\u0439","mejs.danish":"\u0414\u0430\u0442\u0441\u043a\u0438\u0439","mejs.dutch":"\u041d\u0438\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439 (\u0433\u043e\u043b\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439)","mejs.english":"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439","mejs.estonian":"\u042d\u0441\u0442\u043e\u043d\u0441\u043a\u0438\u0439","mejs.filipino":"\u0424\u0438\u043b\u0438\u043f\u043f\u0438\u043d\u0441\u043a\u0438\u0439","mejs.finnish":"\u0424\u0438\u043d\u0441\u043a\u0438\u0439","mejs.french":"\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0438\u0439","mejs.galician":"\u0413\u0430\u043b\u0438\u0441\u0438\u0439\u0441\u043a\u0438\u0439","mejs.german":"\u041d\u0435\u043c\u0435\u0446\u043a\u0438\u0439","mejs.greek":"\u0413\u0440\u0435\u0447\u0435\u0441\u043a\u0438\u0439","mejs.haitian-creole":"\u0413\u0430\u0438\u0442\u044f\u043d\u0441\u043a\u0438\u0439 \u043a\u0440\u0435\u043e\u043b\u044c\u0441\u043a\u0438\u0439","mejs.hebrew":"\u0418\u0432\u0440\u0438\u0442","mejs.hindi":"\u0425\u0438\u043d\u0434\u0438","mejs.hungarian":"\u0412\u0435\u043d\u0433\u0435\u0440\u0441\u043a\u0438\u0439","mejs.icelandic":"\u0418\u0441\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439","mejs.indonesian":"\u0418\u043d\u0434\u043e\u043d\u0435\u0437\u0438\u0439\u0441\u043a\u0438\u0439","mejs.irish":"\u0418\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439","mejs.italian":"\u0418\u0442\u0430\u043b\u044c\u044f\u043d\u0441\u043a\u0438\u0439","mejs.japanese":"\u042f\u043f\u043e\u043d\u0441\u043a\u0438\u0439","mejs.korean":"\u041a\u043e\u0440\u0435\u0439\u0441\u043a\u0438\u0439","mejs.latvian":"\u041b\u0430\u0442\u0432\u0438\u0439\u0441\u043a\u0438\u0439","mejs.lithuanian":"\u041b\u0438\u0442\u043e\u0432\u0441\u043a\u0438\u0439","mejs.macedonian":"\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0441\u043a\u0438\u0439","mejs.malay":"\u041c\u0430\u043b\u0430\u0439\u0441\u043a\u0438\u0439","mejs.maltese":"\u041c\u0430\u043b\u044c\u0442\u0438\u0439\u0441\u043a\u0438\u0439","mejs.norwegian":"\u041d\u043e\u0440\u0432\u0435\u0436\u0441\u043a\u0438\u0439","mejs.persian":"\u041f\u0435\u0440\u0441\u0438\u0434\u0441\u043a\u0438\u0439","mejs.polish":"\u041f\u043e\u043b\u044c\u0441\u043a\u0438\u0439","mejs.portuguese":"\u041f\u043e\u0440\u0442\u0443\u0433\u0430\u043b\u044c\u0441\u043a\u0438\u0439","mejs.romanian":"\u0420\u0443\u043c\u044b\u043d\u0441\u043a\u0438\u0439","mejs.russian":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","mejs.serbian":"\u0421\u0435\u0440\u0431\u0441\u043a\u0438\u0439","mejs.slovak":"\u0421\u043b\u043e\u0432\u0430\u0446\u043a\u0438\u0439","mejs.slovenian":"\u0421\u043b\u043e\u0432\u0435\u043d\u0441\u043a\u0438\u0439","mejs.spanish":"\u0418\u0441\u043f\u0430\u043d\u0441\u043a\u0438\u0439","mejs.swahili":"\u0421\u0443\u0430\u0445\u0438\u043b\u0438","mejs.swedish":"\u0428\u0432\u0435\u0434\u0441\u043a\u0438\u0439","mejs.tagalog":"\u0422\u0430\u0433\u0430\u043b\u043e\u0433","mejs.thai":"\u0422\u0430\u0439\u0441\u043a\u0438\u0439","mejs.turkish":"\u0422\u0443\u0440\u0435\u0446\u043a\u0438\u0439","mejs.ukrainian":"\u0423\u043a\u0440\u0430\u0438\u043d\u0441\u043a\u0438\u0439","mejs.vietnamese":"\u0412\u044c\u0435\u0442\u043d\u0430\u043c\u0441\u043a\u0438\u0439","mejs.welsh":"\u0412\u0430\u043b\u043b\u0438\u0439\u0441\u043a\u0438\u0439","mejs.yiddish":"\u0418\u0434\u0438\u0448"}};
    </script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.16' id='mediaelement-core-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=6.0' id='mediaelement-migrate-js'></script>
    <script type='text/javascript' id='mediaelement-js-extra'>
    /* <![CDATA[ */
    var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/","classPrefix":"mejs-","stretching":"responsive"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=6.0' id='wp-mediaelement-js'></script>
    <script type='text/javascript' id='jumla-script-js-extra'>
    /* <![CDATA[ */
    var jumlaVal = {"nonce":"b5b564d714","ajaxurl":"https:\/\/gnomesmonetized.ru\/wp-admin\/admin-ajax.php"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/themes/jumla/assets/twp/js/custom-script.js?ver=6.0' id='jumla-script-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-includes/js/comment-reply.min.js?ver=6.0' id='comment-reply-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
    <script type='text/javascript' id='ez-toc-js-js-extra'>
    /* <![CDATA[ */
    var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='https://gnomesmonetized.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
    </body>
    </html>