CODEWITHSUNDEEP
htmlmarkupsemantic-markup
kazinix
kazinix

Reputation: 30113

HTML4 - MEANINGFUL Markup for list

Recently I'm starting to become a meaningful-markup freak so now I'm confused of what HTML markup to use in my page. Basically I want to display a list of stories, the title, author, when it was created and some content.

<h2>Story 1</h2>
<em>by: Author X January 17, 2012</em>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>

So, what meaningful markup should I use to make a list of the above markup?

Upvotes: 2

Views: 159

Answers (5)

Mr Lister
Mr Lister

Reputation: 46579

I still think a table is the most logical approach. See this jsfiddle.

Upvotes: 1

Dennis Traub
Dennis Traub

Reputation: 51634

HTML5 offers a variety of new semantic tags. Here's an example of how a story can be structured. For more info just google "html5 semantic tags"

<article>
  <header>
    Title
    <address>Author</address>
    <time>...</time>
  <header>
  <section>
    lorem ipsum
  </section>
</article>

Edit: When using HTML4, you can stick to what you have already, which is perfectly fine in my opinion.

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The h2 headings divide the content to sections. This is the old HTML practice, and you don’t need anything else, unless you wish to style sections in some special way or refer to them as units in client-side scripting or in linking. If you do need something like that, div with a class is the practical way. Advocates of HTML5 may suggest section, but no actual benefits have been described, and section needs extra JavaScript code to introduce it to old versions of IE.

You don’t need any list markup. Just having two or more somewhat similar elements in succession does not mean that you need some markup for a list of elements. The HTML list elements ul (bulleted list), ol (numbered list), and dl (list of named descriptions) are specialized constructs, normally used for lists consisting of short pieces of text. Tables may be treated as lists of rows sharing the same structure, but this normally makes sense only when the rows represent “records” of some kind and you really gain something from presenting them tabularly.

If your items are really short descriptions of stories, rather than stories themselves, they might be treated as bibliographic records and therefore tabulated. But realistically speaking, this is useful only when it makes sense to present them in a tabular manner, one row for each record. That would mean that the descriptions are fairly short. Consider whether a tabular approach could be needed e.g. to make it possible to reorder the records (via client-side scripting), to copy the table from HTML to a word processor or Excel, etc.

Upvotes: 2

danwellman
danwellman

Reputation: 9253

There's nothing more meaningful for a list than a list element ;)

If the stories are in a meaningful order I would use an <ol>, but if not a <ul> should suffice. With regard to the content of each list-item, you could use an <article>, as each item in the list represents an indivual block of content, with a heading

Upvotes: 1

Kishore Kumar
Kishore Kumar

Reputation: 12874

Try using <div> tag.. Then inside the div tag use all the rest tags

Upvotes: 0

Related Questions