best HTML structure

[aoeui]

hi

doing just for fun project (all films + tv shows I have ever seen + time spent)

could you guys look at HTML structure?
I am not really sure how to do it clean and simple

http://krsiak.cz/temp/css-tricks/demo/films/
this one piece represents one film of many which will be listed on the page

P.S.: ignore classes and styling, weird for now, only for visualisation in this demo

[aoeui]

I have 1 div and inside it:

ROW 1
name = Lion King
how many times watched = (7x)
89 mins = length

ROW 2
youtube video = trailer
tags = animated + kids

*
*

and RATING = 100 %

these are the elements I need
not sure where to put it, 1st or 2nd, or on new separate line?

[aoeui]

and yes having H3 inside P is crime I know :]
that is why I am asking how to make this work
visually as you can see it is how it should look like in the end (except .css)

just need to shuffle the HTML a bit to get it right

[aoeui]

that might do, I like HTML5
thanks

will have a look at it and come back with newer version

[joshuanhibbert]

This is how I would personally do it (I wouldn’t use article or section for such a small thing, but that’s just me):

Movie Title


view count

Link to trailer



tag


tag




length


100%

In regards to the use of article and section, I refer to this document: http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

The thing to remember with the section element is that is has semantic value, so if you are separating content just for styling, you should simply use a div.

[aoeui]

hi

thanks

I also had a small problem using article because it is not article (block of text) :)
your solution works the best for me

[aoeui]

update
http://krsiak.cz/temp/css-tricks/demo/films/

still needs styling but almost there (HTML structure) :]

question is where to add icons
most of the time there will be only 1 icon

if has trailer = yes
if not = no

but for instance film The 13th Warriror

meets conditions:
* favourite
* top 10
* saw it in cinema

trying to figure out what to move or leave out so in case there will be 3 icons + trailer
it should not seem messy, with lots of items

any ideas?

[joshuanhibbert]

How about something like this: http://jsfiddle.net/joshnh/ksSNy/

[aoeui]

yeah, looks good :]

[Author]

Posts