Функции html – Функции | bookhtml.ru - Блог сумасшедшего сисадмина

Содержание

Функции, советы и методы HTML5

Время чтения: 3 мин.
Технология HTML5 развивается быстро — очень быстро! И для того чтобы не отставать в развитии, необходимо знать обо всех изменениях в данной технологии. Так что, если вы чувствуете что данная технология вам интересна и вы хотите повышать в ней свои навыки, обязательно прочтите данную статью.
Методы HTML5
1. Новая запись DOCTYPE
Раньше мы пользовались большой, громоздкой записью для определения DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 предоставляет нам возможность не писать все подробности, а объявить DOCTYPE следующим образом:
На самом деле данный блок не является необходимым в HTML. Тем не менее, он необходим для старых браузеров, которые требуют указывать DOCTYPE. Браузеры, которые не понимают HTML5 будут показывать страницу в стандартном режиме. Так что, не волнуйтесь, переходить на HTML5.
2. Изображения и подписи к ним
Рассмотрим следующую разметку для изображений:
<img src="images/love.png" alt="Прикольный смайл" /> <p>Прикольный смайл</p>
Раньше было тяжело сгрупировать изображение и подпись к нему.Там, к сожалению, нет легкого или семантического способа связать заголовок, завернутый в тег абзаца, с изображением самого элемента. HTML5 решает данную проблему, с введением <figure> элемента. В сочетании с <figcaption> элементом, теперь мы можем связать подписи с изображениями.

<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. <small> переопределен
Раньше тег <small> использовался для уменьшения текста, но был редко использован веб-разработчиками, но всё таки не был удален разработчиками HTML5. Теперь данный тег используют для обозначения «мелкого текста» — то есть текста, который не привлекает сильного внимания. Например, предупреждение о запрещении копирования материала, помещенное в самом низу сайта, наподобие следующего:

<small>Запрещено копировать материал с данного сайта! Данный материал защищен авторским правом.</small>
4. Отсутствие типов для тегов <script> и <link>
Раньше необходимо писать типы для тегов <script> и <link>, например:
<link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script>
В HTML5 больше нет необходимости писать данный атрибут:
<link rel="stylesheet" href="style.css" /> <script src="script.js"></script>

5. Закрывать или не закрывать теги
Вот в чем вопрос. Помните, что HTML5 это не XHTML. Здесь необязательно писать значения атрибутов в кавычках. Вам не нужно закрывать некоторые теги. Если вас устраивает данный стиль написания, то можете применять его. Лично для меня теги должны закрываться, а значения атрибутов должны находиться в кавычках.
<p class=content id=someText>Пример текста
Здесь важно лишь ваше мнение, и то как вам приятнее писать и видеть код. Если желаете более структурированный код, тогда пишите с закрывающими тегами.
6. Сделайте свой контент редактируемым
Новые браузеры имеют классный новый атрибут, который может быть применен к элементам, называется contenteditable. Как следует из названия, это позволяет пользователю редактировать любой текст, содержащийся в элементе, в том числе и потомках.
<ul contenteditable="true"> <li>Сделайте свой сайт.</li> <li>Создание сайтов - это легко!</li> <li>У вас всё получится</li> </ul>

7. Проверка поля E-mail
В HTML5 при использовании поля для ввода типа e-mail адреса, чтобы только с помощью браузера проверить корректность ввода адреса электронной почты. И это без всяких проверок с помощью javascript-ов. Но пока что мы не можем использовать данную функцию в наших сайтах по понятным причинам. Ведь в старых браузерах, которые не понимают HTML5, данные поля не будут проверяться.
<form action="" method="get"> <label for="email">E-mail:</label> <input name="email" type="email" /> <button type="submit">Отправить</button> </form>

