| Тег | Краткое описание |
|---|---|
| <!—…—> | Комментарий. Подробнее |
| <!DOCTYPE> | Определяет тип документа. Подробнее |
| <a> | Ссылка, гиперссылка, якорь. Подробнее |
| <abbr> | Определяет текст как аббревиатуру. Подробнее |
| <address> | Контактная информация автора или владельца документа. Подробнее |
| <area> | Определяет область на карте-изображении |
| <article> | Статья |
| <aside> | Контент в стороне (содержимое не является основным на странице по смыслу) |
| <audio> | Позволяет вставить воспроизводимый аудио файл. Подробнее |
| <b> | Полужирный текст. Подробнее |
| <base> | Задает базовый URL или аттрибут target для относительных ссылок в документе. Подробнее |
| <bdi> | Область, где написание текста может имееть другое направления. Подробнее |
| <bdo> | Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее |
| <blockquote> | Цитата. Подробнее |
| <body> | Указывает область body документа. Подробнее |
| <br> | Перенос строки. Подробнее |
| <button> | Кликабельная кнопка |
| <canvas> | Используется для рисовании графики с помощью скриптов |
| <caption> | Подпись таблицы. Подробнее |
| <cite> | Сноска на название материала. Подробнее |
| <code> | Используется для вставки компьютерного кода в текстовом виде. Подробнее |
| <col> | Задает характеристики колонок в таблице. Подробнее |
| <colgroup> | Определяет группу из одной или более колонок таблицы для форматирования. Подробнее |
| <datalist> | Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле |
| <dd> | Определяет описание термина из тега <dt> в списке терминов <dl> |
| <del> | Текст, который удален в новой версии документа. Подробнее |
| <details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть |
| <dfn> | Указывает, что содержимое является термином. Подробнее |
| <dialog> | Определяет диалоговое окно или интерактивный элемент |
| <div> | Блочный элемент — один из основных элементов верстки. Подробнее |
| <dl> | Определяет список определений |
| <dt> | Название термина в списке определений <dl> |
| <em> | выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее |
| <embed> | Контейнер для внешнего приложения |
| <fieldset> | Группа связанных элементов в форме |
| <figcaption> | Заголовок для <figure> элемента |
| <figure> | Определяет автономную группу из нескольких элементов (например картинка с подписью) |
| <footer> | Нижний колонтитул |
| <form> | Определяет форму пользовательского ввода |
| <h2> — <h6> | Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее |
| <head> | Указывает область head документа. Подробнее |
| <header> | Блок заголовка |
| <hr> | Горизонтальная линия — тематический разделитель. Подробнее |
| <html> | Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее |
| <i> | Выделяет текст курсивом. Подробнее |
| <iframe> | |
| <img> | Изображение, картинка. Подробнее |
| <input> | Поле для ввода |
| <ins> | Текст, который был добавлен в новой версии документа. Подробнее |
| <kbd> | Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее |
| <label> | Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. |
| <legend> | Заголовок элементов <fieldset> |
| <li> | Элемент списка |
| <link> | Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) |
| <main> | Основной контент |
| <map> | Контейнер для <area>. Определяет пользовательскую карту на изображении |
| <mark> | Выделенный текст (обычно с помощью подсветки фона). Подробнее |
| <menu> | Контейнер для списка пунктов меню |
| <menuitem> | Определяет элементы, которые пользователь может вызвать из контекстного меню |
| <meta> | Используется для определения мета-данных документа. Подробнее |
| <meter> | Измеритель значений в заданном диапазоне |
| <nav> | Контейнер для навигационных элементов |
| <noscript> | Альтернативный контент для пользователей, отключивших скрипты |
| <object> | Определяет встроенный объект |
| Определяет нумерованный список | |
| <optgroup> | Определяет группу связанных вариантов в выпадающем списке. Дает название группу |
| <option> | Параметр (вариант выбора) в выпадающем списке |
| <output> | Результат вычислений |
| <p> | Абзац. Подробнее |
| <param> | Задает параметры для встроенных объектов |
| <picture> | Контейнер для нескольких изображений |
| <pre> | |
| <progress> | Индикатор выполнения (прогресса) |
| <q> | Цитата в тексте. Подробнее |
| <rp> | Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее |
| <rt> | Аннотация к содержимому тега <ruby>. Подробнее |
| <ruby> | Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее |
| <s> | Перечеркнутый текст. Подробнее |
| <samp> | Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее |
| <script> | Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее |
| <section> | Раздел |
| <select> | Определяет выпадающий список |
| <small> | Текст шрифтом меньшего размера. Подробнее |
| <source> | Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее |
| <span> | Строчный элемент. Подробнее |
| <strong> | Текст, выделенный по значению. Обычно отображается полужирным. Подробнее |
| <style> | Определяет контейнер для определения стилей документа |
| <sub> | Отображает текст в виде нижнего индекса. Подробнее |
| <summary> | Заголовок внутри тега <details> |
| <sup> | Отображает текст в виде верхнего индекса. Подробнее |
| <table> | Определяет таблицу. Подробнее |
| <tbody> | Определяет область контента в таблице. Подробнее |
| <td> | Ячейка в таблице <table>. Подробнее |
| <textarea> | Многострочное поле для ввода |
| <tfoot> | Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее |
| <th> | Ячейка — заголовок в таблице <table>. Подробнее |
| <thead> | Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее |
| <time> | Дата и/или время |
| <title> | Заголовок HTML документа. Подробнее |
| <tr> | Определяет строку в таблице. Подробнее |
| <track> | Определяет текстовую дорожку для тегов <video> и <audio> |
| <ul> | Определяет маркированный список |
| <var> | Используется для обозначения содержимого тега как переменной. Подробнее |
| <video> | Позволяет вставить воспроизводимое видео. Подробнее |
| <wbr> | Место, где допускается перенос строки. Подробнее |
guruweba.com
| Тег | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|
| <acronym> | Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>. | Да | Да | Да | Да | Да | Да |
| <abbr> | Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков. | Да | Да | Да | Да | Да | Да |
| <address> | Определяет контактную информацию (автор / владелец) документа или статьи. | Да | Да | Да | Да | Да | Да |
| <b> | Определяет жирное начертание текста. | Да | Да | Да | Да | Да | Да |
| <bdi> | Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью. | Да | Да | Да | Да | Нет | Нет |
| <bdo> | Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский). | Да | Да | Да | Да | Да | Да |
| <big> | Не поддерживается в HTML5. Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <blockquote> | Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа | Да | Да | Да | Да | Да | Да |
| <center> | Не поддерживается в HTML5. Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <cite> | Предназначен для выделения названия произведений (по умолчанию — курсивом). | Да | Да | Да | Да | Да | Да |
| <code> | Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом). | Да | Да | Да | Да | Да | Да |
| <del> | Перечёркнутый (удалённый) текст | Да | Да | Да | Да | Да | Да |
| <dfn> | Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом. | Да | Да | Да | Да | Да | Да |
| <em> | Экспрессивно-эмоциональное выделение текста | Да | Да | Да | Да | Да | Да |
| <font> | Не поддерживается в HTML5. Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <i> | Курсивное начертание текста | Да | Да | Да | Да | Да | Да |
| <ins> | Подчёркнутый текст, вставленный в документ. | Да | Да | Да | Да | Да | Да |
| <kbd> | Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре. | Да | Да | Да | Да | Да | Да |
| <mark> | Выделенный/подсвеченный текст. | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
| <meter> | Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение. | 8.0 | 6.0 | 11.0 | 6.0 | Нет | 13.0 |
| <pre> | Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк | Да | Да | Да | Да | Да | Да |
| <progress> | Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена. | 8.0 | 16.0 | 11.0 | 6.0 | 10.0 | 12.0 |
| <q> | Используется для выделения коротких цитат (строчная цитата). | Да | Да | Да | Да | Да | Да |
| <rp> | Определяет, что отображать браузеру, который не поддерживает тег <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <rt> | Помещает полезный текст фуриганы в составе элемента <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <ruby> | Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана). | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
| <s> | Определяет текст, который больше не является правильным или актуальным. | Да | Да | Да | Да | Да | Да |
| <samp> | Результат вывода компьютерной программы или скрипта. | Да | Да | Да | Да | Да | Да |
| <small> | Шрифт, который отображается меньшим размером(мелкий/юридический шрифт). | Да | Да | Да | Да | Да | Да |
| <strike> | Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s> | Да | Да | Да | Да | Да | Да |
| <strong> | Текст, которому придают особое значение (важный текст). | Да | Да | Да | Да | Да | Да |
| <sub> | Текст с нижним индексом. | Да | Да | Да | Да | Да | Да |
| <sup> | Текст с верхним индексом. | Да | Да | Да | Да | Да | Да |
| <time> | Тег временной разметки (семантическая разметка). | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
| <tt> | Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
| <u> | Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. | Да | Да | Да | Да | Да | Да |
| <var> | Математические/переменные величины. | Да | Да | Да | Да | Да | 12.0 |
| <wbr> | Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL). | 1.0 | 3.0 | 11.7 | 4.0 | Нет | Да |
basicweb.ru
Что такое HTML-теги — шпаргалка по основным меткам
Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, <body>). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <THEAD>, а <thead>.
Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, </html>). Всё, что находится внутри пары тегов, называется их содержимым.
<Открывающий_тег>Содержимое</Закрывающий_тег> <b>Помещённый внутри этих тегов текст становится жирным</b>
Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
- Открывающей угловой скобки (<).
- Специального слова (имени тега). Например, hr, iframe, b.
- Закрывающей угловой скобки (>).
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- <!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- <html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- <meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- <script> содержит ссылку на файл сценария или сам код.
- <style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
- <header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- <footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- <main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
- <a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- <img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- <blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- <div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- <span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
- <ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- <table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
- <form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
- <button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
- <input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
- <menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- <textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Полезные ссылки:
www.seostop.ru
HTML справочник | Теги HTML
HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).
Для удобства все HTML теги разбиты на категории, согласно их назначению. Если вам нужен како-то конкретный тег, то в левом меню теги отсортированы в алфавитном порядке. Чтобы посмотреть полное описание тега и его атрибутов перейдите по ссылке, нажав на интересующий вас тег.
Вставляемый контент
Интерактивные элементы
Комментарии
Корневой элемент
Метаданные документа
Метаданные — структурированная информация о веб-странице, размещаемая внутри HTML-документа в элементе head.
Разделы документа
Списки
Ссылки
Сценарии
Таблицы
Текст
Формы
Теги html
Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».
Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.
На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.
Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.
puzzleweb.ru
| <picture></pictire> | контейнер для одного <img> и ноль или больше <source> | inline |
| <source> | местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio> | none |
| <img> | html-изображения | inline |
| <iframe></iframe> | создаёт встроенный фрейм | block |
| <embed> | встраивает внешний интерактивный контент или плагин | inline-block |
| <object></object> | контейнер для встраивания мультимедиа | inline-block |
| <param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
| <audio></audio> | добавляет аудио-файлы | inline-block |
| <video></video> | добавляет видео-файлы | inline-block |
| <track> | субтитры для элементов <audio> и <video> | none |
| <map></map> | активные области на карте-изображении | inline |
| <area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
| <a></a> | гиперссылка | inline |
| <em></em> | выделяет важные фрагменты текста курсивом | inline |
| <strong></strong> | выделяет полужирным важный текст | inline |
| <small></small> | отображает текст шрифтом меньшего размера | inline |
| <s></s> | перечёркивает неактуальный текст | inline |
| <cite></cite> | источник цитирования | inline |
| <q></q> | краткая цитата | inline |
| <dfn></dfn> | выделяет термин курсивом | inline |
| <abbr></abbr> | аббревиатура или акроним | none |
| <ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
| <rb></rb> | обертка для аннотации | inline |
| <rp></rp> | тег для скобок вокруг символов | none |
| <rt></rt> | расшифровка символов | block |
| <rtc></rtc> | обертка для дополнительной аннотации | inline |
| <data></data> | связывает содержимое с машиночитаемым переводом | inline |
| <time></time> | дата / время документа или статьи | inline |
| <code></code> | фрагмент программного кода | inline |
| <var></var> | выделяет переменные из программ | inline |
| <samp></samp> | результат выполнения сценария | inline |
| <kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
| <sub></sub> | подстрочное написание символов | inline |
| <sup></sup> | надстрочное написание символов | inline |
| <i></i> | выделяет текст курсивом без акцента | inline |
| <b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | inline |
| <u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline |
| <mark></mark> | выделяет фрагменты текста желтым фоном | inline |
| <bdi></bdi> | изолирует текст, читаемый справа налево | inline |
| <bdo></bdo> | задаёт направление написания текста | inline |
| <span></span> | контейнер для строчных элементов | inline |
| <br> | перенос текста на новую строку | none |
| <wbr> | возможное место разрыва длинной строки | none |
| <form></form> | html-форма | block |
| <label></label> | текстовая метка для элемента <input> | inline |
| <input> | многофункциональные поля формы | inline-block |
| <button></button> | интерактивная кнопка | inline-block |
| <select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
| <datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
| <optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
| <option></option> | вариант (опция) в раскрывающемся списке | block |
| <textarea> | многострочное поле формы | inline-block |
| <output></output> | поле для вывода результата вычисления | inline |
| <progress></progress> | индикатор выполнения задачи | inline-block |
| <meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
| <fieldset></fieldset> | группирует связанные элементы в форме | block |
| <legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
html5book.ru
Некоторые основные теги html для создания своего сайта
От автора: если вы решили заняться сайтостроением, то вам нужно знать хотя бы основные теги html. Это те базовые знания, которое помогут вам создать свой первый простой сайт.
В этой статье постараюсь описать основные теги языка html. Всего их более сотни, но действительно важных и постоянно нужных не так много. Самые главные теги
html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.
head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.
link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееscript — подключает файлы с расширением js (javascript).
title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.
meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.
body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.
Теги для текста, списки
p — создает параграф или абзац, который отделяется от других элементов небольшими вертикальными отступами. Основной элемент для хранения текстовой информации.
blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.
h2 — h6 — теги для выделения заголовков на веб-странице. h2 – самый главный и далее по убыванию важности.
Рис. 1. Заголовки в html.
q — маленькая цитата.
b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.
em, i — выделение курсивом.
sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.
ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.
ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.
li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.
Рис.2. Маркированный и немаркированный списки.
Ссылки
Для ссылок в html есть отдельный тег — <a>, который имеет один обязательный атрибут:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<a href = «адрес, куда перейти»>анкор</a></p>
<a href = «адрес, куда перейти»>анкор</a></p> |
Картинки
Картинки в html вставляются с помощью одинарного тега <img>. Обязательным атрибутом является src (source), то есть путь к самой картинке. Остальные параметры (размер, позиционирование, эффекты) лучше настраивать через css.
Таблицы
table — тег-контейнер, в который помещается вся таблица.
tr — ряд таблицы, в который вписываются ее ячейки. Сам ряд никак нельзя выделить, он выступает лишь в роли контейнера.
td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.
Пустые блочные и строчные контейнеры
div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.
span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.
Мультимедиа
В список тегов html можно добавить и более современные. Например, тег video, в атрибутах которого можно задать адрес до видеоролика, а также кодеки для его проигрывания на веб-странице. Сюда же входит audio. С помощью этого парного тега можно вставить аудиозапись.
Формы
form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.
input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).
textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.
Рис. 3. Простая форма, созданная с помощью тегов form и input.
HTML5
Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.
header — шапка сайта, статьи или какого-то раздела.
footer — подвал сайта, статьи или какого-то раздела.
aside — второстепенная информация, не имеющая непосредственной связи с главным содержанием. Но в этот тег не советуют вставлять сайдбар (боковую колонку), которую лучше пока делать по-старому с помощью div.
figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.
section — раздел сайта (обычно со своим заголовком).
article — независимая статья, новость или заметка.
nav — главная навигация сайта.
Конечно, это не все теги, которые появились в HTML5, но практика показывает, что именно перечисленные пригодятся вам больше всего. К сожалению, у всех этих новых элементов нет дружбы со старыми версиями Internet Explorer, поэтому для него нужно реализовывать отдельную поддержку.
В статье были описаны лишь самые распространенные элементы. Полный список тегов html c описанием можно посмотреть в каком-нибудь словаре. Самый популярный в рунете – htmlbook.
Один раз прочитав статью вы не запомните все перечисленные теги. Намного лучше они запоминаются при реальной работе над сайтом. Это были основные теги для создания сайта html. Заходите на наш блог и вы найдете гораздо больше информации по созданию собственного сайта своими руками.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
HTML: Теги для текста | HTML самоучитель
В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.
Форматирование текста
Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:
<html>
<body>
<p><b>Текст</b></p>
<p><strong>Текст</strong></p>
<p><em>Текст</em></p>
<p><i>Текст</i></p>
<p><small>Текст</small></p>
<p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>
</body>
</html>
Попробовать »Тег <pre>
Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:
<html>
<body>
<pre>
Он сохраняет авторское форматирование текста
(оставляет без изменений)
и делает шрифт моноширинным
</pre>
</body>
</html>
Попробовать »Теги для отображения кода
Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:
<html>
<body>
<p><code>Программный код</code>
<br>
<kbd>Ввод с клавиатуры</kbd>
<br>
<samp>Образец кода</samp>
<br>
<var>Выделение переменной</var>
</p>
<p>
Эти теги обычно используются для того, чтобы показать на странице программный код
</p>
</body>
</html>
Попробовать »Тег <address>
Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.
Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:
<html>
<body>
<p>Вы можете найти меня на моем сайте</p>
<address>
<a href="www.puzzleweb.ru">Мой сайт для связи</a>
</address>
</body>
</html>
Попробовать »Аббревиатуры
Пример демонстрирует, как можно написать аббревиатуру или сокращение:
<html>
<body>
<p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
Атрибут title нужен для всплывающей подсказки, она появляется
при наведении курсора на аббревиатуру.
</p>
</body>
</html>
Попробовать »Направление текста
Пример демонстрирует, как можно изменить направление текста:
<html>
<body>
<p>
Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
<bdo dir="rtl">
Это наш текст
</bdo>
</p>
</body>
</html>
Попробовать »Цитаты
В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.
В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:
<html>
<body>
<p>Длинная цитата:</p>
<blockquote>
Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
</blockquote>
<p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
<br><br>
Короткая цитата:
<q>Это короткая цитата.</q><br>
<b>Короткие цитаты заключаются в двойные кавычки.</b>
</p>
</body>
</html>
Попробовать »Удаленный и вставленный текст
Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):
<html>
<body>
<p>
Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а
содержимое тега ins - <ins>подчеркнутым</ins>
</p>
</body>
</html>
Попробовать »Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.
puzzleweb.ru