semantically replacing unordered list (UL) free text 1

[1DMF]

Hi,

I have found validating under HTML5, the validator is throwing up errors for using free text with an unordered list.

EG.

<ul>some free text
	<li>1st list item</li>
	<li>2nd list item</li>
</ul>

So I have replaced this free text within the <ul> tag with a HTML5 <figure> tag.

EG.

<figure>
<figcaption>some free text</figcaption>
<ul>
	<li>1st list item</li>
	<li>2nd list item</li>
</ul>
</figure>

Would you agree that this is semantically correct, or should I be using something else?

Your input is appreciated.

1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[ChrisHirst]

If the listed items are not directly related to the main content, but are included as an 'in context' example or to clarify a point in the main content flow yes.

The figure element is the HTML equiv of having "See fig x:" in a text book or a encyclopedia.


But on the other hand, you already know my opinion of HTML spell checkers

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

It's part of the privacy policy page and it's actually kind of being used as a sub description...

Here it is in context

<h2 class="title legal_title">Confidentiality / Security</h2>
<figure>
<figcaption>We give you the option of using a secure transmission method to send us the following types of personal data:</figcaption>
<ul class="privacy_list">
	<li>primary personal data (eg. name and contact details)</li>
</ul>
</figure>

It's not a sub heading per sae so don't think a <h> tag should be used, and not really thinking it's just a paragraph either, it's related to the list as a caption for the list. I feel there is a direct relationship with the list so thought figure encapsulated this well.

Though you may not agree nor care about validation, it's good practice to validate your code and to consider the semantics of the tags vs content you use.

Was using free text in an unordered list ever actually semantic even when it did validate?

1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[vacunita]

Just to clarify, this would be wrong:

<ul>some free text
	<li>1st list item</li>
	<li>2nd list item</li>
</ul>

<ul> s can only ever contain <li> elements. Nothing else. by moving the text outside of the UL, you've created a different and correct markup.


For that purpose even this would be correct:

<div>
<span>Free Text</span>
[indent][/indent]<ul>
[indent][/indent] <li>1st list item</li>
[indent][/indent] <li>2nd list item</li>
[indent][/indent]</ul> 
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Thanks Phil,

Not sure why there was content marked-up like that in the first place, but I have read that under HTML5, it would be semantically incorrect to just keep wrapping content in divs like we used to do.

Apparently it's no different than when we used to use tables for layout.

There are a few new semantic tags for these purposes, notably :- header, main, footer, nav, menuitem

Which are fairly obvious, I'm now trying to get a feel for the others :- section, figure, details, aside.

Though header/footer can be used in a section tag, I feel this is more for blog/article type content along with the article tag.

I have also read that arbitrarily replacing all your divs with section tags would also be incorrect, so I am trying to find a balance.

As always, your input is appreciated.
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[vacunita]

Yes, HTML 5 now indicates the use of sections to divide your page. Though DIV's are still used to blocks in sections. Depending on where in your code that is it may be considered a section or a block inside a section.

The details tag now replaces some Js and gives you the ability to show and hide details of an element.

Most of the other ones are pretty self explanatory.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Yes, though some still aren't usable as IE and FF don't support them such as 'details', and none of the browsers currently support 'dialog', though I am struggling to understand its use a marked-up content, perhaps when the browsers support it, I will be able to see how it works and then it might shed some light, currently I am using the JQuery UI dialog widget.

I also find it puzzling that 'header' and 'footer' are supported by IE, but not 'main', yet to me they seem semantically linked?

Maybe IE 14 on Windows 10 will support it

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[vacunita]

Dialog should create a popup window when you hover over the area its in I'm assuming, again replacing some JS with native support. Its still experimental, and yes support is still pretty much non existent in normal browsers.

Chrome Canary seems to support it but you must enable a flag in its settings.

As for IE, MS is always behind in the game. Which is why its a pain coding a website that looks the same in IE and other more standards compliant browsers. I've chosen to not make my websites look perfect on IE, only decent and operational.

So while I can get nice effects in Chrome and FF and Safari with CSS, I've given up on IE and just let it render whatever it can. As long as its usable and doesn't look horrid. I simply cannot justify pouring more time into IE to get it to look the same. Specially with all the different rendering outputs it provides from version to version. Its just too much.

Besides unless you are a corporate goon tied down by an IT department to some version of IE you should be using FF or Chrome on any platform.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Besides unless you are a corporate goon tied down by an IT department to some version of IE you should be using FF or Chrome on any platform.

Well as I know 90% of my users are using IE, I make it work on IE , then Chrome and care less about FF, especially as FF is now considered one of the moist insecure browsers of them all.

The new app I'm building targets HTML5 only browsers, so anyone not using IE10+ will have to install another, which currently I offer them Chrome, FF or Opera, we don't support Apple, so don't worry about Safari.

I find less layout issues with IE these days, it's just IE9 and its pathetic attempt at HTML5 that nearly pushed me over the edge, till I gave up with polyfils and shims and am a much happier bunny only supporting IE10+

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[vacunita]

Ohh mine work on IE too, they just don't end up looking as fancy most of the time. I try not to do complex effects or things that won't degrade smoothly if they are not supported.

As for FF's security, most of it comes from plugins and they way they are handled. Also the security ratings fro browsers tend to almost always be skewed depending on who is paying for them or making them. Microsoft funded ones always put IE at the top, Google's make Chrome the best. FF goes with the flow and personally I've never had any issues with it. In fact for some development FF is my main testing browser because it has a couple of plugins I use a lot. Modify Headers and User Agent Switcher are quite useful.

Mostly, any browser can be insecure depending on how you use it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech