figure в HTML


Содержание
Илон Маск рекомендует:  chop - Псевдоним функции rtrim

HTML тег

Элемент (от англ. «figure» ‒ «фигура, рисунок») используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.

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

Илон Маск рекомендует:  6 новых вызова в HTML Academy

Примечание: Чтобы добавить подпись для элемента , используется тег .

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

Различия между HTML 4.01 и HTML5

Тег является новым в HTML5.

Илон Маск рекомендует:  Что такое код getwinflags

Пример использования:

Элемент

Используем элемент для разметки фотографии:

Теги figure и figcaption, демонстративный материал

В галерее селфи каждая маленькая картинка-превьюшка ссылается на отдельную страницу с «фотокарточкой». Эта фотокарточка содержит полноразмерное изображение и его описание. Она достаточно независима, и позже мы сможем вставить её на любую другую страницу блога. Как правильно размечать такие «карточки»?

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

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для разметки этого комментария предназначен ещё один тег — &ltfigcaption> , который размещается первым или последним элементом внутри . Например:

Давайте с помощью разметим фото в нашей галерее. Приступим.

По умолчанию у тега figure есть отступы, поэтому мы добавили стили для figure и figcaption , которые можно посмотреть во вкладке style.css .

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 20 января по 22 марта 2020. До 26 ноября цена 13 900 14 900

20 HTML & with CSS

Collection of free HTML and CSS & code examples (with little JS). Update of September 2020 collection. 2 new items.

Author

  • Kyle Foster
  • April 28, 2020

Made with

About the code

Realistic Polaroid Figures

Realistic polaroid figures in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Joshua Ward
  • January 17, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

A figure with a figcaption

A figure with a figcaption . and .date that all:hovers.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Tobias Glaus
  • July 23, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Figure & Figcaption

Image with caption using HTML figure and figcaption tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Booligoosh
  • June 25, 2020

Made with

About the code

Parallax image gallery using figure & figcaption tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • miazura
  • June 25, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Figure & Figcaption with CSS

figure & figcaption using CSS flexbox and some simple styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Yanely Ramirez
  • June 24, 2020

Made with

  • HTML / CSS (SCSS)

About the code

HTML Figure & Figcaption

Simple example of thumbnails using HTML figure & figcaption tags and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Piotr Galor
  • June 23, 2020

Made with

About the code

Playful CSS Figure & Figcaption

Pure CSS, no libs and stuff.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Brett Thurston
  • June 22, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Use Alt Tags in IMG Captions

Example of how to use alt to print to your img captions. Handy for SEO purposes. Credit to Josh Emrich for his Campy Creature Invader artwork. And JavaScript by CodeJoust on StackExchange.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • parph
  • June 22, 2020

Made with

  • HTML (Haml) / CSS (Sass)

About the code

HTML Figure & Figcaption

Minimalistic pure CSS carousel with HTML figure and figcaption .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Guillaume
  • June 22, 2020

Made with

About the code

Figure & Caption

Animated image thumbnail.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Stephen Lee
  • June 22, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Responsive Image Labels

Using figcaption to add multiple labels to an image. By changing a CSS variable with media queries, the labels can adjust to a wide variety of screen sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • ycw
  • June 20, 2020

Made with

  • HTML (Pug) / CSS / JavaScript

About the code

Interactive Inky

figcaption text segments as legends pointing out portion of figure content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Artem
  • June 20, 2020

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Figure & Figcaption with CSS Hover Effect

Image hover transition with CSS variables.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Isman Fromes
  • June 20, 2020

Made with

  • HTML (Pug) / CSS (Less) / JavaScript

About the code

Playful Figure/Figcaption

A try to a more playful figure/figcaption.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, TweenMax.js

Author

  • CГЎtia Campos
  • June 20, 2020

Made with

About the code

Picture Cards — Figure & Figcaption

Image cards (polaroid style) with description on the back. Hover over the images to see the effect. HTML & CSS.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

  • Ryan Mulligan
  • June 20, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Figure + Figcaption

My faux trip as told through figures and figcaptions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jon Wilcox
  • June 20, 2020

Made with

  • HTML / CSS (Less) / JavaScript

About the code

Interactive Pile O’ Polaroids

Toss the photos around or click for a larger version. Photos and captions (authors) are a random selection from «Lorem Picsum». «GreenSock Draggable» for the interaction.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, draggable.js, ThrowPropsPlugin.js, TweenLite.js, CSSPlugin.js

Author

  • Elise
  • June 19, 2020

Made with

About the code

Figure & Figcaption Tags

figure and figcaption . and a beautifull David Harris’s poem.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Alex Paul
  • June 18, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Lazy Loading Figure + Figcaption & Flipping Card

figure & figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

HTML тег

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

Содержимое тега относится к основному потоку веб-контента, однако воспринимается как автономная единица.

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

Синтаксис

Содержимое тега пишется между открывающим ( ) и закрывающим ( ) тегами.

в HTML

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

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

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

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

Элемент
6.0 9.0 4.0 5.0 11.1

Различия между HTML 4,01 и HTML5

Тег является новым в HTML5.

Советы и примечания

Совет: Элемент используется для добавления заголовка для элемента .

Элементы figure и figcaption

В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в HTML, вместо того чтобы прибегать к именам классов СSS. HTML5 надеется исправить эту проблему с помощью новых элементов: и . Давайте разберемся!

Элемент

Предполагается, что элемент будет использоваться в сочетании с элементом для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о в спецификации:

Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.

Элемент

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

и даже заголовки

. Семантика элемента изменилась, и поэтому мы начали использовать комбинацию и внутри по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Наши постоянные читатели знают, что недавно был представлен новый элемент . Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:

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

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

Использование и

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

для изображения

Изображение в элементе без подписи:

Вот код для этого:

с изображением и подписью

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

Наглая макака из Борнео. Фото Ричарда Кларка

И код, который мы использовали:

с несколькими изображениями

Размещение нескольких изображений внутри одного элемента с общей подписью:

Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка

с блоком кода

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

Ниже приведен код для этого:

Различия между и

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

, или даже , в зависимости от типа содержимого.

Не останавливайтесь на достигнутом!

Не стоит ограничивать использование изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе может быть аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.

Однако использование элемента не всегда целесообразно. Например, графический баннер не стоит размечать в . Используйте для этого просто .

Вывод

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

Перевод оригинальной статьи «The figure & figcaption elements» Ричарда Кларка (Richard Clark), опубликованной на сайте HTML5Doctor.com.

Перевод выполнила Екатерина Мордвина.

Комментарии +

  1. Anton Diaz 12 марта 2012 в 20:13

Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.

Определение ужасно расстраивает своей неотносимостью к тому, для чего его придумали. Возьмем хрестоматийный пример использования — иллюстрация к статье. Ну вот как она может быть удалена из документа без ущерба его смыслу, если это часть контента? Это не фоновые изображения кавычек в

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

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

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

Антон, я полностью согласен с тем, что описание этих элементов можно было сделать ещё точнее и прозрачнее. Но в качестве стартовой информации для понимания текст вполне хорош. Разница между блоком кода и блоком кода в состоит в том, что, первый является содержимым, т.е. предваряется фразой «ну вот как здесь…» а второй может быть упомянут в любом месте статьи, например «вот бывают и такие штуки, но мы сейчас не об этом». А подпись «вот бывают и такие штуки». Тонко, не всегда понятно — но явно заслуживает отдельной логической единицы, как по мне. Плюс сильно пересекается с типографской традицией, где в такие помещают цитаты (вот прям дубликаты) из текста, картинки и подобное содержимое, которое не нужно читать в потоке текста, а нужно рассматривать до, после или в перерывах между чтением.

Вадим, сходу я могу вспомнить только один конкретный (то есть реально увиденный в Вебе) пример, где тег с такой семантикой был бы уместен — блоки «Хозяйке на заметку» в Ководстве Лебедева.

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

Господа, предлагаю начать с того, чтобы обратиться к актуальным спецификациям;)
WHATWG:

Элемент figure представляет некое потоковое содержимое, с необязательным заголовком, являющееся самостоятельным (self-contained) и на которое, как правило, можно сослаться из основного потока документа как на единое целое.

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

Имхо, всё логично: если в статье одна иллюстрация и один пример кода, в ней может быть написано «см. рис.» и «см. код» — и никакой путаницы не будет, все поймут всё правильно, даже если рисунок и код будут без каких-либо подписей приведены в конце страницы. А если их несколько, то элементарная логика здравого смысла требует подписать их «fig. 1», «Рис. 2» и т.п. — и опять же, путаница будет минимальной, даже если пьяная секретарша переставить пару этих «fig-чего-то-там» местами. А что не так?

И в последней рабочей версии спецификации W3C вроде бы всё так же, как у WHATWG.

А «Хозяйке на заметку», по-моему, едва ли не ближе к aside (уровня статьи), чем к figure : на них ведь никто ниоткуда не ссылается, они просто именно что «касательно связаны» с основной темой, немножко «оживляя» чтение (этакая «музыкальная пауза»).

P.S. Прошу извинить за нелепую опечатку в первом комменте)

SelenIT, ну раз так, то это уже совсем другое дело :) В таком случае, figure — это именно то, что мне бы и хотелось, а сабжевая статья (вернее, ее перевод) уже устарела к моменту публикации.

И раз так, то «Хозяйке на заметку» — это действительно будет не figure, а вполне «полноправный» aside без всяких опасений:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

P.S. Спасибо, что внес ясность.

Кстати, по поводу последнего примера с кодом в blockquote подумалось: а не годится ли figure вообще для внешних цитат с подписью — саму blockquote внутрь, а подпись в figcaption (тем самым решив давнюю проблему, куда девать автора/источник цитаты — по смыслу они снаружи blockquote , но оформлять часто приходится как единое целое с ней)? Вроде, такая связка вполне себе «self-contained». Или это за гранью допустимого (и почему, если так)?

Вадим Макеев
А вы будите продолжать писать статьи о семантике?
Если да то когда планируете? А то уже давненько ничего не было.

Олег, будем продолжать, в самое ближайшее время.

Раз на мой поставленный ответ© чуть выше никто не отвечает, отвечу сам: цитата в figure с ее источником в figcaption — не только разрешенная, но даже рекомендуемая практика (хотя не всем она по душе). О как!

Хорошо, конечно, но , похоже, они уже сами не знают какие теги и для чего выпускают

Dnzl, честнее было бы написать «я ничего не понял», а не «они сами не знают».

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

Как было бы раньше:

Вариант с figure (появляется, казалось бы, лишний уровень разметки):

Насколько такой вариант оправдан и семантичен?

Я имел в виду следующее:
Насколько уместно использовать figure и figcaption в галереях, содержащих изображения с подписями?

Позвольте вынести на обсуждение ещё один интересный пример:

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

, а аутлайнеры полностью игнорируют эти заголовки.

Кто-нибудь знает причину такого поведения?

Вероятно, ответ на вторую часть вопроса — то, что относится к т.н. «sectioning roots» (w3c, whatwg), секции внутри которых не учитываются в «outline» предка. Косвенно это подтверждается тем, что заголовок в табличке тоже не учитывается аутлайнером.

А вот почему заголовок внутри вызывает предупреждение «пустой заголовок» — подозреваю, что это баг валидатора. Поскольку это не ошибка, и общий результат проверки — всё-таки «Valid», думаю, этим предупреждением можно пренебречь.

Спасибо! Про «section roots» я не подумал.

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

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

Нашел тему на форуме с похожим вопросом, где верно подмечено, что заголовок в по текущей логике аутлайнера будет считаться заголовком всей фигуры, а не только ее подписи. Но подтверждений формального запрета такого кода нет и там. На данный момент html5.validator.nu валидирует с заголовками без ошибок и предупреждений (хотя буквально час назад там наблюдалось то же самое предупреждение — парадокс:).

Подскажите можно стилизовать просто пустой ?
Вот такой код будет правильный?

figure будет стилизован в виде круга с надписью внутри.

в HTML

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

Синтаксис

Атрибуты

Закрывающий тег

Пример. Использование тега

Примечание

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

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Браузеры Firefox и Chrome автоматически добавляют к свойство margin со значением 1em 40px .

Спецификация ?

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

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

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
9 5 11.10 5.1 4
Android Firefox Mobile Opera Mobile Safari Mobile
2.2 4 11 5

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

HTML Tag

The HTML tag represents flow content that is self-contained and is typically referenced as a single unit from the main flow of the document.

The tag can be used for annotating illustrations, diagrams, photos, code listings, etc.

The HTML5 specification advises:

Self-contained in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

Syntax

The tag is written as with the caption inserted between the start and end tags.

You can use the element to provide a caption for the contents of a element.

If used, the tag is placed either as the first child or last child of its parent tag.

Examples

Basic tag usage

Here, the tag is used to markup a fragment of sample code. In this instance, the tag is placed as the first child of the element.

Images

You can also use the to markup images. But not just any image. If the image is self-contained, then it is suitable for use within the element. For example, the main image in an image gallery is an ideal candidate for the element. Charts or diagrams are also good candidates for use with the tag, as long as they’re part of the normal flow of the content.

It’s OK to place more than one image into a element, as long as the whole group is self-contained content.

Here’s an example of marking up an image with the tag:

Poetry/Lyrics

Poems and lyrics could also be marked up with the tag. Notice that the element is inside the element.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The tag is new in HTML5.

To see more detail on the two versions see HTML5 Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 Tag.

Tag Details

For more details about the tag, see HTML5 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Применение элемента details в HTML5

Тег details в HTML5 абсолютно новый тег. В настоящее время этот тег поддерживается только последними версиями браузера Google Chrome. Но думаю что со временем все браузеры начнут его поддерживать. Этот элемент дает возможность скрыть и показать информацию по требованию посетителя сайта. У этого элемента есть свой атрибут open , который дает возможность изменить значение тега details (по умолчанию содержимое тега). Синтаксис написания очень простой:

Давайте попробуем применить этот тег на практике:

В результате браузер сам добавит специальный значок, указывающий на то, что элемент можно развернуть:

Тег в HTML5

Этот элемент помогает группировать различные элементы друг с другом. Мне очень понравился этот элемент. Я думаю вы тоже будете его использовать на ваших сайтов. Например, можно красиво оформить рамку с изображением или видео файлом с подписью. Причем сама подпись должна быть оформлена с помощью тега figcaption. Рассмотрим небольшой пример, который поможет вам во всём разобраться:

В итоге должно получиться следующее:

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

Все права на сайт принадлежат Александру Побединскому.

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

Создаем геометрические фигуры с помощью CSS

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

Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3 . Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.

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

Что вам понадобится для использования данного руководства

  • Знание CSS3 ;
  • Время и внимание.

Скачать исходные файлы
Просмотреть демонстрацию

Окружность

HTML
Для создания окружности с помощью CSS , во-первых, мы будем использовать тег div . Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle :

CSS
Что касается CSS , просто задаем значения width и height , а затем задаем значение border radius , равное половине от width и height :

Квадрат

HTML
Чтобы создать квадрат в CSS , как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div :

CSS
Для создания квадрата в CSS , просто задаем значения width и height равные друг другу:

Прямоугольник

HTML
Чтобы создать прямоугольную форму, в CSS , как и в случае с квадратом, настраиваем div , где ID равно rectangle :

CSS
Так же, как и в случае с квадратом, мы зададим значения width и height , но на этот раз width будет больше, чем height :

HTML
Для создания овала в CSS , создаем div с ID равным oval :

CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :

Треугольник

HTML
И снова, для создания треугольника с помощью CSS , делаем div с ID равным triangle .

CSS
Для создания треугольника мы будем манипулировать свойством border . Изменяя ширину границы, вы получите различные углы поворота:

Треугольник, направленный вниз

HTML
Создаем перевернутый треугольник с помощью CSS . Снова создаем div . ID равно triangle_down :

CSS
Создавая перевернутый треугольник, оперируем толщиной границы:

Треугольник, направленный влево

HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :

CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

Треугольник, направленный вправо

HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :

CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

HTML
Для создания фигуры « ромб », создаем div с ID diamond :

CSS
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate , мы можем отобразить два треугольника, расположенных рядом друг с другом:

Трапеция

HTML
Для создания фигуры « трапеция », создаем div с ID равным trapezium .

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

Параллелограмм

HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :

CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:

Звезда

HTML
Для создания фигуры « звезда », создаем div с ID равным star :

CSS
Создание фигуры « звезда » — последовательность странных манипуляций с границами с использованием свойства transform равным rotate . Смотрите код ниже:

Звезда (6ти конечная)

HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :

CSS
Шестиконечная звезда создается с помощью свойства border . Создаем два набора фигур и комбинируем в одну:

Пятиугольник

HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :

CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:

Шестиугольник

HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :

CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:

Восьмиугольник

HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :

CSS
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:

Сердце

HTML
Для создания фигуры « сердце », создаем div с ID heart :

CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:

HTML
Для создания фигуры « яйцо », создаем div с ID egg :

CSS
Концепция фигуры « яйцо » похожа на концепцию фигуры « овал », за исключением свойства height , которое больше, чем width . И особое внимание в этой фигуре придается свойству radius . С помощью подбора его значений можно добиться нужного результата:

Бесконечность

HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:

CSS
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:

Бабл для комментария

HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :

CSS
Эта фигура может быть создана путем создания треугольника и задания свойства border radius , а затем присоединения прямоугольника к его левой стороне:

Pacman

HTML
Для создания фигуры « pacman », создаем div с ID pacman :

CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:

Заключение

Есть множество возможностей создания фигур с помощью CSS3 . Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый « костыль » в случае браузеров эпохи юрского периода, на подобии Internet Explorer .

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

Данная публикация представляет собой перевод статьи « Make Shapes with CSS: How to Create Different Shapes in CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL