5 моих предпочтений при HTML кодировании

Каждый кодер имеет свой стиль кодирования, который основан на его личных предпочтениях и делает разметку документа по-своему. Некоторые выбирают один элемент, другие находят иное решение. В этой статье я перечислю 5 моих предпочтений при HTML кодировании и поясню их выбор.

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

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

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

Параграф против «хлебных крошек».

Данный вопрос открыт для обсуждения, если у вас по нему иное мнение, дайте нам знать в своих комментариях. Лично я предпочитаю использовать следующий кодовый образец для следа из "хлебных крошек".

HTML

<p id="breadcrumbs"><a href="#">Home</a> » <a href="#">About Us</a> » <a href="#">History</a></p>

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

Кнопка против ввода

Я уже не могу вспомнить, когда использовал <input type="submit"> в последний раз. Я перестал пользоваться этим элементом давным-давно. Пара причин, по которым элемент кнопка (button) превосходит тип ввода (input type="submit"): кнопка – свой собственный элемент, благодаря чему его легко отличить в исходном коде, легче выбрать с помощью CSS (не во всех браузерах есть поддержка атрибутов селекторов). Также кнопка позволяет поместить в нее другие элементы и, как следствие, расширяет дизайнерские возможности.

HTML

<button type="submit">Submit Form</button>

Упорядоченный список против неупорядоченного в комментариях

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

HTML

<ol class="comments">
    <li> 
    <ul class="meta">
    <li><img src="path-to-gravatar.gif" alt="Author's name" /></li>
    <li><a href="/url-to-authors-homepage.html">Author's name</a></li> 
    <li>posted on date-goes-here</li>
    </ul> 
    <div class="body">Comment text goes here...</div>
    </li>
</ol>

Div против любого другого элемента для label / input field

Какой элемент лучше всего использовать в качестве родителя для input field (поля ввода) и связанной с ним label (метки).

HTML

<label for="contactName">Your Name</label>
<input type="text" name="contactName" id="contactName" class="field"  />

Недавно на сайте была жаркая дискуссия насчет подходящей разметки. Спустя какое-то время я решил остановиться на DIVs:

HTML

<div> 
<label for="contactName">Your Name</label> 
<input type="text" name="contactName" id="contactName" class="field"  />
</div>

Метка и связанная с ней форма могут быть описаны в виде секции. Div элемент обладает очень широким семантическим качеством и актуален в любой ситуации.