Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Как повысить находимость сайта?

Шаблон документа

Версии HTML

Валидатор и стандарты W3C

Теги, элементы, артрибуты

Комментарии

Имена файлов HTML

Перспективы развития HTML и XHTML

 
Разработка сайтов под ключ

Ссылки по теме

CSS Blast галерея css-сайтов и проектов Web 2.0

XHTML, CSS, JavaScript, DOM. Советы, секреты, хитрости и тонкости

CSS, HTML в примерах и статьях

Учебники HTML и CSS

HTML справочник

Справочники HTML и CSS

Основные ошибки юзабилити

Для тех, кто делает сайты!

Справочник по CSS

CoffeeCup - HTML редактор

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

CSE HTML Validator Lite — редактор-анализатор (валидатор)

W3C - стандарты HTML

W3C - стандарты CSS

Справочная информация

Lynx Viewer

 

Перечни: UL, OL, DL

Главная « HTML - язык гипертекста « Перечни: UL, OL, DL

версия для печати

Списки - структурированные данные…

Элемент <ul> — это маркированный (неупорядоченный) перечень (список), a <ol> - нумерованный (упорядоченный).

Согласно правилам XHTML, каждый из эти элементов должен содержать в себе один или несколько элементов <li> - пунктов перечня.

Маркированные перечни (<ul>) используются тогда, когда порядок следования элементов не важен. Они позволяют представить информацию более наглядно, разбив ее на отдельные логические единицы.

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

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

Нумерованные перечни (<ol>) применяются тогда, когда важен порядок следования пунктов — например, для перечисления действий, которые должен совершить пользователь, или каких-нибудь объектов, которые он должен перебрать в определенной последовательности.

 
внимание!

ul — сокращение от «unordered list» («неупорядоченный перечень»).

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Маркированный список</title>

<style>
<!--
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #ffffff;  /* фоновый цвет */
}
-->
</style>
</head>

<body>

<ul>
  <li>раздел №1</li>
  <li>раздел №2</li>
  <li>раздел №3</li>
  <li>раздел №4</li>
</ul>

</body>
</html>

В окне браузера это выглядит, как на (рис. 1):

(рис. 1) Маркированный список (перечень).
 
внимание!

ol — сокращение от «ordered list» («упорядоченный перечень»).

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Нумерованный список</title>

<style>
<!--
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #ffffff;  /* фоновый цвет */
}
-->
</style>
</head>

<body>

<ol>
  <li>раздел №1</li>
  <li>раздел №2</li>
  <li>раздел №3</li>
  <li>раздел №4</li>
</ol>

</body>
</html>

В окне браузера это выглядит, как на (рис. 2):

(рис. 2) Нумерованный список (перечень).
 
внимание!

li —сокращение от «list item» («пункт перечня»).

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

Номера проставляются браузером автоматически, так что если вы вставите новый пункт <li> в середину существующего нумерованного перечня, нумерация «пересчитается» заново.

Менее распространен третий вид перечней — <dl>, перечень определений. Этот перечень вначале предназначался для словарных статей и других подобных текстов.

В элемент <dl> входят элементы <dt> (термин) и <dd> (определение), которые могут следовать друг за другом в любом порядке и в любых количествах.

 
внимание!

dl — сокращение от «definition list» («перечень определений»).

 
внимание!

dt — сокращение от «definition term» («определяемый термин»).

 
внимание!

dd — сокращение от «definition description» (в данном контексте — «определение термина»).

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Список определений</title>

<style>
<!--
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #ffffff;  /* фоновый цвет */
}
-->
</style>
</head>

<body>

<dl>
  <dt>раздел №1</dt>
     <dd>элемент №1</dd>
  <dt>раздел №2</dt>
     <dd>элемент №2</dd>
  <dt>раздел №3</dt>
     <dd>элемент №3</dd>
  <dt>раздел №4</dt>
</dl>

</body>
</html>

В окне браузера это выглядит, как на (рис. 3):

(рис. 3) Список (перечень) определений.
 

Еще одно применение перечня определений <dl> — титры и подобные им тексты. Элемент <dt> может содержать в себе только строчные элементы, а элемент <dd> также и блочные.

 
Запомнить эту страницу в google.com Запомнить эту страницу в bobrdobr.ru Запомнить эту страницу в news2.ru Запомнить эту страницу в Memori.ru Добавить в МоёМесто.ru сохранить на RUmarkz Добавить страницу к Мистеру Вонгу Запомнить эту страницу в del.icio.us Запомнить эту страницу в technorati.com Запомнить эту страницу в linkstore.ru Добавить на Ваау!
Valid XHTML 1.0! Valid CSS!
Как повысить находимость сайта?

Структурные элементы

Элемент TITLE

Заголовки: H1, H2, H3, H4, H5, H6

Элементы: P и PRE

Логические стили: EM и STRONG

Элемент IMG

Блочные цитаты BLOCKQUOTE

Таблицы

Гиперссылка: элемент A

 
Справочник XHTML 
 

Справочник по языку XHTML 1.0

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov