Что это в html

Что такое HTML

Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Структура HTML-документа

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

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

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».

Комментарии заключаются между фрагментами и могут занимать несколько строк.

Общий вид HTML-документа:

   Заголовок HTML-документа (не отображается на экране) Тело HTML-документа (отображается на экране)

Первый тег – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

Информация в заголовке

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

подробнее об информации в контейнере .

Между парой тегов . хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера.

Атрибут class

Самый частый атрибут, который вы будете использовать. Задаёт класс элементу.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 23 марта 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

 . В Санкт-ПетербургеВетер, по Питерскому обыкновению, дул сразу со всех четырёх сторон. В России«Умом Россию не понять. » В миреНа Брайтон Бич опять идут дожди..  . h2>В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2>В Россииh2> p>«Умом Россию не понять. »p> h2>В миреh2> p>На Брайтон Бич опять идут дожди.p> .

�� Как при текущей разметке можно изменить цвет текста первого заголовка? Можно обернуть все заголовки в разные дополнительные теги. И использовать их комбинации в качестве селекторов для написания стилей. Но это решение будет неверным. Разметка распухнет, её сложно будет читать. Так делать не нужно.

Чтобы выделить какой-то отдельный элемент или набор элементов и применить стили выборочно можно использовать атрибут class .

 . В Санкт-ПетербургеВетер, по Питерскому обыкновению, дул сразу со всех четырёх сторон. В России«Умом Россию не понять. »





 В миреНа Брайтон Бич опять идут дожди..  . h2 class="news__local">В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2 class="news__country">В Россииh2> p>«Умом Россию не понять. »p> h2 class="news__world">В миреh2> p>На Брайтон Бич опять идут дожди.p> .

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

 .news__local  color: #ed6742;> .news__local  color: #ed6742; >

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

Как понять

Скопировать ссылку «Как понять» Скопировано

Имя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class . Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

   Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.  p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

При выборе имени класса следует придерживаться нескольких правил:

В именах классов используй только английские слова.

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   p class="osnovnoy-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

Имена классов пишутся маленькими буквами.

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   p class="Main-Text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

Для разделения двух слов используются тире ( — ) или знак подчёркивания ( _ ). Не используй camelCase ��

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   p class="mainText"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main__text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

Лучше не использовать больше трёх слов в имени класса.

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   p class="daily-news__main-alert-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="news__main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

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

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Экзистенциализм сложен.Художественное переживание последовательно.   Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Экзистенциализм сложен.Художественное переживание последовательно.  p class="text1"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="text-two">Экзистенциализм сложен.p> p class="text3">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>

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

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





Художественное переживание последовательно.  p class="p-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="difficult">Экзистенциализм сложен.p> p class="perezhivanie">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>

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

    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.    Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.   p class="green-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

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

В примере ниже main и text будут восприниматься браузером как два отдельных класса, а не один, состоящий из двух слов.

   Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.  p class="main text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>

Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� У элемента может быть несколько классов. Перечисляй классы, разделяя их пробелом.

 Экзистенциализм сложен. p class="sub-text news-text">Экзистенциализм сложен.p>

�� Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id . Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.

Причина в том, что идентификатор должен быть уникальным. В разметке может быть только один идентификатор с определённым именем. Это крайне неудобно для написания стилей, поскольку придётся многократно повторять одни и те же стили, но для разных идентификаторов. С классами эта проблема решается просто. Пропиши всем элементам, для которых нужно задать определённый внешний вид, один и тот же класс.

У многих начинающих разработчиков существует представление, что идентификаторы требуются для связи JavaScript и HTML, но это не так. В современном виде JavaScript предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!

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

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

Язык HTML: что это такое и как ему обучиться

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

История развития HTML

Предшественником HTML стал обобщённый метаязык SGML, стандарт по которому в ISO приняли в 1986 году. Его задачей было создание разметки текста, который распознавался бы на любом компьютере. Спустя 5 лет появился HTML – Тимо Бернерс Ли разработал его на основе SGML.

Основной функцией нового языка он видел обмен между пользователями научной и технической документацией в единственном тогда браузере Mosaic. Спустя 2 года появилась новая версия 1.2 – здесь было чуть больше 40 tags (непременных атрибутов, служебных слов).

2.0 был утвержден в 1995 году, но практически сразу же появилась следующая версия – 3.0. Сегодня в большинстве случаев используется пятая, хотя есть и шестая версия.

Что представляет собой HTML

Расшифровка HTML – HyperText Markup Language. HTML-код используется для разметки документов в интернете. Это стандартизированный язык гипертекстовой разметки, с помощью которого форматируют страницу. Основной «рабочий инструмент» – теги, служебные слова, которые заключают в угловые скобки. При встраивании в гипертекст (приставка hyper значит, что текст представлен в электронном виде) теги преобразуют его элементы.

HTML-теги и атрибуты, о которых вы, возможно, не знали

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

abbr

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title .

HTML был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.

abbr часто используется совместно с тегом dfn , идентифицирующим понятие или термин:

CSS - формальный язык описания внешнего вида документа (веб-страницы).

address

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

 Автор статьи: Иван Иванов 
Официальный сайт: Example.com 
Адрес: некоторое царство, некоторое государство

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

Для определения аудио-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type ).

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

В настоящее время поддерживается три формата аудио: MP3 , WAV и OGG .

autoplay — автовоспроизведение (блокируется большинством браузеров)
controls — панель управления (без этого атрибута элемент audio , скорее всего, не будет отображаться на странице)
loop — определяет, что воспроизведение, после завершения, начнется сначала
muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с аудио с помощью JavaScript
src — путь к аудиофайлу

 Ваш браузер не поддерживает элемент "audio".

video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Для определения видео-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type ).

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

В настоящее время поддерживается три формата видео: MP4 , WebM и OGG .

autoplay — автовоспроизведение (блокируется большинством браузеров)
controls — панель управления
loop — определяет, что воспроизведение, после завершения, начнется сначала
muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с видео с помощью JavaScript
src — путь к видеофайлу
poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
width — ширина элемента в пикселях
height — высота элемента в пикселях

 Ваш браузер не поддерживает элемент "видео".

DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video .

base

Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

href — основной путь
target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank , _parent , _self и _top

      Продукт 
 
   
   Контакты

blockquote и cite

Тег blockquote определяет раздел страницы, заимствованный из другого источника. Источник указывается в атрибуте cite .

 JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.

Для более глубокого изучения JavaScript советую взглянуть на "Вы не знаете JS" Кайла Симпсона.

code

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

HTML-тег `button` определяет кликабельную кнопку.





 CSS-свойство `background-color` определяет цвет фона элемента.

Для форматирования блока кода code часто используется совместно с тегом pre :

` const name = prompt('Как Вас зовут?') if (name?.trim()) alert(`Привет, $!`) else console.info('Пользователь пожелал остаться неизвестным') `

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.

Атрибут id тега datalist должен совпадать с атрибутом list тега input .

Выберите Ваш браузер из списка:

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

dl , dt и dd

Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt , определяющим понятие или термин, и dd , определяющим описание термина.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.

 Кофе
 Черный горячий напиток
 Молоко
 Белый холодный напиток

details

Тег details определяет раскрывающийся список с дополнительной информацией. Он часто используется для создания интерактивных виджетов, которые можно открывать и закрывать без использования JavaScript . В открытом состоянии он расширяется и показывает скрытый контент.

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Для отображения заголовка details используется тег summary .

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).

 Заголовок - видимая часть элемента "details"
 Скрытый контент - дополнительная информация

dialog

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

По умолчанию dialog находится в неактивном состоянии.

Индикатором активного состояния dialog является атрибут open .

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

Для управления объектом Dialog с помощью JavaScript используются такие методы как show() , close() и showModal() , а также свойство open .

figure

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

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

Для добавление подписи к figure используется тег figcaption .

  Рис. 1 - Процесс компиляции кода "движком" JavaScript V8.

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

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

Для обеспечения доступности совместно с meter рекомендуется использовать тег label .

value — текущее числовое значение между min и max
min — нижняя числовая граница диапазона
max — верхняя числовая граница диапазона
low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min , но меньше high и max
high — нижняя числовая граница верхнего предела диапазона
optimum — оптимальное числовое значение между min и max . Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low , значит, предпочтительным является нижний диапазон
form — определяет элемент form , с которым связан meter

