WEB-нотатки - записник он-лайн

Оптимальне використання DIV

Чому надто багато дивів - це погано?

Цьому є кілька причин:

1. Таке використання дивів частково анулює одну з ключових причин переходу на CSS, а саме розділення структури документа і способів його відображення. Структура перестає бути виключно семантичною. Цьому сприяють <div>-и, використання яких логічно необгрунтовано.

2. Це робить документ більш складним для додавання стилів.

3. Код стає складніше читати, що призводить до появи помилок.

4. Це погано для оптимізації сайту (SEO). Пошукові системи звертають увагу на певні елементи, наприклад <h1> ... <h6>. Якщо ж ви не описуєте суть вмісту тега, використовуючи нейтральний тег <div>, боти просто не можуть оцінити, наскільки цей контент важливий.

5. Більше коду - важче файл, важче файл - більше час завантаження.

Приклади:

1. Хедер.
На багатьох сайтах можна зустріти наступний код для хедера:

Code

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>[/code]
У той час як раціональніше писати:

Code

а в CSS:
h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(це писати якщо текст не повинен відображатись на сторінці)*/
width:800px;
height:150px;
}

Вироблена нами заміна тега <div> на <h1> позитивно впливає на SEO сторінки, тому що тепер пошукові системи бачать, що зображення хедера - найважливіша частина сайту. Також, з точки зору семантики, <h1> позначає найважливіший заголовок сайту, в даному випадку його назву.

2. Навігація
Багато хто використовує діви і спани для навігації, в той час як можна використовувати звичайний список.

HTML

Code

CSS

Code

#menu {
/* your style*/
}
.menu_item {
/* your style */
}

По-перше, немає необхідності прописувати клас для тегу <span>. Можна легко описати його в CSS і без цього:

HTML

Code

CSS

Code

#menu {
/* your style*/
}
#menu span {
/* your style */
}

По-друге, набагато більш доречним буде використання ненумерованого списку <ul>. Це набагато скоротить код:

HTML

Code

CSS

Code

#menu {
/* your style*/
}
#menu li {
/* your style */
}

Як з цим боротися?

Отже, як же уникнути використання занадто великої кількості зайвих Дівов?

1. Повністю використовуйте можливості HTML і присутні в ньому теги. Думайте про семантику створюваного вами документа. Як ми вже показали в одному з прикладів, навігація - це, по суті, список. Тому розмічають його як список.

2. Переконайтеся, що використання діва необхідно. Іноді ми додаємо <div> за звичкою, або думаючи, що він необхідний для звернення до стилів. Але це не завжди так. Наприклад, замість такого опису навігації:

Code

ми з таким же успіхом можемо використовувати:

Code

і стиль меню буде прописаний через ul#nav замість div#nav ul.

3. В повній мірі використовуйте селектори CSS. Вам не завжди обов'язково використовувати вкладений <div> з особливим класом або id для застосування стилів до потрібного елементу. Наприклад, замість того, щоб прописувати #article

HTML

Code

<div id="content">
  <h1>This is the title</h1>
  <h2>This is the sub-title</h2>
  <div id="article">


This is the body of the article</p>


There may be several paragraphs here
  that you need to style with CSS</p>
  </div>
</div>

CSS

Code

#article {font-size: .9em;}

замість того, щоб прописувати #article в CSS документі і звертатися до нього через додатковий див, краще прописати селектор, який би знаходив всі абзаци в контенті і застосовував для них певний стиль через <div> content:

HTML

Code

<div id="content">
  <h1>This is the title</h1>
  <h2>This is the sub-title</h2>


This is the body of the article</p>


There may be several paragraphs here that you
  need to style with CSS</p>
</div>

CSS

Code

#content p {font-size: .9em;}

І на завершення Ми звикли, що для опису всіх елементів сторінки неодмінно потрібні окремі діви, що можна назвати пережитком табличної верстки. Але це не просто неймовірно забруднює код, але й позбавляє його семантичності і псує можливості оптимізації для пошукових систем.