Автор:
SlaНаписано: 2.09.2010
В
предыдущей статье я кратко задел вопрос об оформлении текста тегами. Напомню. HTML — язык
разметки текста.
Опубликованный текст на сайте читают, в первую очередь, люди. Ты делаешь сайт для людей. Задача твоего сайта — дать, как можно доступней, информацию о своем предприятии, о продукции твоего предприятия, об услугах, которые предоставляет твоя организация.
А теперь о разметке.
Проще показать на том, что тебе близко. Как ты показываешь (отображаешь) технические характеристики своей продукции? Таблицей (конечно, есть другие способы)!
Как рисуется таблица, тебе известно:
<table>
<tr>
<td>1</td>
<td>Содержание столбца</td>
<td>Характеристика</td>
</tr>
<tr>
<td>2</td>
...
...
</tr>
...
...
</table>
Вот как это будет выглядеть приблизительно:
| 1 | Содержание столбца | Характеристика |
| 2 | Содержание столбца2 | Характеристика2 |
Красиво? Понятно? Вроде как, наглядно, но чего-то не хватает. Не хватает заголовка!
<table>
<tr>
<td>№ п/п</td>
<td>Название</td>
<td>Параметры</td>
</tr>
<tr>
<td>1</td>
<td>Содержание столбца</td>
<td>Характеристика</td>
</tr>
<tr>
<td>2</td>
...
...
</tr>
...
...
</table>
| № п/п | Название | Параметры |
| 1 | Содержание столбца | Характеристика |
| 2 | Содержание столбца2 | Характеристика2 |
А теперь расскажи — чем первая строка отличается от второй? Содержанием? И все? Я утверждаю — ничем. Я безболезненно могу переставить эти строки, их семантическая наполненность не изменится.
Есть замечательный тег TH — заголовок столбца таблицы.
А теперь..?
<table>
<tr>
<th>№ п/п</th>
<th>Название</th>
<th>Параметры</th>
</tr>
<tr>
<td>1</td>
<td>Содержание столбца</td>
<td>Характеристика</td>
</tr>
<tr>
<td>2</td>
...
...
</tr>
...
...
</table>
| № п/п | Название | Параметры |
| 1 | Содержание столбца | Характеристика |
| 2 | Содержание столбца2 | Характеристика2 |
Визуально выделено, семантически выделено. Теперь первую и вторую строки поменять нельзя.
H1...H6 — так часто пишут для сокращения. Это заголовки разного уровня.
<h1>Название</h1>
<h2>Введение</h2>
<p> текст текст</p>
<h2>Техническое задание</h2>
<p> текст текст</p>
<img src="" alt="текст, поясняющий картинку" />
<h2>Расчетная часть</h2>
<h3>Методика расчета</h3>
<h3>Результаты расчета</h3>
<h2>Выводы</h2>
Как тебе? Понятно? Надеюсь, что пояснения к этой схеме не нужно.
Вот смотри:
<p>Мы умеем:</p>
<ul>
<li>складывать</li>
<li>умножать</li>
<li>вычитать</li>
</ul>
Это список, перечень — называй как хочешь. Это был ненумерованный список.
Надо пронумеровать?
<p>Мы умеем:</p>
<ol>
<li>складывать</li>
<li>умножать</li>
<li>вычитать</li>
</ol>
Не ставь сам цифры (числа), а вдруг удалишь строку, и что, будешь перебивать руками?
А давай-ка сделаем красивыми заголовки с помощью списков. Сразу скажу: надуманный пример, но имеющий право на жизнь.
<h1>Название</h1>
<ol>
<li>
<h2>Введение</h2>
<p> текст текст</p>
</li>
<li>
<h2>Техническое задание</h2>
<p> текст текст</p>
<img src="" alt="текст, поясняющий картинку" />
</li>
<li>
<h2>Расчетная часть</h2>
<ol>
<li>
<h3>Методика расчета</h3>
</li>
<li>
<h3>Результаты расчета</h3>
</li>
</ol>
</li>
<li>
<h2>Выводы</h2>
</li>
</ol>
Надуманно, но красиво, но семантично. Спорно? Возможно.