Теги для создания сайта html: Основные теги для создания сайта

Содержание

15 самых популярных HTML-тегов — журнал «Доктайп»

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

Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.

Теги <html>, <head> и <body>

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

<html> — контейнер для содержимого страницы.

<head> содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.

<body> содержит контент — всё, что отображается в браузере.

Тег <div>

8 270 734 упоминаний.

Тег <div> — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.

<div>
  <h3>О нас</h3>
  <p>Мы очень любим котов и веб-разработку.</p>
</div>

Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.

Обращу внимание на отрыв <div> от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например, <div> используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.

Николай Шабалин

Почитать про эти теги и семантическую вёрстку

Некоторые разработчики создают на

<div> смысловые блоки, например, шапку, подвал или меню. Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: <header>, <nav>, <main>, <section>, <aside> и <article>. Они дают больше информации о содержимом и делают код более читабельным.

Тег <a>

2 918 931 упоминание.

HTML-тег <a> используется для создания ссылок. У тега есть атрибут href — в нём указывается URL-адрес страницы, на которую должен попасть пользователь. Когда адрес неизвестен, в href ставится заглушка:

<a href="https://htmlacademy.ru/">Обычная сылка</a>
<a href="#">Ссылка с заглушкой</a>

Что такое ссылки и как их ставить

Если в атрибут добавить протокол mailto:, ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example. com.

<a href="mailto:[email protected]">Напишите нам.</a>

Тег <span>

2 047 701 упоминание.

Тег <span> — несемантический, как и <div>. Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.

<p>В этом параграфе часть слов написана <span>красным</span> цветом.</p>

Тег <ul> и <li>

280 978 и 1 463 187 упоминаний.

<ul> создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью <li> добавляются элементы списка.

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

Как сделать список без точек

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

То есть блоки, которые содержат несколько однородных и равноправных элементов.

Тег <p>

872 383 упоминаний.

Тег <p> создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом <p>.

<p>Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.</p>
<p>В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.</p>

Тег <img>

834 669 упоминаний.

Как отличить контентное изображение от декоративного

Тег <img> добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию. Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега <svg>.

У <img> есть четыре обязательных атрибута:

  • alt — альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.
  • src — адрес, по которому находится изображение.
  • width — ширина изображения.
  • height— высота изображения.
<img src="images/keks.jpg" alt="Рыжий кот Кекс сидит на клавиатуре.">

Тег <br>

801 902 упоминания.

Тег <br>

переносит текст на другую строку, не начиная нового абзаца.

<p>Санкт-Петербург, <br>
набережная реки Карповки, 5.
</p>

Распространённая ошибка разработчиков-новичков — использовать <br> для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть <p>.

Тег <script>

765 856 упоминаний.

Тег подключает на страницу JavaScript. <script> ставится в конце документа, перед закрывающим тегом </body>. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.

У тега есть обязательный атрибут src, в котором указывается путь до файла.

<script src="scripts/script.js"></script>

Тег <link>

542 306 упоминаний.

Тег <link> подключает CSS-файлы. В отличие от <script>, он ставится в начале документа, в теге <head>.

У <link> два обязательных атрибута:

  • rel со значением stylesheet означает, что файл содержит таблицу стилей.
  • href указывает адрес файла.
<link rel="stylesheet" href="styles/style.css">

Тег <meta>

538 580 упоминаний.

Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.

<meta charset="utf-8">

С помощью атрибута name="keywords" можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут

name="description" указывает описание сайта, которое будет видно, например, в поисковике.

<meta name="keywords" name="фронтенд-разработка, обучение программированию">
<meta name="description" name="Обучаем фронтенд- и бэкенд-разработке">

Все атрибуты тега <meta>.

Тег <i>

390 689 упоминаний.

Тег <i> форматирует текст — делает его курсивным.

<p>Дизайнер решил выделить текст <i>курсивом</i></p>

Часто тег <i> используется для иконок: <i>. Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом

Кстати, есть ещё один тег для выделения курсивом, не такой популярный — <em>. Разработчики используют его, чтобы поставить акцент на слове или фразе.

<p>Тебе <em>не стоило</em> дразнить Кекса. Он <em>обиделся</em></p>

Что ещё надо знать

Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на <div>, а размечать элементы правильно. Например, для шапки сайта использовать <header>, для подвала — <footer>, для навигации — <nav>, а для крупных смысловых разделов — <section>.

Есть и другие теги — вы найдёте их в спецификации HTML.

Потренировать навыки вёрстки можно на курсе «Старт во фронтенде».
Два первых раздела — бесплатные.

Материалы по теме

  • Шаблон простого сайта
  • Как ставить пустые ссылки
  • Как подключить стили на страницу
  • Как правильно написать alt-текст
  • Как использовать ссылки mailto: и tel:

HTML теги — справочник с примерами и описанием команд

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

Вы узнаете, что это такое и для чего нужно.

Также на примерах я покажу как это все используется.

Содержание:

  • Что это такое
  • Виды
  • Основные элементы
  • Справочник:
    • Основной контейнер
    • Служебные
    • Коды для текста
    • Таблицы
    • Изображения
    • Списки
    • Гиперссылки
    • Встроенный контент
    • Для группировки
    • Формы

Что такое html теги

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

Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.

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

Парный html тег с атрибутом

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

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

Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.

Например, выделение текста жирным:

<b>Жирный текст</b>

Ниже мы еще к этому вернемся.

Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.

Однако стандарт подразумевает писать их в нижнем регистре.

У тега могут быть атрибуты.

Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.

К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.

<a href="https://site.ru">Текст ссылки</a>

Виды хтмл тегов

Все хтмл теги подразделяются на два вида:

  1. Одиночные
  2. Парные

Парные имеют открывающий и закрывающий тег.

Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.

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

Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.

<p>Пример небольшого текстового абзаца</p>

Обратите внимание!

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

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

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

Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.

<p><b>Пример</b> небольшого текстового абзаца</p>
Наглядный пример выделения

Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.

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

<br> <!-- перенос строки -->
<hr> <!-- разделитель -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- вывод изображения -->

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

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

Вот они:

  • doctype
  • html
  • head
  • body

Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.

Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий).

Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.

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

Обычно эта информация не видна пользователю.

Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.

Вот так выглядит скелет любой html-страницы:

<!doctype html>
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

Справочник HTML

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

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

Тег HTML

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

ИмяОписаниеЗначение свойства display
<html></html>корневой элемент html-документаblock

Служебные

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

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

ИмяОписаниеЗначение свойства display
<!—…—>комментарийnone
<!DOCTYPE>объявление типа документаnone
<head></head>контейнер для метаданных html-документаnone
<title></title>заголовок / имя html-документаnone
<meta>мета-данные веб-страницыnone
<link>подключает внешние таблицы стилейnone
<script></script>подключает сценарии к страницеnone
<style></style>подключает встраиваемые таблицы стилейnone
<base>базовый url-адрес, относительно которого вычисляются относительные адресаnone
<noscript></noscript>секция, не поддерживающая скриптblock

HTML теги для текста

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

Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.

ИмяОписаниеЗначение свойства display
<h2></h2> — <h6></h6>заголовки шести уровнейblock
<p></p>параграфы в текстеblock
<br>перенос текста на новую строкуnone
<hr>горизонтальная линияblock
<wbr>возможное место разрыва длинной строкиnone
<blockquote></blockquote>большая цитатаblock
<cite></cite>источник цитированияinline
<q></q>краткая цитатаinline
<code></code>фрагмент программного кодаinline
<kbd></kbd>текст, вводимый пользователем с клавиатурыinline
<pre></pre>выводит текст с пробелами и переносамиblock
<samp></samp>результат выполнения сценарияblock
<var></var>выделяет переменные из программblock
<del></del>перечёркивает текст, помечая как удаленныйblock
<s></s>перечёркивает неактуальный текстblock
<dfn></dfn>выделяет термин курсивомblock
<em></em>выделяет важные фрагменты текста курсивомblock
<i></i>выделяет текст курсивом без акцентаblock
<strong></strong>выделяет полужирным важный текстblock
<b></b>задает полужирное начертание отрывка текста, без дополнительного акцентаblock
<ins></ins>подчёркивает изменения в текстеblock
<u></u>выделяет отрывок текста подчёркиванием, без дополнительного акцентаblock
<mark></mark>выделяет фрагменты текста желтым фономblock
<small></small>отображает текст шрифтом меньшего размераblock
<sub></sub>подстрочное написание символовblock
<sup></sup>надстрочное написание символовblock
<time></time>дата / время документа или статьиblock
<abbr></abbr>аббревиатура или акронимnone
<address></address>контактные данные автора документа или статьиblock
<bdi></bdi>изолирует текст, читаемый справа налевоinline
<bdo></bdo>задаёт направление написания текстаinline
<ruby></ruby>контейнер для Восточно-Азиатских символов и их расшифровкиinline
<rp></rp>тег для скобок вокруг символовnone
<rt></rt>расшифровка символовblock

Теги таблицы HTML

Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице.

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

ИмяОписаниеЗначение свойства display
<table></table>html-таблицаtable
<tr></tr>строка таблицыtable-row
<th></th>заголовок столбца таблицыtable-cell
<td></td>ячейка таблицыtable-cell
<thead></thead>блок заголовков таблицыtable-header-group
<tbody></tbody>тело таблицыtable-row-group
<tfoot></tfoot>нижний колонтитул таблицыtable-footer-group
<caption></caption>подпись к таблицеtable-caption
<col>выбирает для форматирования столбцыtable-column
<colgroup></colgroup>контейнер для одного или нескольких <col>table-column-group

Картинки

Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации.

Еще полезно и в SEO.

Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.

ИмяОписаниеЗначение свойства display
<img>html-изображенияinline
<map></map>активные области на карте-изображенииinline
<area>гиперссылка с текстом или активная область внутри карты-изображенияinline
<canvas></canvas>холст-контейнер для динамического отображения изображенийinline-block

Списки

Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции.

Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.

НазваниеОписаниеЗначение свойства display
<ol></ol>упорядоченный нумерованный списокblock
<ul></ul>маркированный списокblock
<li></li>элемент спискаlist-item
<dl></dl>контейнер для термина и его описанияblock
<dt></dt>задаёт терминblock
<dd></dd>расшифровывает терминblock

Ссылки

Тег ссылки в html всегда один. Будьте осторожны при его использовании.

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

Также в атрибуте данного тега внимательно прописывайте адрес перехода.

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

Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!

Встраиваемый контент

Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации.

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

ИмяОписаниеЗначение свойства display
<audio></audio>добавляет аудио-файлыinline-block
<video></video>добавляет видео-файлыinline-block
<source>указывает местоположение и тип альтернативных файлов для <audio> и <video>none
<track>субтитры для элементов <audio> и <video>none
<embed>встраивает внешний интерактивный контент или плагинinline-block
<object></object>контейнер для встраивания мультимедиаinline-block
<param>задаёт параметры для плагинов, встраиваемых с помощью элемента <object>none
<iframe></iframe>создаёт встроенный фреймblock

Группировка контента

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

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

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

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

ИмяОписаниеЗначение свойства display
<body></body>тело html-документаblock
<div></div>контейнер для разделов html-документа, группирует блочные элементыblock
<span></span>контейнер для строчных элементовinline
<header></header>секция для вводной информации сайта или группы навигационных ссылокblock
<footer></footer>секция для нижнего колонтитула документа или разделаblock
<section></section>логическая область (раздел) страницы, обычно с заголовкомblock
<article></article>раздел контента, образующий независимую часть документа или сайтаblock
<aside></aside>контент страницы, имеющий косвенное отношение к основному контентуblock
<nav></nav>раздел документа, содержащий навигационные ссылки по сайтуblock
<figure></figure>независимый контейнер для такого контента как изображения, диаграммы и т. п.block
<figcaption></figcaption>заголовок для элемента <figure>block
<details></details>контейнер с дополнительными сведениями, который можно открыть или закрытьblock
<summary></summary>видимый заголовок для элемента <details>block
<main></main>контейнер для уникального основного содержимого в пределах одной страницы сайтаblock

Формы

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

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

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

НазваниеОписаниеЗначение свойства display
<form></form>html-формаblock
<input>многофункциональные поля формыinline-block
<textarea>многострочное поле формыinline-block
<label></label>текстовая метка для элемента <input>inline
<datalist></datalist>контейнер для выпадающего списка элемента <input> с <option>-значениямиnone
<select></select>элемент управления с выбором значений из предложенных вариантов <option>inline-block
<optgroup></optgroup>контейнер с заголовком для группы элементов <option>block
<option></option>вариант (опция) в раскрывающемся спискеblock
<fieldset></fieldset>группирует связанные элементы в формеblock
<legend></legend>заголовок элементов формы, сгруппированных с помощью <fieldset>block
<button></button>интерактивная кнопкаinline-block
<keygen>генерирует закрытый и открытый ключиinline-block
<progress></progress>индикатор выполнения задачиinline-block
<meter></meter>индикатор измерения в заданном диапазонеinline-block
<output></output>поле для вывода результата вычисленияinline

На этом все!

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

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

HTML тег html

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Простой HTML-документ:




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

Это заголовок


Это абзац.


Попробуйте сами »


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

Тег представляет корень документа HTML.

Тег является контейнером для всех остальных элементов HTML (кроме тег ).

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


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

Элемент
Да Да Да Да Да


Атрибуты

Атрибут Значение Описание
xмлн http://www.w3.org/1999/xhtml Указывает атрибут пространства имен XML (если вам нужно, чтобы ваш контент соответствовал XHTML)

Глобальные атрибуты

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


Связанные страницы

Учебник по HTML: Введение в HTML

Справочник по HTML DOM: Объект HTML


Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

html {
  display: block;
}

html:focus {
  контур: нет;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

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

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

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

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

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

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

Синтаксис:  

  Операторы...  

Code:  

HTML

< html >

     < head >

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

     head >

 0029 < body >HTML web page contents body >

html >

Output :

 

  • Тег заголовка: Тег заголовка используется для хранения всех элементов заголовка в файле HTML. Он содержит заголовок, стиль, мета-тег и т. д.

Синтаксис:   

  Операторы...  

Код:

HTML

< HEAD > Содержит элементы, описывающие документ .

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

Синтаксис:   

  Операторы...  

Code:  

HTML

< body >The content of your HTML page body >

Output :

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

Синтаксис:  

  Заявления...  

Code:  

HTML

< title >tab name title >

Output :

 

 

Content тег контейнера:  

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

Синтаксис:  

 

Заявления...

Утверждения...

Утверждения...

Утверждения...
Утверждения...
Утверждения...

Code:  

HTML

< h2 >Heading 1 h2

< h3 >Heading 2 H3 >

< H4 > Заголовок 3 H4 >

< H5 >. h5 >

< h5 >Heading 5 h5 >

< h6 >Heading 6 h6 >

Вывод:

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

Синтаксис:  

 

Заявления ...

Код:

HTML

< P > Geeksforgeeke: Portal Sciplion Suciela 9929992992999299929 9928992899299929 9928 9 9> > Geeksforgeeks: Computer Science.

Вывод: 

 

  • Тег выделения: Используется для отображения выделенного текста.

Синтаксис:  

  Операторы...  

Code:  

HTML

< em >GeeksforGeeks em >

Output :

 

  • Bold тег: Используется для выделения жирным шрифтом содержимого в HTML-документе.

Синтаксис:  

  Операторы...  

Код:  

HTML

< b >Bold word b >

Output :

 

  • Italic tag: It is используется для написания содержимого курсивом.

Синтаксис:  

  Заявления...  

Код:  
 

HTML

< i >GeeksforGeeks i >

Output :

 

  • Small (text) tag: It is used to set the мелкий размер шрифта контента.

Синтаксис:  

  Операторы...  

Код:  

HTML


5
0028 <
Small > Пример Small >

Выход:

  • .

Syntax:  

  Statements. ..  

Code:  

HTML

< u >GeeksforGeeks u >

Вывод:

 

  • Используется для представления удаленного текста. Он пересекает текстовое содержимое.

Syntax:  

  Statements...  

Code:  

HTML

< strike >geeksforgeeks strike >GeeksforGeeks

Вывод:

 

  • Тег привязки к одной странице 7.

Синтаксис:

  .."> операторы ... используется для перечисления содержимого.   

Синтаксис:

 
  • Заявления ...
  • Код:

    HTML

    < LIL > LIT > LIL > LIL > LIL > LIL > LIT > LIL > >

    < LI > Список.0037 Используется для перечисления содержимого в определенном порядке.

    Syntax:  

     
      Statements...

    Code:  

    HTML

    < ol >

          < li >Элемент списка 1 li >

          < li >List item 2 li >

          < li >List item 3 li >

          < li > List item 4 li >

    ol >

    Output :

     

    • Тег неупорядоченного списка: Используется для перечисления содержимого без порядка.

    Syntax:  

     
      Statements...

    Code:  

    HTML

    < ul >

          < li >Элемент списка 1 li >

          < li >List item 2 li >

          < li >List item 3 li >

          < li >List item 4 li >

    ul >

    Output :

     

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

    Синтаксис:  

      

    Код:   

    • Тег Scrolling Text: Используется для прокрутки текста или изображения.

    Синтаксис:  

      Операторы...  

    Код:  

    HTML

    < marquee bgcolor = "#cccccc" loop = "-1"

    scrollamount = "2" width = "100%" >

    Example Marquee marquee >

    Output :

     

    • Тег центра: Используется для размещения содержимого в центре.

    Syntax:  

     
    Statements...

    Code:  

    HTML

    < center >GeeksforGeeks center >

    Вывод:

     

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

    Syntax:  

      Statements ...  

    Code:  

    HTML

    < font face = "Times New Roman" >Пример шрифт >

    Вывод:

     

    Пустой (не контейнер) Теги:  
     

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

    Syntax:  

     

    Code:  

    HTML

    GeeksforGeeks< br >A computer science portal

    Output :

     

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

    Syntax:  

      

    Code:  

    HTML

    < img src = "gfg.PNG" alt = "Изображение GeeksforGeeks" >

    Вывод:

     

    • Тег ссылки: Используется для ссылки на контент из внешнего источника.

    Syntax:  

      

    Code:   

    HTML

    < head >

    < link rel = "таблица стилей" тип = "текст/css" href = "style.css" >

    Head >

    • . документ.

    Syntax:  

     
    • Code:  
       

    HTML

    < hr width = "100%" size = "5" />

    Output :

     

    • Meta tag: It is used to specify описание страницы. Например, последний модификатор, авторы и т. д.

    Синтаксис:  

      Заявления ...  

    Код:  

    HTML 5 5

    0009   <    meta    name    =    "Description"   

         content = "Description of your site" >

    < meta name = "Ключевые слова"

    Содержание = "Ключевые слова, описывающие ваш сайт" >

    >0193
  • Тег Table: Тег table используется для создания таблицы в HTML-документе.
  • Syntax:  

      Statements... 

    Code:  

    HTML

    < table border = "4 " cellpadding = "2" Cellspacing = "2" ширина = "50%" >

    < tr > < td >Column 1 td >

    < td >Column 2 td > tr > table >

    Output :

     

    • Тег Tr: Используется для определения строки таблицы HTML.

    Syntax:  

      Statements...  

    Code:  

    HTML

    < table >

       < tr >

         < th >Месяц th >

         < th >Savings th >

       tr >

       < tr >

    < TD > Январь TD >

    < TD

    0029 >$100 td >

       tr >

    table >

    Output :

     

    • й тег: Определяет ячейку заголовка в таблице. По умолчанию он устанавливает содержимое полужирным шрифтом и по центру.

    Синтаксис:

      Операторы ...  

    Code:  

    HTML

    < table >

      < tr >

        < th >Month TH >

    < TH > Экономия TH >

    >

    0029 tr >

      < tr >

        < td >January td >

        < TD > $ 100 TD >

    TR >

    9009 . 0029 таблица >

    Вывод:

     

    • Td 3 тег.

    Syntax:  

      Statements ...  

    Code:  

    HTML

    < table >

       < tr >

         < td >Cell A td >

         < td >Cell B td >

       tr >

    table >

    Output :

     

    Теги ввода:  
     

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

    Syntax:  

     
    Statements ...

    Code:  

    HTML

    < form action = "mailto :[email protected] " >

       Name: < input name = "Name" value = "" size = "80" >< br >

       Email: < input name = "Email" value = "" size = "80" >< br >

       < br >< center >< input type = "submit" > center >

    Форма >

    Выход:

    • . Вход.

    Syntax:  

      

    Code:  

    HTML

    < form method = POST Действие = "/cgibin/example.cgi" >

    < Вход Тип = " : FLAST " "" "" "" "" "" "0029

      семейство шрифтов: Verdana; вес шрифта: полужирный;

      Размер шрифта: 12 пикселей; background-color: #72a4d2;"

      size = "10" maxlength = "30" >

    < input type = "Отправить" значение = "Отправить" >

    Форма >

    Выход:

    • Опция по выпуску.

    Syntax:  

      

    Code:  

    HTML

    < form method = post action = "/cgibin/example.cgi" >

    < center > Select an option:< select >

    < Опция > Вариант 1 Опция >

    < Опция Выбран> опция 2 . Вариант > > .0029

    < option >option 3 option >

    form >

    Output :

     

    • Тег радиокнопки: Используется для выбора только одного варианта из заданных вариантов.

    Синтаксис:  

      option_value 

    Код:

    HTML

    < Форма Метод = POST Действие = POST = . Select an option:< br >

    < input type = "radio" name = "option" > Опция 1

    < Вход Тип = "Радио" Название = "опция . type = "radio" name = "option" > Option 3

    Output :

     

    • Тег кнопки-флажка: Используется для выбора опции из заданных опций.

    Syntax: 

      

    Code:

    HTML

    < form >

       GeeksforGeeks:< br >

       Посещено< Вход Тип = "Флажок" Название = "CH" Значение = " . NotVisited< input type = "checkbox" name = "ch" value = "Not visited" >

      < form >

    Output: 

     

    Supported Browsers:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    HTML является основой веб-страниц и используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *