Реклама
Спонсорские ссылки
-
Статья
Версия для печати
Обсудить на форуме (4)
Заметки по оформлению статьи на сайте.


Автор: 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>

Надуманно, но красиво, но семантично. Спорно? Возможно.

Версия для печати
Обсудить на форуме (4)