В чем разница между и в HTML и XHTML?
Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.
Конечно, тег «p» был в какой-то момент предназначен для использования абзаца… но в 100% моих приложений, дизайнов и просто повседневной общей разработки мы ничего не видели, кроме ограничений, налагаемых тег «p» … он не предлагает никакой пользы в сегодняшнем Интернете.
Я бы сказал «да», «p» — описательный элемент, и по этой причине, если все это произошло; «описать что-нибудь», я буду всем для этого… но он НЕ просто описывает контент, он прямо подставляет ALTERS контент, который, будучи уже ограниченным само по себе, не все, что он делает, он также ОГРАНИЧИВАЕТ контент. Почему кто-то в здравом уме целенаправленно охватывает предельный строительный блок, когда дело доходит до веб-разработки, находится вне меня. С точки зрения дизайна это не имеет смысла. С структурной точки зрения это не имеет смысла. Из любого из DOM-манипуляций PERIOD это не имеет смысла.
Мы все вместе перестали использовать тег «p» , за исключением тех случаев, когда мы абсолютно вынуждены (например, клиентские словарные пресса, такие глупые вещи). Нет никакого оправдания, почему мы не можем описать почти все с хорошо названными классами и идентификаторами, поэтому мы видим нулевую причину, чтобы склониться перед «стандартами», которые не приносят никакой пользы, и на самом деле СЧИТАЮТ каждый кусочек головоломки, Тег «p» не помогает разработчику, конечному пользователю или современным поисковым системам. В двух словах… «p» тег почти не рекомендуется в даже отдаленно сложных реализациях (и с очень веской причиной), не позволяйте комментариям этих стандартных нацистских элементов управления отображать ваш контент!
Даже на этом самом сайте, ориентированном на разработчиков на нем, у ОЧЕНЬ ТОП его собственной страницы есть небольшая поп-часть, которая могла бы использовать тег «p» , поскольку он содержит достаточно текста для запуска ко второй строке, но полностью захвачен в DIV (и только div, а не div → p) для почти бесконечного числа причин… прежде всего, что сегодня «p» SUCKS по сравнению с любым хорошо описанным блоком созданный из DIV, который так же хорошо описывается (moreso… я говорю) как абзац «p» с очень описательным id = «blurb».
Из Stackoverflow:
<div>Qaru is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
Я говорю с
<p>I suck</p>
и долго жить
<div>I rock</div>
И да, я ценю наши нынешние веб-стандарты, и такие вещи, как все еще, имеют место, даже предлагая возможности делать что-то с некоторыми современными браузерами, которых вы не можете выполнить с помощью контейнера, но это только то, что это, в частности, сломанный элемент «p» , как часть реструктурированного и модернизированного HTML… должен был быть оставлен в могиле, где он принадлежит… это поколение веб-сайтов, где абзацы уже не абзацы навсегда. блоки буквально меняются… он просто устарел и непрактичен.
html — В чем разница между HTML-тегами и ?
divпредставляет собой блок — элемент, spanявляется встраиваемым.
Это означает, что использовать их семантический, дивы должны использоваться, чтобы обернуть разделы документа, в то время как пролеты следует использовать, чтобы обернуть небольшие порции текста, изображений и т.д.
Например:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Обратите внимание, что это незаконно, чтобы поместить элемент уровня блока внутри строкового элемента, так:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
… является незаконным.
EDIT: На HTML5, некоторые блочные элементы могут быть размещены внутри некоторых встроенных элементов — в частности, выше теперь законно.
Вы попросили некоторые конкретные примеры, так один взят с моего сайта боулинга, BowlSK :
<div>
<div>
Hi there, <span>Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h2><a href="/">Bowl<span>SK</span></a></h2>
</div>
Хорошо, что происходит? В верхней части моей страницы, у меня есть логический раздел, в «заголовок». Поскольку это раздел, я использую DIV (с соответствующим идентификатором). В том, что у меня есть несколько разделов: панель пользователя и фактическое название страницы. Название использует соответствующий тег h2. Юзербар, будучи секцию, завернутый в div. В том, что имя пользователя , заворачивают в spanоколо 2 буквы в названии — это позволяет мне изменить свой цвет в моей таблице стилей.
Также отметим , что HTML5 включает в себя широкий ряд новых элементов , которые определяют общие структуры страниц, таких как статья, раздел, навигационный и т.д. Раздел 4.4 рабочего проекта HTML 5 перечисляет их, и дает советы , как их использование. HTML5 еще рабочая спецификация, так что ничто не является «окончательным», но оно весьма сомнительно , что любой из этих элементов происходит в любом месте. Существует Javascript хак , что вам нужно будет использовать , если вы хотите , чтобы эти элементы стиля в какой — то старой версии IE — вы в основном нужно создать один из каждого элемента , используя , document.createElementпрежде чем любой из этих элементов указаны в источнике. Есть куча библиотек , которые будут заботиться об этом для Вас — быстрый поиск Google оказался html5shiv .
В чем разница между тегами HTML и ?
div является блочным элементом, span является встроенным.
Это означает, что для использования семантически, divs следует использовать для обертывания разделов документа, в то время как промежутки должны использоваться для обертывания небольших частей текста, изображений и т.д.
Например:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Обратите внимание, что помещать элемент уровня блока внутри встроенного элемента является незаконным, поэтому:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
… является незаконным.
EDIT: с HTML5 некоторые элементы блока могут быть помещены внутри некоторых встроенных элементов. См. Ссылку MDN здесь для довольно четкого перечисления. Вышесказанное по-прежнему является незаконным, поскольку <div> — содержимое потока.
Вы попросили конкретные примеры, так же как и взятый с моего сайта боулинга BowlSK:
<div>
<div>
Hi there, <span>Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h2><a href="/">Bowl<span>SK</span></a></h2>
</div>
Хорошо, что происходит? В верхней части моей страницы у меня есть логический раздел, «заголовок». Поскольку это раздел, я использую div (с соответствующим id). В этом случае у меня есть пара разделов: панель пользователя и фактическое название страницы. Заголовок использует соответствующий тег, h2. Панель пользователя, являющаяся секцией, завернута в div. В этом случае имя пользователя завершается в span, так что я могу изменить стиль. Как вы можете видеть, я также завернутый span около 2 букв в названии — это позволяет мне изменить свой цвет в моей таблице стилей.
Также обратите внимание, что HTML5 включает в себя широкий набор новых элементов, которые определяют общие структуры страниц, такие как статья, раздел, nav и т.д. Раздел 4.4 рабочего проекта HTML 5 перечисляет их и дает подсказки относительно их использования. HTML5 по-прежнему является рабочим спецификацией, поэтому пока ничего не «окончательно», но очень сомнительно, что любой из этих элементов идет куда угодно. Существует javascript-хак, который вам нужно будет использовать, если вы хотите стилизовать эти элементы в старой версии IE — вам в основном нужно создать один из каждого элемента, используя document.createElement прежде чем какой-либо из этих элементов будет указан в вашем источнике. Есть куча библиотек, которые позаботятся об этом для вас — быстрый поиск в Google появился html5shiv.
HTML :: Элементы ‘span’ и ‘div’
Данные элементы представляют собою обобщенные, универсальные контейнеры, первый из которых отображается браузером как строчный элемент, а второй – как блочный. Другого логического смысла они не имеют. Оба элемента формируются парными тегами, соответственно, <span> (от англ. span – охватывать) и <div> (от англ. division – раздел).
Элемент ‘span’ в основном применяется для выделения небольших фрагментов текста, рисунков или даже отдельных символов и букв, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Например, если нам нужно выделить слово зеленым цветом, но оно не имеет особой смысловой нагрузки и важности, то нецелесообразно применять для этого, скажем, элемент ‘strong’, который подразумевает важность своего содержимого и, кроме того, отображает свое содержимое полужирным шрифтом. А вот элемент ‘span’ сам по себе свое содержимое никак не изменяет, но зато легко объединяется со стилями CSS через атрибуты style, class или id, позволяя делать с ним практически все, что пожелает разработчик. Использование элемента ‘span’ показано в примере №1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент 'span'</title> </head> <body> <p title="Применение универсального элемента 'span'"> <!-- Вспоминаем мнемоники. Здесь вставили среднее тире.--> Я – абзац. <span>А я – синее предложение в нем.<span> </p> </body> </html>
Пример №1. Использование элемента ‘span’
Элемент ‘div’ является универсальным блочным элементом. Поэтому он применяется для изменения внешнего вида целых блоков веб-документа, для которых применение тегов с каким-то логическим смыслом нецелесообразно. Также, как и элемент ‘span’, он свое содержимое никак не изменяет, но легко объединяется со стилями CSS через атрибуты через атрибуты style, class или id, являясь по сути аналогом элемента ‘span’, но только среди блочных элементов. Например, пусть у нас есть два абзаца: первый абзац написан текстом синего цвета, а второй – красного. Теперь мы захотели, чтобы текст обоих абзацев был размещен на желтом фоне. Для этого разместим их внутри элемента ‘div’, у которого фон имеет желтый цвет (см. пример №2).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент 'div'</title> </head> <body> <div> <p> Первый абзац с шрифтом синего цвета. </p> <p> Второй абзац с шрифтом красного цвета. </p> </div> </body> </html>
Пример №2. Использование элемента ‘div’
Следует отметить, что использование элемента ‘div’ приобрело настолько широкое применение, что появилось даже понятие блочной верстки, которое как раз и подразумевает активное использование элемента ‘div’ в качестве универсального компонента. Ведь благодаря универсальности элемента и простоте управления им через стили CSS, появляется возможность разбивать верстку веб-страницы на ряд компактных и, соответственно, легче редактируемых блоков html-кода, которые при отображении браузером собираются вместе в нужной последовательности и формируют окончательный внешний вид страницы. Таким образом, веб-документ представляется блоками ‘div’ в виде этаких «строительных кирпичиков», переставляя которые с места на место, можно легко изменять внешний вид страницы по своему усмотрению.
Злоупотреблять использованием элементов ‘div’ не стоит. Всему должна быть своя мера и свое место. Например, в случае, рассмотренном выше, было бы весьма нелогично применить элемент ‘p’ вместо элемента ‘div’, поскольку «абзац в абзаце» явно не укладывается в наши представления о форматировании текста. Однако и замена элементов ‘Абзац’ на элементы ‘div’, также не имеет логического смысла. Мы бы просто физически разделили текст на два блока. Но это еще ладно, а если бы мы заменили заголовки на элементы ‘div’? Как бы поисковые машины определяли важность соответствующих блоков? Поэтому, повторимся, всему должна быть своя мера и свое место. Нужно учиться в разумных пропорциях сочитать логическую разметку и простое физическое деление html-кода документа.