Использование диска "D": 60%

Так можно записать уровень заряда батареи вашего устройства в значение meter :

// if ('getBattery' in navigator) < navigator.getBattery() .then((< level >) => < meter.value = level * 100 >) >

progress

Тег progress определяет процесс выполнения задачи.

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

Для обеспечения доступности совместно с progress рекомендуется использовать тег label .

max — максимальное значение. По умолчанию равняется 1
value — текущее значение

Процесс загрузки: 32%

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

// const timerId = setInterval(() => < progress.value += 1 if (progress.value === progress.max) < progress.remove() clearInterval(timerId) >>, 1000)

output

Тег output используется для представления результата вычислений.

for — определяет связь между результатом и элементами, используемыми для его выичсления
form — определяет элемент form , которому принадлежит output
name — название элемента output

picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент picture содержит два тега: один или более source и один img .

Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source .

Путь к изображению указывается в атрибуте srcset , а медиа-запрос — в атрибуте media .

\ \

template

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

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

Контент внутри template может быть отрендерен с помощью JavaScript .

((body, < content >) => < button.onclick = () => < body.append(content.cloneNode(true)) >>)(document.body, document.querySelector('template'))

time

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

Некоторые люди искренне верили в то, что в полночь 2000 года наступит конец света, но, как видите, свет продолжается. Возможно, он закончится в полночь 3000 года, но это не точно

noscript

Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript . Он может использоваться как в теге head , так и в теге body . В первом случае noscript может содержать только такие теги как link , style и meta .

Другие теги в форме шпаргалок

Семантическое «секционирование» страницы

Page Title

  Link1
  Link2

 
Aside Title
Aside Content
Atricle Title
Section Title
Section Content
Section2 Title
Section2 Content
Section3 Content

  Link3
  Link4

Block text & inline text

Стилизация текста

 Текст может быть полужирным, полужирным и "важным", "наклонным", наклонным и важным, маленьким, удаленным из документа, вставленным в документ, подчеркнутым неправильным. Он может представлять собой короткую цитату, ввод с клавиатуры, вывод программы. Текст может находиться ^{над строкой} и _{под ней}. Наконец, он может быть помеченным. Длинныйтекстможноразделятьвнужномместе. Его можно переносить
на новую строку и разделять
горизонтальной чертой.

Форма

Символ / означает или .

  Title Имя: Фамилия:

Поля для ввода данных

(значение по умолчанию)

accept — MIME-тип принимаемых файлов (только для type=»file» ). Значения: расширение, например, .png , audio/* , video/* , image/* , медиа тип, например, json
alt — подпись
autocomplete — on / off
autofocus
checked — только для type=»checkbox» или type=»radio»
disabled
form
formaction — только для type=»submit» или type=»image»
formenctype — только для type=»submit» или type=»image» . Значения: application/x-www-form-urlencoded , multipart/form-data , text/plain
formmethod — только для type=»submit» или type=»image» ( get / post )
formnovalidate — отключает проверку элементов формы
formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type=»submit» или type=»image» ). Значения: _blank , _self , _parent , _top , название фрейма
height — высота в пикселях (только для type=»image» )
list
max — максимальное значение (число или дата)
maxlength — максимальная длина строки (количество символов)
min — минимальное значение (число или дата)
minlength — минимальная длина строки (количество символов)
multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
name
pattern — регулярное выражение для проверки значения поля
placeholder
readonly
required
size — количество символов, определяющее ширину поля
src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type=»image» )
step — интервал (шаг) между min и max
type
value
width — ширина поля в пикселях (только для type=»image» )

Пример валидации адреса электронной почты и пароля:

 $" required /> " title="Пароль не может быть меньше 8 символов и должен содержать одну цифру, одну прописную (заглавную) букву и одну строчкую букву" required />

Таблица

  Table Title      Heading1  Heading2  
 
  1-1  1-2  
 2-1  2-2  
 
  3-1  3-2

Table Title
Heading1	Heading2
1-1	1-2
2-1	2-2
3-1	3-2

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

Послесловие

Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area , но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas , предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).

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

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!