ПРАНДИТ Автоспорт Кулинарния Эзотерика Урлинки
: x

Основные HTML-теги и примеры использования кода для создания веб-сайтов

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

Для более полного представления о веб-разработке ознакомьтесь с лайфхаками нашего информационного партнёра Мазаяки!

-/+<!-- Основные HTML-теги -->

<HTML>…</HTML> – пара тегов, обозначающая начало и конец HTML-документа.
<HEAD>…</HEAD> – заголовок документа.
<TITLE>…</TITLE> – название веб-страницы.
<META> – специальный тег для описания свойств документа. Подробности…

x<!-- Листинг 1.1 -->

 <HTML lang="ru">
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-language" content="ru">
<META name="keywords" content="список ключевых слов, поисковые фразы, теги">
<META name="description" content="Описание содержимого веб-страницы…">
<META name="viewport" content="width=device-width, initial-scale=1">
<META name="robots" content="all">
<META property="og:title" content="Альтернативный заголовок веб-страницы">
<META property="og:description" content="Альтернативное описание веб-страницы">
<META property="og:type" content="article">
<META property="og:image" content="https://i.prundit.ru/p/pr.gif">
<META property="og:url" content="https://prundit.ru/html/tags/">
<META property="og:locale" content="ru_RU">
<META property="og:site_name" content="Название веб-сайта">
</HEAD>
<BODY>
<P>Основной текст…</P>
</BODY>
</HTML>
<LINK> – специальный тег для подключения к документу внешних источников. Подробности…

x<!-- Листинг 1.2 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P>Основной текст…</P>
</BODY>
</HTML>
<SCRIPT>…</SCRIPT> – специальный контейнер для написания собственных либо подключения к документу внешних скриптов. Подробности…

x<!-- Листинг 1.3 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<SCRIPT src="/js/script.js" language="JavaScript" type="text/javascript" charset="UTF-8" async=""></SCRIPT>
</HEAD>
<BODY>
<P>Основной текст…</P>
</BODY>
</HTML>
<BODY>…</BODY> – тело документа.

+ Пример

 <!DOCTYPE HTML>
<HTML lang="ru">
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<META charset="UTF-8">
<META name="description" content="Описание содержимого веб-страницы…">
<META name="viewport" content="width=device-width, initial-scale=1">
<META name="robots" content="all">
<META name="twitter:card" content="summary">
<META name="twitter:site" content="@PRUNDIT">
<META name="twitter:title" content="Альтернативный заголовок веб-страницы для передачи данных об аккаунте в Твиттере">
<META name="twitter:description" content="Альтернативное описание веб-страницы для передачи данных об аккаунте в Твиттере">
<META name="twitter:image" content="https://i.prundit.ru/p/pr.gif">
<META name="twitter:image:alt" content="@PRUNDIT">
<META property="og:title" content="Альтернативный заголовок веб-страницы для передачи и отображения превью в сети">
<META property="og:description" content="Альтернативное описание веб-страницы для передачи и отображения превью в сети">
<META property="og:type" content="article">
<META property="og:image" content="https://i.prundit.ru/p/pr.gif">
<META property="og:image:width" content="720">
<META property="og:image:height" content="720">
<META property="og:image:type" content="image/gif">
<META property="og:url" content="https://prundit.ru/html/tags/">
<META property="og:locale" content="ru_RU">
<META property="og:site_name" content="Название веб-сайта">
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
<SCRIPT src="/js/script.js" type="text/javascript" language="JavaScript" charset="UTF-8" async="async"></SCRIPT>
</HEAD>
<BODY>
<P>Основной текст…</P>
</BODY>
</HTML>
HTML x

-/+<!-- Форматирование текста и страницы -->

<P>…</P> – контейнер для разделения текста на абзацы.
<A>…</A> – гиперссылка. Подробности…

x<!-- Листинг 2.1 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<A href="https://prundit.ru/" title="Перейти на сайт">Prundit.ru</A>
Основной текст…
</P>
</BODY>
</HTML>
<B>…</B> – полужирное начертание текста (bold).
<I>…</I> – курсивное начертание текста (italic).
<U>…</U> – подчёркивание снизу (underline).
<IMG> – рисунок. Подробности…

x<!-- Листинг 2.2 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<IMG src="https://i.prundit.ru/p/pr.gif" width="720" height="720" alt="Логотип" title="Наш логотип">
Основной текст…
</P>
</BODY>
</HTML>
<BR> – перевод строки.
<NOBR>…</NOBR> – запрет разрыва содержимого.
<UL>…</UL> – маркированный список.
<OL>…</OL> – нумерованный список.
<LI> – строка списка. Подробности…

x<!-- Листинг 2.3 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<UL type="circle">
<LI>Первая строка маркированного списка;
<LI>Вторая строка маркированного списка;
…
<LI>N-ая строка маркированного списка.
</UL>
<OL type="I" start="5">
<LI>Первая строка нумерованного списка;
…
<LI>K-ая строка нумерованного списка.
</OL>
Основной текст…
</P>
</BODY>
</HTML>
<DIV>…</DIV> – блок.

+ Пример

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>Текстовый контент внутри первого абзаца может быть оформлен, например, <B>полужирным</B> начертанием, <I>курсивом</I> или даже с помощью <U>подчёркивания</U>…</P>
<P>Во втором абзаце могут содержаться <NOBR><A href="https://prundit.ru/" title="Prundit.ru">текстовые ссылки</A>…</NOBR></P>
<OL type="a" start="1">
<LI>Первая строка нумерованного списка;
<LI>Вторая строка нумерованного списка:
<UL>
<li type="circle">Первая строка маркированного списка;
<li type="disc">Вторая строка маркированного списка;
…
<li type="square">N-ая строка маркированного списка.
</UL>
…
<LI>K-ая строка нумерованного списка.
</OL>
<!-- Пример комбинации нумерованного и маркированного списков:
  1. Первая строка нумерованного списка;
  2. Вторая строка нумерованного списка:
    • Первая строка маркированного списка;
    • Вторая строка маркированного списка;
      …
    • N-ая строка маркированного списка.
    …
  3. K-ая строка нумерованного списка.
//-->
<DIV>И, наконец, на веб-странице можно разместить несколько рисунков…<BR>
<IMG src="https://i.prundit.ru/b/pr.gif" width="88" height="31" align="center" alt="Баннер-1" title="Наш баннер"><BR>
<IMG src="https://i.prundit.ru/b/fs.gif" width="88" height="31" align="center" alt="Баннер-2" title="Наш баннер">
…
<DIV>
</BODY>
</HTML>
HTML x

-/+<!-- Таблица и ее элементы -->

<TABLE>…</TABLE> – таблица.
<TBODY>…</TBODY> – тело таблицы.
<TR>…</TR> – строка таблицы.
<TD>…</TD> – ячейка в строке таблицы.

+ Пример

 <HTML>
<HEAD><TITLE>Заголовок веб-страницы</TITLE></HEAD>
<BODY>
<TABLE align="center" border="1">
<TBODY>
<TR>
<TD width="50%">1-ая ячейка 1-ой строки (11)</TD>
<TD width="50%">2-ая ячейка 1-ой строки (12)</TD>
</TR>
<TR>
<TD width="50%">1-ая ячейка 2-ой строки (21)</TD>
<TD width="50%">2-ая ячейка 2-ой строки (22)</TD>
</TR>
</TBODY>
</TABLE>
<!-- Пример таблицы 2x2:
1-ая ячейка 1-ой строки (11) 2-ая ячейка 1-ой строки (12)
1-ая ячейка 2-ой строки (21) 2-ая ячейка 2-ой строки (22)
//-->
</BODY></HTML>
HTML x

-/+<!-- Форма и ее элементы -->

<FORM>…</FORM> – тег начала и конца формы в документе.
<INPUT>…</INPUT> – многофункциональный элемент ввода. Подробности…

x<!-- Листинг 4.1 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="https://prundit.ru/" method="POST" enctype="multipart/form-data" name="frm_nam">
Введите ваше имя: <INPUT type="text" name="inp_nam">
и фамилию: <INPUT type="text" name="inp_fam"><BR>
<INPUT type="submit" value="Отправить">
</FORM>
</BODY></HTML>
<SELECT>…</SELECT> – выпадающий список.
<OPTION> – элемент списка <SELECT>. Подробности…

x<!-- Листинг 4.2 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="https://prundit.ru/" method="GET" enctype="multipart/form-data">
Здравствуйте! Пожалуйста, выберите интересующую информацию:
<SELECT name="sel_dat">
<OPTION value="1" selected>1-ая строка выпадающего списка
<OPTION value="2">2-ая строка выпадающего списка
…
<OPTION value="N">N-ая строка выпадающего списка
</SELECT>
<INPUT type="submit" value="Далее">
</FORM>
</BODY></HTML>
<LABEL>…</LABEL> – метка, часто применяемая на формах вместе с тегом <INPUT>. Подробности…

