Предложение разбираться с абзацами с блочным контентом? - PullRequest
3 голосов
/ 28 апреля 2011

При кодировании HTML-страниц (особенно с большим количеством текстового содержимого) иногда можно использовать элементы DIV или P. Концептуальное правило: мыслить семантически, используйте P для текстовых абзацев .

Одна проблема, которую я обнаружил, заключается в том, что реальная концепция абзаца не всегда хорошо сочетается с ограничением HTML, что элемент P не может включать блочные элементы . В реальном мире абзац иногда включает в себя текстовые блоки, в частности цитаты. Взять, к примеру, этот текст от П. Г. Вудхауза:

Странной частью этого было то, что после первый шок, увидев все это страшная энергия вещь не казалась так странно. Я разговаривал с ребятами с тех пор, кто был в Нью-Йорке, и они говорят мне, что нашли это только так же. Видимо, есть что-то в воздух, или озон или фосфаты или что-то, что делает ты сидишь и замечаешь. Типа мол, как бы. Своего рода балли свобода, если вы понимаете, о чем я проникает в твою кровь и подбадривает тебя, и заставляет вас чувствовать, что

Бог на небесах:
Все в порядке с миром,

и тебе все равно, если у тебя странный носки на. Я не могу выразить это лучше чем сказать, что мысль на мой взгляд, когда я шел о месте, которое они называют Таймс Площадь, было что было три тысяча миль глубокой воды между я и моя тетя Агата.

Естественный (семантический) способ увидеть это как один абзац с дочерним элементом блока. Но в HTML вы должны выбрать

  • сделать три параграфа P (вы должны сделать некоторые изменения, например, последний псевдо-параграф может иметь неправильные поля или отступы - но, прежде всего, это будет семантически и структурно некорректно)

  • закодировать внутреннюю кавычку как встроенный элемент, SPAN с несколькими BR (безобразно, трудно применить стиль ко всему этому)

  • сделать полный абзац DIV (неосуществимым / непоследовательным, если другие абзацы закодированы как элементы P)

Мне не нравится ни один из вариантов - и я не вижу другого; и поэтому семантический критерий для определения того, когда следует использовать P, остается для меня довольно неудовлетворительным.

Другой аналогичный пример из следующего PGW opus следует:

example

Есть предложения по работе с этими сценариями?

Ответы [ 3 ]

1 голос
/ 28 апреля 2011

Вы спрашиваете о полном абзаце, но настоящая проблема здесь заключается в цитате - я думаю, что сочетание <q>, <br> и CSS подходит, так как стихи являются одним из тех случаев, когда разрывы строк имеют некоторое значение , С классом для определения того, что конкретная встроенная цитата является выдержкой из стихотворения, вы можете получить желаемый стиль.

http://jsfiddle.net/insin/af2Uz/

<!doctype HTML>
<html>
<head>
<title>Poem Quoting</title>
<style type="text/css">
p { text-indent: 1em; }
q.poem { display: block; margin: 2em; font-style: italic; text-indent: 0; }
q.poem:before, q.poem:after { content: ''; content: none; }
</style>
</head>
<body>
<p>
  The odd part of it was that after the first shock of seeing all this
  frightful energy the thing didn't seem so strange. I've spoken to fellows
  since who have been to New York, and they tell me they found it just the
  same. Apparently there's something in the air, either the ozone or the
  phosphates or something, which makes you sit up and take notice. A kind of
  zip, as it were. A sort of bally freedom, if you know what I mean, that
  gets into your blood and bucks you up, and makes you feel that
  <q class="poem">God's in His Heaven:<br>All's right with the world,</q>
  and you don't care if you've got odd socks on. I can't express it better
  than by saying that the thought uppermost in my mind, as I walked about the
  place they call Times Square, was that there were three thousand miles of
  deep water between me and my Aunt Agatha.
</p>
</body>
</html>

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

Вы можете принять теорию до сих пор, только если она не соответствует тому, с чем вам приходится работать в остром конце - какая реальная потеря использования одного из подходов, которые вам не особенно нравятся? Если на каком-то этапе вы начнете писать что-то, что зависит от структуры результирующего документа, это будет помехой только в том случае, если вы не будете последовательно использовать один и тот же подход в этих сценариях (возможность зависеть от таких правил, как «Treat»). цитата, за которой следует p.continuation в качестве члена предыдущего p ").

0 голосов
/ 28 апреля 2011

Указание класса по семантическим (и стилевым) причинам имеет смысл здесь.

<p class="visual">WELCOME HOME MR. WILL</p>

или

<div class="thought">
    <p>God's in His Heaven:</p>
    <p>All's right with the world,</p>
</div>

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

#thought_lines{
    padding: 10px 5px 5px;
}

#thought_lines p:last-child{
    padding-bottom: 5px;
}
0 голосов
/ 28 апреля 2011

Использовать элемент HTML <q>,

<p>My Long Paragraph <q>Set Apart</q> More of my boring stuff </p>

http://www.w3schools.com/html5/tag_q.asp Официальный W3C: http://www.w3.org/TR/html401/struct/text.html#h-9.2.2 (спасибо, Джаред)

...