Семантически правильная разметка XHTML

Question

Просто пытаюсь освоить семантически правильную разметку XHTML.

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

<dl>
    <dt>Import images</dt>
    <dd>Read in new image names to database</dd>

    <dt>Exhibition Management</dt>
    <dd>Create / Delete an exhibition </dd>

    <dt>Image Management</dt>
    <dd>Edit name, medium and exhibition data  </dd>
</dl>

Но ... Я хочу, чтобы выше было 3 кнопки, каждая из которых содержит текст dt и dd.Как я могу сделать это с правильным кодом?Обычно я делаю каждую кнопку делителем и использую ее для визуального поведения кнопки (onHover и текущий материал для выбора страницы).

Любой совет, пожалуйста

Спасибо

Answer 1

<ul>
    <li><a href="#" title="Read in new image names to database">Import images</a></li>
    <li><a href="#" title="Create / Delete an exhibition">Exhibition Management</a></li>
    <li><a href="#" title="Edit name, medium and exhibition data">Image Management</a></li>
</ul>

это достаточно хорошо.использование <dl> для навигации не очень умно.или используйте <span> внутри <li> с описанием.<dd> доставит вам много головной боли, поскольку они не находятся внутри <dt> и не заботятся о его положении и стиле

Answer 2

Меня слегка смущает использование вашего термина "кнопка". Если вы имеете в виду ссылку, то вы можете сделать:

<a href="dest.html" title="Read in new image names to database">Import images</a>

Если, однако, вы имеете в виду тег input, то один из способов сделать это - использовать input type = image, а затем предоставить альтернативное описание.

Например:

<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>

Answer 3

Вы можете использовать элементы <label> вместо элементов <dt>:

<ul>
    <li>
        <a href="#">
            <label for="import-images">Import images</label>
            <span id="import-images">Read in new image names to database</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="exhibition-management">Exhibition Management</label>
            <span id="exhibition-management">Create / Delete an exhibition</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="image-management">Image Management</label>
            <span id="image-management">Edit name, medium and exhibition data</span>
        </a>
    </li>
</ul>

... атрибут for элемента <label> должен соответствовать только id другого элементав документе, чтобы быть действительным.