x<!-- Листинг 4.3 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="" method="POST">
Укажите ваши данные:<BR>
<LABEL for="lbl_r1"><INPUT type="radio" value="1" id="lbl_r1" name="inp_rad" checked>
Вариант 1</LABEL><BR>
<LABEL for="lbl_r2"><INPUT type="radio" value="2" id="lbl_r2" name="inp_rad">
Вариант 2</LABEL><BR>
…
<LABEL for="lbl_rN"><INPUT type="radio" value="N" id="lbl_rN" name="inp_rad">
Вариант N</LABEL><BR>
<LABEL for="lbl_c1"><INPUT type="checkbox" id="lbl_c1" name="chk_01" checked="checked">
Флажок 1</LABEL><BR>
<LABEL for="lbl_c2"><INPUT type="checkbox" id="lbl_c2" name="chk_02">
Флажок 2</LABEL><BR>
…
<LABEL for="lbl_cM"><INPUT type="checkbox" id="lbl_cM" name="chk_0M">
Флажок M</LABEL><BR>
<INPUT type="submit" value="Сохранить">
</FORM>
</BODY></HTML>
<TEXTAREA>…</TEXTAREA> – многостроковое текстовое поле ввода. Подробности…

x<!-- Листинг 4.4 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM method="GET" name="frm_nam">
Чтобы задать свой вопрос, заполните форму обратной связи:<BR>
<INPUT value="Имя" name="inp_nam">
<INPUT value="E-mail" name="inp_mail"><BR>
<TEXTAREA name="txt_q">Ваше сообщение</TEXTAREA><BR>
<INPUT type="reset" value="Стереть">
<INPUT type="submit" value="Сообщить">
</FORM>
</BODY></HTML>

+ Пример

 <HTML>
<HEAD><TITLE>Заголовок веб-страницы</TITLE></HEAD>
<BODY>
<FORM action="https://prundit.ru/" method="POST" enctype="multipart/form-data" name="frm_eg">
Доброго времени суток! Пожалуйста, расскажите немного о себе.<BR>
E-mail: <INPUT type="text" name="inp_mail" title="Электронная почта">
Ф.И.О.: <INPUT type="text" name="inp_fio" title="Фамилия И.О."><BR>
Дата рождения: <SELECT name="sel_dd" title="День рождения">
<OPTION value="0" selected>день
<OPTION value="1">1
<OPTION value="2">2
<OPTION value="3">3
<OPTION value="4">4
<OPTION value="5">5
<OPTION value="6">6
<OPTION value="7">7
<OPTION value="8">8
<OPTION value="9">9
<OPTION value="10">10
<OPTION value="11">11
<OPTION value="12">12
<OPTION value="13">13
<OPTION value="14">14
<OPTION value="15">15
<OPTION value="16">16
<OPTION value="17">17
<OPTION value="18">18
<OPTION value="19">19
<OPTION value="20">20
<OPTION value="21">21
<OPTION value="22">22
<OPTION value="23">23
<OPTION value="24">24
<OPTION value="25">25
<OPTION value="26">26
<OPTION value="27">27
<OPTION value="28">28
<OPTION value="29">29
<OPTION value="30">30
<OPTION value="31">31
</SELECT>
<SELECT name="sel_mm" title="Месяц рождения">
<OPTION value="0" selected>месяц
<OPTION value="1">январь
<OPTION value="2">февраль
<OPTION value="3">март
<OPTION value="4">апрель
<OPTION value="5">май
<OPTION value="6">июнь
<OPTION value="7">июль
<OPTION value="8">август
<OPTION value="9">сентябрь
<OPTION value="10">октябрь
<OPTION value="11">ноябрь
<OPTION value="12">декабрь
</SELECT>
<INPUT value="год" name="inp_yy" title="Год рождения" maxLength="4"><BR>
Пол: <LABEL for="lbl_m"><INPUT type="radio" value="1" id="lbl_m" name="inp_sx" checked>Муж.</LABEL>
<LABEL for="lbl_w"><INPUT type="radio" value="2" id="lbl_w" name="inp_sx">Жен.</LABEL><BR>
Образование:<BR>
<INPUT type="checkbox" name="chk_ed1" checked="checked" disabled>
Среднее<BR>
<INPUT type="checkbox" name="chk_ed2">
Средне-специальное<BR>
<LABEL for="lbl_ed"><INPUT type="checkbox" id="lbl_ed" name="chk_ed3">
Высшее</LABEL><BR>
Ваш пароль доступа:
<INPUT type="password" name="inp_pw0" title="Ваш пароль" maxLength="10"><BR>
Подтвердите пароль:
<INPUT type="password" name="inp_pw1" title="Подтверждение пароля" maxLength="10"><BR>
Дополнительная информация<BR>
<TEXTAREA cols="30" rows="5" name="txt_inf" title="Дополнительная информация">Дополнительно </TEXTAREA><BR>
<INPUT type="reset" value="Очистить" title="Отменить изменения">
<INPUT type="submit" value="Отправить" title="Внести изменения">
</FORM>
<!-- Пример формы с различными элементами:
Доброго времени суток! Пожалуйста, расскажите немного о себе.
E-mail: Ф.И.О.:
Дата рождения:
Пол:
Образование:
Среднее
Средне-специальное