8. Заполнители
Раньше нам необходимо было использовать JavaScript для создания заполнителей для текстовых полей. Конечно, можно установить значение по умолчанию и данное значение будет удалено, как только пользователь поставит курсор в данное поле. Заполнитель решает эту проблему иначе и как всегда более просто:
<input name="email" type="email" placeholder="[email protected]" />
9. Блоки HEADER и FOOTER
Ушли те времена:
<div> ... </div> <div> ... </div>
В HTML5 данные блоки с атрибутами могут быть заменены соответствующими тегами:
<header> ... </header> <footer> ... </footer>
Постарайтесь не смешивать эти элементы с «заголовком» и «подвалом» вашего сайта. Они просто являются просто контейнерами.
Здесь мы закончим рассматривать методы HTML5, думаю вы даже на этом маленьком примере функций HTML5 ощутили удобство пользования данной технологией, а также то, с какой скоростью она развивается.

Успехов!
sitehere.ru
теги — полный список, таблица тегов по разделам
пустые элементы — <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>,

Таблица-шпаргалка с тегами
Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
Рис. 1. Тематическая таблица тегов

<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option>.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.

<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

html5book.ru
Основы HTML для начинающих
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить

Для изучения урока, скачайте архив с необходимыми файлами.
HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.
Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;

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

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

Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.

Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:
<!doctype html> <html> <head> <title>Заголовок</title> <meta charset="UTF-8"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="script.js" type="text/javascript"></script> </head> <body> Тело документа </body> </html>
Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
<!doctype html> — тип документа (доктайп)
<!doctype html>
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
<html> — начало документа
<html>
Первый тег, который мы встречаем после доктайпа, это <html>.
HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.
Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head>
<head>
Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
<тег> содержание или другие теги </тег>
Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.
Тег <title> — заголовок документа
<title>Заголовок</title>
Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >
Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
<link rel="stylesheet" href="style.css">
Подключает к документу CSS файл со стилями оформления HTML.
CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.
Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Тег <script>
<script src="script.js" type="text/javascript"></script>
Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.
В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.
</head>
Закрываем тег <head> и шагаем дальше.
Тело aka body
<body>
Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.
Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Тег

Описание

<a>
Тег для создания ссылок в документе.
Пример:
<a href="http://webdesign-master.ru">текст ссылки</a>
Атрибут href указывает документ, на который будет вести данная ссылка.

<em>, <strong>
Делает текст курсивом или жирным (акцентируемым).
Пример:
<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h2>, <h3>, <h4>, <h5>, <h5>, <h6>
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа.
Примеры:
<h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> ... и т. д.

<ol>, <ul>
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>
Примеры:
<ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol>

<p>
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Пример:
<p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p>

<img>
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся».
Пример:
<img src="путь_до_картинки.jpg" alt="Текст">

<form> + <input> + <textarea>
Формы и элементы ввода.
Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер.
Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:
<form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form>

<span>
Определяет подстроку в строке.
Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
Пример:
Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков.

<video>, <audio>
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
Примеры:
<video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio>
Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.

<div>
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.
Пример:
<div> <div> Текст во вложенном блоке </div> </div>
Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.

<iframe>
Данный тег загружает внешнюю страницу в документ.
Пример:
<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
<video src="ролик чума.mp4" controls></video>
а:
<video src="rolik_chuma.mp4" controls></video>
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.
Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;

Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;

Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»
webdesign-master.ru
что это такое, когда появился и из чего состоит

HTML язык (HyperText Markup Language) – это стандартный язык разметки гипертекста в Интернете. Его основное предназначение – создавать интернет-страницы и обеспечивать нормальное расположение в документе списков, заголовков, таблиц, картинок и прочих материалов. Гипертекст в данном случае – это текст, связанный указателями-ссылками с другими текстами.
Если говорить понятнее, то HTML – это простой набор кодов для описания структуры документа. А браузеры разъясняют язык HTML и отображают на экране монитора компьютера или других устройств уже понятный пользователю форматированный текст с картинками, таблицами, заголовками, списками и т.д.
Как и когда появился HTML язык?
HTML был придуман в 86-м году прошлого века. Инициатором стал ученый из Великобритании Тимон Бернерс-Ли, работающий в Европейской организации по ядерным исследованиям в Женеве.

Тогда он предложил HTML в качестве языка для передачи технических и научных данных между Институтами. Это поспособствовало тому, что все научные документы легко читались и выглядели одинаково хорошо на всех устройствах.
Изначально HTML использовался исключительно в научных учреждениях, но вскоре такая идея понравилась людям настолько, что распространилась далеко за их пределы, и сегодня этот язык является основой Интернета. Кроме упрощения структуры документа, HTML начал поддерживать гипертекст.
Современные функции языка HTML сильно отличаются от тех задач, которые он выполнял много лет назад. Создавался он с целью структурирования и форматирования документов, при этом элементы отображения не применялись. HTML текст можно было посмотреть на любой технике: цветном мониторе компьютера, небольшом экране мобильника, органайзере с монохромным экраном или программе чтения текста голосом. Он воспроизводился на них без каких-либо помарок.
Но со временем потребности возрастали, что привело к появлению картинок, звука, диаграмм и прочих элементов. В связи с этим выходили новые версии HTML, последней из которых является HTML 5. Современная версия позволяет создавать уже не только сайты, но и web-приложения.
Из каких компонентов состоит HTML?
HTML язык содержит несколько основных компонентов, которые выполняют определенные функции:
Тег (дескриптор). HTML полностью состоит из дескрипторов. Они посылают команды веб-браузеру, выполняющему конкретные функции. К примеру, вставляет картинки или создает списки.
Атрибут (аргумент). Предназначен для внесения изменений в теге. То есть, он может выровнять по краю или центру абзац/картинку внутри самого тега.
Значение. Определяет изменения от атрибутов. Например, при выравнивании текста или изображения, для атрибута можно задать различные значения: текстовые (left либо right), или числовые (размеры картинки по ширине и высоте).
Какая структура HTML документа?
Посетив в браузере любую web-страницу, вы можете посмотреть, как она выглядит в кодовом формате, нажав правой кнопкой мыши на странице и выбрав раздел «Посмотреть код».

Пример части структуры страницы на которой вы находитесь
Можно заметить, что в начале любого документа в формате HTML есть строка , обозначающая версию HTML и порядок написания и применения тегов. В устаревших версиях HTML было изобилие самых разных вариаций тега DOCTYPE, но в новой версии существует только один – !DOCTYPE.
За ним следует непосредственно документ страницы, имеющий начало и конец, которые обозначаются открывающимся (<html>) и закрывающимся (</html>) тегами соответственно. По сути, этот парный тег является контейнером, где находится все содержимое web-страницы – весь полезный конт
webmasterie.ru
Теги html по функциям // Вебшкола онлайн
DTD: описывает в какой версии HTML 4.01 / XHTML 1.0 DTD можно применять эти теги. S=Strict (строгий), T=Transitional (переходный), F=Frameset.
Тег Описание DTD
Основные
<!DOCTYPE> Указывает тип документа STF
<html> Указывает на то, что это html-документ STF
<body> Указывает «тело» документа STF
<h2> to <h6> Определяет html-заголовки разного размера STF
<p> Вставка параграфа STF
<br /> Переход на новую строку STF
<hr /> Вставка горизонтальной линии STF
<!—…—> Вставка комментария STF
Форматирование
<acronym> Вставка акронима STF
<abbr> Вставка аббревиатуры STF
<address> Вставка контактной информации автора/владельца документа STF
<b> Полужирный текст STF
<bdo> Указывает направление написания текста STF
<big> Увеличенный размер шрифта STF
<blockquote> Длинная цитата STF
<center> Устарел. Выравнивание текста по центру TF
<cite> Вставка цитаты STF
<code> Указывает на текст компьютерного кода STF
<del> Определяет удаленный текст STF
<dfn> Определяет новый термин в документе STF
<em> Определяет акцентированный текст STF
<font> Устарел. Определяет цвет и размер шрифта, а также сам шрифт для текста TF
<i> Определяет текст, написанный курсивом STF
<ins> Определяет вставленный текст STF
<kbd> Определяет текст, вводимый с клавиатуры STF
<pre> Вставка предварительно отформатированного текста STF
<q> Вставка короткой цитаты STF
<s> Устарел. Определяет перечеркнутый текст TF
<samp> Определяет типовой машинный код STF
<small> Определяет уменьшенный шрифт STF
<strike> Устарел. Определяет перечеркнутый текст TF
<strong> Определяет жирный текст STF
<sub> Определяет текст, который ниже уровня основного текста STF
<sup> Определяет текст, который выше уровня основного текста STF
<tt> Вставка телетайпного текста STF
<u> Устарел. Определяет подчеркнутый текст TF
<var> Используется для отображения переменных в программном коде STF
<xmp> Устарел. Определяет предварителььно отформатированный текст
Формы
<form> Вставка формы для ввода пользовательской информации STF
<input /> Определяет форму ввода информации пользователем STF
<textarea> Определяет многострочную область ввода информации пользователем STF
<button> Вставка кнопки STF
<select> Определяет выбираемый список (выпадающий список) STF
<optgroup> Определяет группу связаннных вариантов (опций) элементов в выбранном списке STF
<option> Определяет вариант (опцию) в выбранном списке STF
<label> Определяет метку для вставленного элемента STF
<fieldset> Определяет рамку вокруг элемента в форме STF
<legend> Определяет название элемента fieldset STF
<isindex> Устарел. Определяет поисковый индекс, связанный с документом TF
Фреймы
<frame /> Определяет окно (фрейм) в элементе frameset F
<frameset> Определяет группу фреймов F
<noframes> Определяет альтернативное содержимое для браузеров (пользователей), которые не поддерживают фреймы TF
<iframe> Вставка строчного фрейма TF
Изображения
<img /> Вставка изображения STF
<map> Вставка карты-изображения STF
<area /> Указывает участок в карте-изображении STF
Ссылки
<a> Вставка якоря STF
<link /> Определяет связь между документом и внешним ресурсом STF
Списки
<ul> Определяет неупорядоченный список STF
<ol> Определяет упорядоченный список STF
<li> Определяет пункт списка STF
<dir> Устарел. Определяет список TF
<dl> Определяет список определений STF
<dt> Определение слова (пункта) в списке определений STF
<dd> Определяет описание термина в списке определений STF
<menu> Устарел. Определяет список меню TF
Таблицы
<table> Вставка таблица STF
<caption> Название таблицы STF
<th> Определяет заголовки в таблице STF
<tr> Определяет строку в таблице STF
<td> Определяет ячейку таблицы STF
<thead> Группировка заголовков в таблице STF
<tbody> Группировка содержимого таблицы STF
<tfoot> Группировка нижних элементов таблицы STF
<col /> Указывает на значения атрибутов для одной или нескольких колонок таблицы STF
<colgroup> Определяет группу колонок в таблице для форматирования STF
Стили
<style> Определяет информацию о стиле документа STF
<div> Определяет блок (секцию) в документе STF
<span> Определяет участок документа STF
Мета информация
<head> Определяет информацию о документе STF
<title> Определяет название документа STF
<meta /> Определяет метаданные html-документа STF
<base /> Указывает адрес по умолчанию или окно по умолчанию для всех ссылок на странице STF
<basefont /> Устарел. Определяет цвет и размер шрифта, а также сам шрифт по умолчанию для текста на странице TF
Программирование
<script> Определяет скрипт, выполняемый на стороне пользователя STF
<noscript> Определяет альтернативное содержимое для браузеров (пользователей), которые не поддерживают скрипты на стороне пользователя STF
<applet> Устарел. Вставка выполняемого содержимого (applet — апплет) TF
<object> Определяет вставленный объект STF
<param /> Определяет параметры объекта STF
weblabla.ru
Семантические элементы HTML5
Опубликовано: 26 октября 2014 Обновлено: 30 апреля 2019
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
Мета содержимое
Потоковое содержимое
Секционное содержимое
Заголовочное содержимое
Текстовое содержимое
Встроенное содержимое
Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <header>
Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
<header> <h2>Site description</h2> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>
Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
2. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
<nav> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>
В качестве элементов панели навигации можно использовать не только элементы списков:
<nav> <p><a href="">...</a></p> <p><a href="">...</a></p> </nav>
Также можно добавлять заголовки внутрь элемента:
<nav> <h3>...</h3> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>
3. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <header> <h3>...</h3> </header> <p>...</p> <footer> Опубликовано в категории<a href="">Музыка</a>. <a href="">0 комментариев</a> </footer> </article>
4. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article>
<article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section> <h2>Заметки о природе</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section> <section> <h2>Исторические заметки</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section>
5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside> <h3>...</h3> <p>...</p> </aside>
<aside> <h3>...</h3> <p>...</p> <blockquote> <p>...<cite>...</cite>...</p> <p>...</p> </blockquote> </aside>
6. Элемент <footer>
Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
<footer> <address>...</address> <small>@2014...</small> </footer>
7. Элемент <address>
Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
<body> <header> <h2>Пудель</h2> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О породе</a></li> <li><a href="health.html">Здоровье</a></li> </ul> </nav> </header> <main> <section> <header> <h3>О породе</h3> <nav> <ul> <li><a href="#basic">Разновидности</a></li> <li><a href="#app">Внешний вид</a></li> <li><a href="#temp">Характер</a></li> </ul> </nav> </header> <section> <h4>Разновидности</h4> <p>...</p> </section> <section> <h4>Внешний вид</h4> <p>...</p> </section> <section> <h4>Характер</h4> <p>...</p> </section> <footer> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>
9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
<figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure>
Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;
10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
11. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time>
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>
12. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
html5book.ru
Что такое HTML. Учебник по HTML.
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.
Структура HTML-документа
M в аббревиатуре HTML означает «mark up» – размечать.
Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».
Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.
Отмечают же его для того, чтобы браузер показывал текст на экране в заданном тегами виде.
Закрывающий тег отличается от открывающего наличием косой черты «/».
Некоторые теги имеют атрибуты, которые уточняют правило отображения содержимого. Атрибуты могут указываться только в открывающем теге.
Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».
Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.
Общий вид HTML-документа:
<!DOCTYPE html> <html> <head> Заголовок HTML-документа (не отображается на экране) </head> <body> Тело HTML-документа (отображается на экране)  </body> </html>
<!DOCTYPE html>
Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.
подробнее о !DOCTYPE…
Информация в заголовке <head>
Контейнер <head> содержит информацию для браузеров и поисковых систем.
подробнее об информации в контейнере <head>…
Содержание контейнера <body>
Между парой тегов <body>…</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера.
Это может быть простой текст, списки, ссылки, изображения, таблицы и др.
обучение программированию
индивидуальные курсы
в Ростове-на-Дону
Читать дальше: <!DOCTYPE>
htmlweb.ru
No related posts.

`<meta>`	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке `<head>` может быть несколько тегов `<meta>`, так как в зависимости от используемых атрибутов они несут разную информацию.
`<meter>`	Индикатор измерения в заданном диапазоне.
`<nav>`	Раздел документа, содержащий навигационные ссылки по сайту.
`<noscript>`	Определяет секцию, не поддерживающую сценарий (скрипт).
`<object>`	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег `<param>`.
`<ol>`	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
`<optgroup>`	Контейнер с заголовком для группы элементов `<option>`.
`<option>`	Определяет вариант/опцию для выбора в раскрывающемся списке `<select>`, `<optgroup>` или `<datalist>`.
`<output>`	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
`<p>`	Параграфы в тексте.
`<param>`	Определяет параметры для плагинов, встраиваемых с помощью элемента `<object>`.
`<picture>`	Элемент-контейнер, содержащий один элемент `<img>` и ноль или несколько элементов `<source>`. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
`<pre>`	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
`<progress>`	Индикатор выполнения задачи любого рода.
`<q>`	Определяет краткую цитату.
`<ruby>`	Контейнер для Восточно-Азиатских символов и их расшифровки.
`<rb>`	Определяет вложенный в него текст как базовый компонент аннотации.
`<rt>`	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе `<ruby>`, выводится уменьшенным шрифтом.
`<rtc>`	Отмечает вложенный в него текст как дополнительную аннотацию.
`<rp>`	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
`<s>`	Отображает текст, не являющийся актуальным, перечеркнутым.
`<samp>`	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
`<script>`	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута `src`.
`<section>`	Определяет логическую область (раздел) страницы, обычно с заголовком.
`<select>`	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в `<option>`.
`<small>`	Отображает текст шрифтом меньшего размера.
`<source>`	Указывает местоположение и тип альтернативных медиаресурсов для элементов `<picture>`, `<video>`, `<audio>`.
`<span>`	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
`<strong>`	Расставляет акценты в тексте, выделяя полужирным.
`<style>`	Подключает встраиваемые таблицы стилей.
`<sub>`	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
`<summary>`	Создаёт видимый заголовок для тега `<details>`. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
`<sup>`	Задает надстрочное написание символов.
`<table>`	Тег для создания таблицы.
`<tbody>`	Определяет тело таблицы.
`<td>`	Создает ячейку таблицы.
`<template>`	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
`<textarea>`	Создает большие поля для ввода текста.
`<tfoot>`	Определяет нижний колонтитул таблицы.
`<th>`	Создает заголовок ячейки таблицы.
`<thead>`	Определяет заголовок таблицы.
`<time>`	Определяет дату/время.
`<title>`	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
`<tr>`	Создает строку таблицы.
`<track>`	Добавляет субтитры для элементов `<audio>` и `<video>`.
`<u>`	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
`<ul>`	Создает маркированный список.
`<var>`	Выделяет переменные из программ, отображая их курсивом.
`<video>`	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
`<wbr>`	Указывает браузеру возможное место разрыва длинной строки.

Тег	Описание
<a>	Тег для создания ссылок в документе. Пример: <a href="http://webdesign-master.ru">текст ссылки</a> Атрибут href указывает документ, на который будет вести данная ссылка.
<em>, <strong>	Делает текст курсивом или жирным (акцентируемым). Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong>
<h2>, <h3>, <h4>, <h5>, <h5>, <h6>	Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа. Примеры: <h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> ... и т. д.
<ol>, <ul>	Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li> Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol>
<p>	Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p>
<img>	Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся». Пример: <img src="путь_до_картинки.jpg" alt="Текст">
<form> + <input> + <textarea>	Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер. Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form>
<span>	Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков.
<video>, <audio>	Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio> Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
<div>	Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>. Пример: <div> <div> Текст во вложенном блоке </div> </div> Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.
<iframe>	Данный тег загружает внешнюю страницу в документ. Пример: <iframe src="http://rtfm.org.ru"></iframe>

Тег	Описание	DTD
Основные
<!DOCTYPE>	Указывает тип документа	STF
<html>	Указывает на то, что это html-документ	STF
<body>	Указывает «тело» документа	STF
<h2> to <h6>	Определяет html-заголовки разного размера	STF
<p>	Вставка параграфа	STF
<br />	Переход на новую строку	STF
<hr />	Вставка горизонтальной линии	STF
<!—…—>	Вставка комментария	STF
Форматирование
<acronym>	Вставка акронима	STF
<abbr>	Вставка аббревиатуры	STF
<address>	Вставка контактной информации автора/владельца документа	STF
<b>	Полужирный текст	STF
<bdo>	Указывает направление написания текста	STF
<big>	Увеличенный размер шрифта	STF
<blockquote>	Длинная цитата	STF
<center>	Устарел. Выравнивание текста по центру	TF
<cite>	Вставка цитаты	STF
<code>	Указывает на текст компьютерного кода	STF
<del>	Определяет удаленный текст	STF
<dfn>	Определяет новый термин в документе	STF
<em>	Определяет акцентированный текст	STF
<font>	Устарел. Определяет цвет и размер шрифта, а также сам шрифт для текста	TF
<i>	Определяет текст, написанный курсивом	STF
<ins>	Определяет вставленный текст	STF
<kbd>	Определяет текст, вводимый с клавиатуры	STF
<pre>	Вставка предварительно отформатированного текста	STF
<q>	Вставка короткой цитаты	STF
<s>	Устарел. Определяет перечеркнутый текст	TF
<samp>	Определяет типовой машинный код	STF
<small>	Определяет уменьшенный шрифт	STF
<strike>	Устарел. Определяет перечеркнутый текст	TF
<strong>	Определяет жирный текст	STF
<sub>	Определяет текст, который ниже уровня основного текста	STF
<sup>	Определяет текст, который выше уровня основного текста	STF
<tt>	Вставка телетайпного текста	STF
<u>	Устарел. Определяет подчеркнутый текст	TF
<var>	Используется для отображения переменных в программном коде	STF
<xmp>	Устарел. Определяет предварителььно отформатированный текст
Формы
<form>	Вставка формы для ввода пользовательской информации	STF
<input />	Определяет форму ввода информации пользователем	STF
<textarea>	Определяет многострочную область ввода информации пользователем	STF
<button>	Вставка кнопки	STF
<select>	Определяет выбираемый список (выпадающий список)	STF
<optgroup>	Определяет группу связаннных вариантов (опций) элементов в выбранном списке	STF
<option>	Определяет вариант (опцию) в выбранном списке	STF
<label>	Определяет метку для вставленного элемента	STF
<fieldset>	Определяет рамку вокруг элемента в форме	STF
<legend>	Определяет название элемента fieldset	STF
<isindex>	Устарел. Определяет поисковый индекс, связанный с документом	TF
Фреймы
<frame />	Определяет окно (фрейм) в элементе frameset	F
<frameset>	Определяет группу фреймов	F
<noframes>	Определяет альтернативное содержимое для браузеров (пользователей), которые не поддерживают фреймы	TF
<iframe>	Вставка строчного фрейма	TF
Изображения
<img />	Вставка изображения	STF
<map>	Вставка карты-изображения	STF
<area />	Указывает участок в карте-изображении	STF
Ссылки
<a>	Вставка якоря	STF
<link />	Определяет связь между документом и внешним ресурсом	STF
Списки
<ul>	Определяет неупорядоченный список	STF
<ol>	Определяет упорядоченный список	STF
<li>	Определяет пункт списка	STF
<dir>	Устарел. Определяет список	TF
<dl>	Определяет список определений	STF
<dt>	Определение слова (пункта) в списке определений	STF
<dd>	Определяет описание термина в списке определений	STF
<menu>	Устарел. Определяет список меню	TF
Таблицы
<table>	Вставка таблица	STF
<caption>	Название таблицы	STF
<th>	Определяет заголовки в таблице	STF
<tr>	Определяет строку в таблице	STF
<td>	Определяет ячейку таблицы	STF
<thead>	Группировка заголовков в таблице	STF
<tbody>	Группировка содержимого таблицы	STF
<tfoot>	Группировка нижних элементов таблицы	STF
<col />	Указывает на значения атрибутов для одной или нескольких колонок таблицы	STF
<colgroup>	Определяет группу колонок в таблице для форматирования	STF
Стили
<style>	Определяет информацию о стиле документа	STF
<div>	Определяет блок (секцию) в документе	STF
<span>	Определяет участок документа	STF
Мета информация
<head>	Определяет информацию о документе	STF
<title>	Определяет название документа	STF
<meta />	Определяет метаданные html-документа	STF
<base />	Указывает адрес по умолчанию или окно по умолчанию для всех ссылок на странице	STF
<basefont />	Устарел. Определяет цвет и размер шрифта, а также сам шрифт по умолчанию для текста на странице	TF
Программирование
<script>	Определяет скрипт, выполняемый на стороне пользователя	STF
<noscript>	Определяет альтернативное содержимое для браузеров (пользователей), которые не поддерживают скрипты на стороне пользователя	STF
<applet>	Устарел. Вставка выполняемого содержимого (applet — апплет)	TF
<object>	Определяет вставленный объект	STF
<param />	Определяет параметры объекта	STF

Функции html – Функции | bookhtml.ru

Функции, советы и методы HTML5

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