Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

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

После него также добавляется перенос строки.

Синтаксис

<div>...</div>

Атрибуты

align
Задает выравнивание содержимого тега <div>.
title
Добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 { 
    width: 200px; 
    background: #ccc;
    padding: 5px;
    padding-right: 20px; 
    border: solid 1px black; 
    float: left;
   }
   .block2 { 
    width: 200px; 
    background: #fc0; 
    padding: 5px; 
    border: solid 1px black; 
    float: left; 
    position: relative; 
    top: 40px; 
    left: -70px; 
   }
  </style> 
 </head>
 <body>

  <div>Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.
 
 </div>
  <div>Ut wisis enim ad minim veniam, quis nostrud 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</div> 

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

div, span и display — Основы HTML, CSS и веб-дизайна

Основы HTML, CSS и веб-дизайна

В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.

display

У элементов есть свойство display. Оно задаёт то, как элемент выводится на экран.

Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.

See the Pen Block and inline by Hexlet (@hexlet) on CodePen.

  • display: block начинается с новой строки и занимает всю ширину
  • display: inline начинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания

Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.

Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент

p по умолчанию имеет display: block.

Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.

Вот пример таких reset-стилей.

div & span

Элемент p имеет семантическое значение. Он определяет абзац текста.

Такой элемент не стоит использовать там, где это по смыслу не имеет значения.

Например, не стоит помещать в p меню с кнопками для навигации по сайту.

Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.

  • div — это блочный (block-level) элемент, у него свойство display: block.
  • span — это строчный (inline-level) элемент, у него свойство display: inline.

Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости

.

div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.

<div>
  <p>
    После Второй мировой войны <span>Нью-Йорк</span> стал одним из неоспоримых мировых городов-лидеров.
  </p>

  <p>
    Строительство штаб-квартиры ООН в Нью-Йорке символизировало уникальное политическое значение города. 
  </p>
</div>

Блочная модель

Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.

У каждого прямоугольника есть несколько свойств, влияющих на размер:

  • width, height — ширина и высота элемента
  • padding — отступ внутри элемента (расстояние от содержания до границы прямоугольника)
  • border — толщина границы (обводки)
  • margin — отступ снаружи элемента (расстояние от границы прямоугольника до соседних элементов)

Давайте сделаем элемент, в котором явно видно все эти части:

See the Pen Div Box by Hexlet (@hexlet) on CodePen.

Мы использовали значение inline-block у свойства display. Это в какой-то степени комбинация inline и block. Элемент не занимает всю ширину и может находится на одной строке с другими элементами. При этом у него можно задать параметры, свойственные block: конкретную ширину и высоту.

Сколько же места требуется всему элементу? Нужно сложить показатели:

  • Высота    : высота элемента + внутренний отступ + толщина границы + внешний отступ (height + padding + border + margin) — 70 + 10 + 8 + 15 = 103px.
  • Ширина: ширина элемента + внутренний отступ + толщина границы + внешний отступ (width + padding + border + margin) — 100 + 10 + 0 + 15 = 125.

Границы и отступы можно задать свои для каждой из сторон:

#box2 {
  width: 100px;
  height: 70px;
  border-top: 8px solid #001f3f;
  margin-left: 15px;
  margin-top: 5px;
  padding-left: 10px;
  padding-top: 10px;
}

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

id — идентификатор | CSS селектор

Поддержка браузерами

Описание

CSS селектор id позволяет применить стиль к определённому элементу на странице, в котором указан необходимый идентификатор. Определение селектора id в CSS коде начинается с символа решётки «#«, за которым следует имя идентификатора:

#myid { color: blue; }

Чтобы использовать селектор id, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо добавить атрибут id в открывающем теге и указать в качестве значения имя нужного идентификатора. Ставить решётку перед именем идентификатора в HTML коде (в значении атрибута

id) не нужно.

Примечание: идентификаторы не должны повторяться в рамках одного документа, т.е. определенный id может быть использован на странице только один раз с тегом, для которого он предназначен. Если вы хотите применять стиль более чем к одну элементу, следует использовать селектор class.

Селектор id имеет некоторые особенности:

  • В имени идентификатора разрешается использовать только буквы, числа, дефис и знак подчеркивания
  • Имя идентификатора всегда должно начинаться с буквы
  • Имена идентификаторов чувствительны к регистру символов, например: #Menu и #menu это два разных идентификатора
Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      #myname {color:red;}
    </style>
  </head>

  <body>
    <h2>Добро пожаловать!</h2>

    <div>
      <p>Меня зовут Арни. </p>
      <p>Я играю в онлайн игры.</p>
    </div>
    <p>Моего кота тоже зовут Арни.</p>

  </body>
</html>
Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

Классы и идентификаторы CSS: отличие и применение

В руководстве по CSS для новичков мы анализировали только селекторы HTML — те, что представляют HTML-тег. Вы можете также задавать свои собственные селекторы, которые могут принимать форму классов и идентификаторов.

Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

 

Таким образом CSS может напоминать следующий код:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:


<div>
<h2>Chocolate curry</h2>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов. Это и есть основное отличие.

В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например p.jam { какой-то стиль } будет применяться для элементов параграфов, у которых есть класс «jam».

 




Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

Изучаем атрибут ID в HTML самостоятельно, div id

Всем привет дорогие друзья. Сегодня воскресенье, а значит еще один полезный урок по созданию сайтов на языке HTML. Поговорим мы про атрибут id в HTML. В предыдущем уроке мы разбирали с вами, что такое классы и как их использовать в верстке, т.е как они работают.

Использование идентификатора id в HTML

Атрибут id указывает на уникальный идентификатор элемента в HTML, к которому можно также как и классу обратиться посредством языка Javascript или же CSS для выполнения определенных задач.

В CSS обозначается обычным знаком решетка (#) после которого без пробелов идет имя нашего идентификатора, которое всегда должно быть написано на латинице.

Обычный пример ниже. Для заголовка ниже мы зададим атрибут id с именем myheader. Запишется он вот так в таблице стилей:

<style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> <h2>My Header</h2>

<style>

#myHeader {

    background-color: lightblue;

    color: black;

    padding: 40px;

    text-align: center;

}

</style>

 

<h2>My Header</h2>

Результат будет вот таким:

В стилях мы задали для атрибута id свойство заливки фона элемента заголовка, добавили цвет шрифта, отступ и выравнивание по центру.

Примечание: Атрибут id может быть задан или указан для любого тега или элемента в HTML.

Важно! Имя идентификатора id чувствительно к регистру. Если делаете большими буквами, также большими буквами указывайте и в CSS.

Должно содержать также не менее одного символа и не должно иметь пробелов, вкладок, отступов и т.д.

Различия между классами и идентификаторами

Вполне логичный вопрос, так чем же пользоваться в итоге, если можно применять и тот, и другой способы? Ответ простой. Идентификатор id по принципу приоритета стоит выше класса, т.е если у элемента будет сначала прописан идентификатор, а потом за другим элементов пойдет класс, то браузер сначала исполнит запрос в таблице стилей к идентификатору id, а уже потом к классу! Это нужно просто запомнить.

И еще элемент в html может иметь только один идентификатор, в то время как имя класса может использоваться несколькими элементами!

<style> /* Style the element with the id «myHeader» */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name «city» */ . city { background-color: tomato; color: white; padding: 10px; } </style> <!— A unique element —> <h2>My Cities</h2> <!— Multiple similar elements —> <h3>London</h3> <p>London is the capital of England.</p> <h3>Paris</h3> <p>Paris is the capital of France.</p> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<style>

/* Style the element with the id «myHeader» */

#myHeader {

    background-color: lightblue;

    color: black;

    padding: 40px;

    text-align: center;

}

 

/* Style all elements with the class name «city» */

. city {

    background-color: tomato;

    color: white;

    padding: 10px;

}

</style>

 

<!— A unique element —>

<h2>My Cities</h2>

 

<!— Multiple similar elements —>

<h3>London</h3>

<p>London is the capital of England.</p>

 

<h3>Paris</h3>

<p>Paris is the capital of France.</p>

 

<h3>Tokyo</h3>

<p>Tokyo is the capital of Japan.</p>

Результат:

Использование id атрибута в Javascript

JavaScript может получить доступ к элементу с указанным идентификатором с помощью метода getElementById ():

Пример ниже показывает как с помощью атрибута id можно манипулировать текстом:

<script> function displayResult() { document.getElementById(«myHeader»).innerHTML = «Have a nice day!»; } </script>

<script>

function displayResult() {

    document. getElementById(«myHeader»).innerHTML = «Have a nice day!»;

}

</script>

Так выглядит текст пока кнопка не зажата:

После нажатия на кнопку «Change Text» мы получим изменение текста с идентификатором #myHeader по которому обращается Яваскрипт:

Использование атрибута ID в якорях ссылок

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

Давайте для начала создадим якорь с идентификатором id:

<h3>Chapter 4</h3>

<h3>Chapter 4</h3>

А теперь добавим закладку-якорь в ссылку

<a href=»html_demo. html#C4″>Jump to Chapter 4</a>

<a href=»html_demo.html#C4″>Jump to Chapter 4</a>

На этом наш урок подошел к концу. Впереди нас ждет следующая полезность — работа с html iframe.

Всем хорошего дня и приятного изучения!

Структура HTML5 — div, section и article :: Хранитель заметок

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div> или <div>.

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Описание на whatwg.org

Разница между div, section и article

В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.

Элемент section

Новый элемент section очень похож на div , т.к. используется как контейнер, но он уже имеет особое семантическое значение — объекты, которые располагаются внутри него, объединены общим смыслом.

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

Новый элемент article — это специальный вид section , который обозначает независимую и самодостаточную часть страницы. На его месте можно использовать section, но article добавляет больше семантического значения.

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

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

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section , за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

Пример использования


<header>
    <h2>Название сайта</h2>
    <nav>
        <ul>
            <li><a href="page1.html">Страница 1</a></li>
            <li><a href="page2.html">Страница 2</a></li>
            <li><a href="page3.html">Страница 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <h3>Свежие статьи</h3>
    <article>
        <h3>Заголовок статьи 1</h3>
        <p>Текст статьи</p>
    </article>
    <article>
        <h3>Заголовок статьи 2</h3>
        <p>Текст статьи</p>
        <aside>Дополнительная информация, относящаяся к статье 2</aside>
    </article>
</section>
<aside>
    <section>
        <h4>Blogroll</h4>
    </section>
    <section>
        <h4>Реклама</h4>
    </section>
</aside>
<footer>
    <p>Копирайты</p>
</footer>

По мотивам http://oli. jp/2009/html5-structure1/

Ещё заметки со схожей тематикой

Divs, Spans, Ids и Classes

Divs, Spans, Ids, and Classes

Вернуться на страницу третьего класса »

HTML-теги div и span сами по себе не имеют презентационной ценности. Это означает, что если вы поместите его в свой HTML, они фактически ничего не будут отображать.

Эти теги в основном используются как «крючки» для вашего CSS. Вы используете их для разделения или маркировки вашего HTML (когда другой, более семантический тег не работает) и используете селекторы CSS для их нацеливания.

Класс

и идентификаторы являются атрибутами HTML. Они также используются как перехватчики CSS.

Блочные и встроенные элементы HTML

Из Стильный с CSS Чарльз Вайк-Смит:

… большинство тегов XHTML делятся на две большие категории по способу отображения на странице: блочные и встроенные. Элементы уровня блока, такие как заголовки от

до

и абзацы

, будут любезно располагаться на странице без разрывов строк. У них даже есть предустановленные поля для создания пространства между ними. Встроенные элементы не имеют таких полей и располагаются бок о бок на странице, переходя к следующей строке только в том случае, если для них недостаточно места для размещения рядом друг с другом. (стр.18)

Div Tag

Тег div — это HTML-элемент уровня блока. Он используется для разделения или раздела других тегов HTML на значимые группы.

Прекрасным примером использования тега div является обозначение списка навигации:

Диапазон шкалы

Тег span — это встроенный HTML-элемент, который используется для группировки набора встроенных элементов. Вообще говоря, вы используете span для перехвата текста или группы тегов, которые вы хотите стилизовать по-другому.Однако часто вы можете сделать это более семантически, используя другие элементы, такие как em или strong .

Хороший пример правильного использования диапазона — это заголовок, который вы хотите разделить на две части.

  
 Comm 244: 
 Дизайн для WWW

Атрибут Id

Атрибут id используется для обозначения разделов или частей вашего HTML-документа. Вы можете использовать один и тот же идентификатор только один раз на странице, поэтому сохраните его для важных основных разделов вашей страницы.Кроме того, селектор id в CSS имеет высокий уровень специфичности и, следовательно, отменяет другие вещи (например, селектор классов).

Атрибут класса

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

   
 Заголовок боковой панели 
 
  
 текст боковой панели Lorem ipsum dolor sit amet, 
 consctetur adipisicing elit.

Дополнительная литература

Вот несколько статей с дополнительной информацией о div, промежутках, идентификаторах и классах.

Вернуться на страницу третьего класса »

Понимание идентификатора и класса в CSS

Обзор

До сих пор вы добавляли стиль к различным элементам на странице портфолио, но добавленные стили повлияли на всех элементов определенного типа.Например, когда вы добавили стиль к элементу div, это одинаково повлияло на все элементы div. Что, если вы хотите стилизовать некоторые элементы div одним способом, а другие элементы div — другим? Вот где на помощь приходят id и class. В этом уроке вы узнаете, как атрибуты ID и Class могут использоваться для стилизации отдельных элементов (id) или групп элементов (class).

Результаты учащихся

По завершении этого упражнения:

  • вы сможете определить, как атрибуты ID используются в CSS для включения стилизации отдельных элементов.
  • вы сможете определить, как атрибуты класса используются в CSS для включения стилизации групп элементов.
  • вы должны добавить атрибуты ID и Class к определенным элементам на веб-странице.

Что такое id?

В HTML каждому элементу на вашей веб-странице может быть присвоен уникальный атрибут id. Это может быть любой текст, который вам нравится, но он должен быть уникальным (эта метка может быть только у одного элемента). Рекомендуется назначать метки, описывающие функцию элемента. Например,