Ваш пароль доступа:
Подтвердите пароль:
Дополнительная информация


//-->
</BODY></HTML>
HTML x

-/+<!-- Некоторые дополнительные элементы -->

<HN>…</HN> – контейнер для подзаголовка в теле текста веб-страницы (1≤N≤6). Подробности…

x<!-- Листинг 5.1 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<H1>Подзаголовок-1</H1>
<P>Текстовое описание в рамках подзаголовка-1…</P>
<H2>Подзаголовок-2</H2>
<P>Текстовое описание в рамках подзаголовка-2…</P>
…
<H6>Подзаголовок-6</H6>
<P>Текстовое описание в рамках подзаголовка-6…</P>
</BODY></HTML>
<SUP>…</SUP> – верхний индекс.
<SUB>…</SUB> – нижний индекс.
<CODE>…</CODE> – контейнер для отображения программного кода.
<SPAN>…</SPAN> – контейнер для выделения определенного участка (секции) текста.
<CENTER>…</CENTER> – контейнер для отцентровки текста.
<STRONG>…</STRONG> – аналог тега <B>, дающий полужирное начертание шрифта.
<MARQUEE>…</MARQUEE> – бегущая строка. Подробности…

x<!-- Листинг 5.2 -->

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
…
<MARQUEE width="80%" behavior="scroll">Текст бегущей строки…</MARQUEE>
…
</BODY></HTML>

+ Пример

 <HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<H1>Проверка дополнительных элементов</H1>
<P>Содержимое веб-страницы может включать в себя различные переменные, например, X<SUB>1</SUB>, X<SUB>2</SUB>; а также числительные, возведенные в степень, к примеру, 3<SUP>2</SUP> или <SPAN title="А в кубе">a<SUP>3</SUP></SPAN>.</P>
<MARQUEE width="100%" behavior="slide" scrolldelay="70" loop="3">Кроме того, веб-страница может содержать и устаревшие теги…</MARQUEE>
<H2>Примеры устаревших дескрипторов</H2>
<DIV>При форматировании (оформлении) текста для придания <STRONG>полужирного начертания можно использовать и контейнер <CODE>&lt;STRONG&gt;</CODE></STRONG>. Но также существует возможность <B>применения контейнера &lt;B&gt;</B>.</DIV>
<CENTER>Успехов в ваших экспериментах!</CENTER>
<!-- Пример реализации различных дополнительных тегов

Проверка дополнительных элементов

Содержимое веб-страницы может включать в себя различные переменные, например, X1, X2; а также числительные, возведенные в степень, к примеру, 32 или a3.

Кроме того, веб-страница может содержать и устаревшие теги…

Примеры устаревших дескрипторов

При форматировании (оформлении) текста для придания полужирного начертания можно использовать и контейнер <STRONG>. Но также существует возможность применения контейнера <B>.
Успехов в ваших экспериментах!
//-->
</BODY></HTML>
HTML x
© –2024 PRUNDIT Group
T
Партнёры
PRANDIT Мазаяки Проджект Автогурус Авгурус Кулинарния Регистратор доменов
Подобрать домен на webnames.ru
Обратная связь Игры Настройки
  Партнёры Каталог
Социальные Медиа
Ищите нас в соцсетях:
Поделитесь с друзьями: