Семантическая HTML-разметка для кнопки меню (html5)

Question

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

Мне нравится тег <menu> html5, но атрибут label мне не подходитпоскольку это означало бы, что текст будет отображаться только в том случае, если загружен фрагмент JS, который фактически размещает текст (хорошо, я мог бы использовать сгенерированный CSS контент, но это не работает в IE7 / 8).

Iдумал о конструкции <dl><dt>add</dt><dd>...</dd></dl>, но я не думаю, что она охватывает требуемую семантику.

У вас есть идеи?

Answer 1

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

Например:

<label for="elementName"><element name="elementName" attribute="" attribute="">Element Label</element></label>

Подобно тому, как можно было бы разметить радио-кнопки. Сначала я бы попробовал такой подход, однако на самом деле простой неупорядоченный список может быть именно тем, что вы ищете, а не списком определений, поскольку в списке определений вам нужно указать dt и dd для каждого элемента. *