What is a div for and how does it differ from a span?

[bwofficer]

What is a div for and how does it differ from a span? They both seem to be for creating a chunk of content that you can then style.

I've sussed that when I highlight some text in the topic and apply a style to it, Flare puts span tags in. So when would I use a div? My background is in paper-based documentation. Even having adopted Flare I'm only using it to create PDFs, not website content, so my knowledge of html and suchlike is sketchy at best. Flare help seems to assume I already know what a div is, but given my background I don't.

I want to understand this, because I find that the better I understand why something is the way it is the less likely I am to misapply it and make a stupid numpty mistake.

[ajturnersurrey]

Think of a div as a container for a whole paragraph or more. Doing pdf documents I often put a div around a combination of figure and figure label, or preamble plus table. I then apply PrintSupport settings to the div style to avoid column, frame or page breaks within the div. From a css point of view a div is a block level element, so they are quite controllable. They get used in html to position text blocks in particular places. I often use divs to apply a condition to set of paragraphs that should only appear, say, in the online help not the pdf.

Think of a span as a way of identifying some tiny part of a sentence that needs special treatment, such as a word to highlight in red. I apply a span style to Note: or CAUTION: to give me the bold and capitalisation I want, so that it can be easily changed when the company style changes. From a css point of view it is an inline container, so it doesn't have as many properties that can be set as a div, and you can't use it to position anything.

[bwofficer]

Thanks. That makes sense. Divs can be positioned. Spans have to remain inline.

[Nita Beck]

As noted above, the most salient things about a div are that (1) it is a container able to hold other tags such as paragraphs, images, lists, tables, headings, even other divs and that (2) it can be formatted. For example, many authors use divs to contain notes or other alerts. Instead of having just a p.Note style, one can have a div.Note style that will give the div, say, a border, a background color, even a background image, a given size, a given position, and so forth. That div.Note can then hold anything needed for a particular note.

[kmorrison]

We used to use divs for notes, tips, and cautions. However one thing I discovered several years ago about divs in Flare was that in PDF outputs, the rules about where page breaks belong (mainly widows and orphans rules) went out the window inside divs. We ended up with a bunch of pages containing nothing but the last line - or even just the last word - of a note. I believe it was logged as a bug, and I haven't heard that it's been fixed. (Currently using paragraphs and lists for notes etc...)

[bwofficer]

We used to use divs for notes, tips, and cautions. However one thing I discovered several years ago about divs in Flare was that in PDF outputs, the rules about where page breaks belong (mainly widows and orphans rules) went out the window inside divs. We ended up with a bunch of pages containing nothing but the last line - or even just the last word - of a note. I believe it was logged as a bug, and I haven't heard that it's been fixed. (Currently using paragraphs and lists for notes etc...)

Thanks. That's something I'll watch out for. At the moment all my content is built as PDFs, so this bug would be a big issue for me.

[Nita Beck]

Clearly others' mileage varies, but I haven't had the sweeping issue with div and page breaking reported above, and I've been producing PDFs with Flare since around 2008. When I get wonky page breaking in or near divs (or anywhere, actually), I investigate my CSS and typically find that some page break attribute I've set in some selectors are conflicting with those I've set in other selectors. I personally wouldn't eschew all divs.