That is a PERFECT example of when STRONG, P and LI are ALL semantically incorrectā¦ Since you have an apparent HEADING and CONTENTā¦
<h2>
<a href="#">First name</a>
Message title lorem ipsum
<span>12.02.2010</span>
</h2>
<p> this would be the first paragraph of the message. maybe a teaser of the article... btw why would you put a link to the name and not the title.. but whatever</p>
NO LI, NO P around the OBVIOUS headingā¦ Of course youād want the APPROPRIATE level heading depending on the code around itā¦ and if you really need a wrapper to divide them up, DIV would be more semantically correct since it would NOT be changing the meaning of or applying unnecessary meaning (like sayā¦ list item) to tags that already have perfectly good meanings of their own!
Say what things AREā¦ thatās a heading to a section of content, USE a heading tagā¦ Heading tag starts a new subsection, so you donāt need to apply any extra semantic meanings to it by wasting code on a UL/LI ā or worse, applying the wrong meaning to it.
Which is one of the few times I disagree with Ian ā those are NOT paragraphs in the grammatical sense, so there is NO reason to be wrapping them in paragraph tags. Thatās wasteful/pointless markup applying a semantic meaning to elements that already have a perfectly good meaning on them.
Those meanings being LABEL and INPUT. They say what they are, you donāt need to say more!
Itās one of the few cases where <br /> would actually be a more accurate approach to handling it.
Assuming itās a proper form with a block level parent like FIELDSET in place.
People heard āsemantics means using Pā and thatās it, and just started slapping them around all sorts of elements for no good reason ā just like the die hard ātables are evil never use themā nutjobs who then go out and abuse nested lists and endless DIV on obviously tabular data.
An Image is NOT a paragraph ā PERIOD!. A heading is a heading, NOT a paragraph and a strong tag ā PERIOD! A list item already has the meaning ālist itemā so putting paragraphs inside it isā¦ serious āwhat the?ā ā Which is it, a list item or a paragraph? Part of why I consider it inappropriate to have multiple block-level tags inside a ālist ITEMāā¦ singular.
Itās one of those things that you CAN do ā but thatās like I CAN go drive my car off a cliff; doesnāt mean itās something I SHOULD go do. Just because you CAN do something doesnāt mean you SHOULD.
as the conversation went in a good manner, I would like to give two more example to make even more clear about it:
The following is the example of companies list on a yellow page site.
I will write only html, css should be used to make proper float and everything:
<div>
<span>3</span>
<img src="example.png" />
<h3><a href="#">Company name Ltd</a></h3>
<p><span>company address 2, 34334 city</span><br />
Company intro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
at velit ut ante fermentum hendrerit. Phasellus quis eros ne</p>
</div>
<div>
<span>4</span>
<img src="example.png" />
<h3><a href="#">Company name Ltd</a></h3>
<p><span>company address 2, 34334 city</span><br />
Company intro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
at velit ut ante fermentum hendrerit. Phasellus quis eros ne</p>
</div>
...
I used here divs instead of li. Anyway this is kind of list, companies list so also li would be appropriate, if not mix block and inline? I put address and intro together to <p> and <span> inside it, is that semantically correctly?
Example 2:
<div>
<p class="from">From</p>
<p class="subject">Subject</p>
<p class="date">Date</p>
</div>
<div>
<img src="" class="profileImg">
<p><a href="">John Piterson</a></p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at velit ut
ante fermentum.</h3>
<p>2011-02-19 16:18:23<br />read</p>
<input type="checkbox" />
</div>
<div>
<img src="" class="profileImg">
<p><a href="">John Piterson</a></p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at velit ut
ante fermentum.</h3>
<p>2011-02-19 16:18:23<br />read</p>
<input type="checkbox" />
</div>
...
I used p tags for From,Subject and Date. Or should I used span instead of p?
There are a number of wrongs with the above, but the main part about Example 2 is that you should use aā¦ table!
Now, Example 1 would be lists also, in my opinion. Semantics is not about what the text stands for (address or intro), but what it is for. You donāt question ādo address and intro mix?ā, since the browser doesnāt care what you write about, you question like in grammar classes: what this represents: a heading, a paragraph, a phrase element, a tabular data (table), a list etcetera. And use the appropriate element for that bit of your web page.
OK I shoudl have corrected all semanticsā¦ but I am sleepy
anyway,
what I mean as āyour sentenceā was this: <a href=ā#ā>First name</a><strong>Message title lorem ipsum</strong><span>12.02.2010</span>
correcting your sentence semantics:
<a href=ā#ā>First name</a><span class=āboldedā>Message title lorem ipsum</span><span>12.02.2010</span>
so that means you could see it a a SINGLE complete sentence in which the A and the spans are partial phrases. Anywayā¦
<p><a href=ā#ā>First name</a><span class=āboldedā>Message title lorem ipsum</span><span>12.02.2010</span></p> would then make sense
but since it goes in a list:<li><p><a href=ā#ā>First name</a><span class=āboldedā>Message title lorem ipsum</span><span>12.02.2010</span></p><li>
but then u see that the P in that case is redundant
<li><a href=ā#ā>First name</a><span class=āboldedā>Message title lorem ipsum</span><span>12.02.2010</span><li>
but if you were going to have ANOTHER sentence/paragraph within the LI then you would need the P around bothā¦ see
I hope I have cleard my previous pointā¦ as far as grammar is concerned dont thinkof it as a REAL english or any language sentenceā¦ thing of iut as teh structure of the senteceā¦
Both of those are pretty bad ā the first one theyāre all numbered, which might be enough to make me backtrack on my previous statements as that STARTS to look like something that should be in a OL. ONe thing Iām certain of is that stuff in the span is NOT part of the sentence/paragraph that follows, so it should NOT be in the paragraph with a BR, if anything it should be in the HEADING tag as it is part of the HEADING.
The latter one though as noonnope pointed out is really just wrong. Column headings with rows that are obvious records means that semantically that is TABULAR DATA, so get that into the SEMANTICALLY CORRECT tags, a TABLE. NONE of the text present are gramattically paragraphs so WHY are you using paragraph tags around them?!? Much less the H3 that frankly, isnāt being used as a section heading so a heading tag is semantically incorrect TOO!
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
<th class="check"></th>
</tr>
</thead><tbody>
<tr>
<td>
<img src="" class="profileImg">
<a href="">John Piterson</a>
</td><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at velit ut ante fermentum.
</td><td>
2011-02-19 16:18:23<br />
read
</td><td class="check">
<input type="checkbox" />
</td>
</tr><tr>
<td>
<img src="" class="profileImg">
<a href="">John Piterson</a>
</td><td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at velit ut ante fermentum.
</td><td>
2011-02-19 16:18:23<br />
read
</td><td class="check">
<input type="checkbox" />
</td>
</tr>
...
Do not use non-table tags on OBVIOUSLY TABULAR DATA! When you have rows and columns where the columns are all the same type of data as specified by their header, thatās TABULAR data. Thatās what THEAD and TH are for, with TBODY specifying the start of your DATA.
deathshadow60 thank you for explanation. I understand now, excepting again about pharagraph. Letās say it is ok to not use table in this case (I know I should it, but just for example). What would be in this case those pharagraphs if not pharagraph?
If you look even w3.org use p for such thing p tag. If you scroll down the index page to the events, you will see:
Think Mobile First, Then Enhance
by Karl Dubost
Confoo 2011
Montreal, Canada
They use for each line a new pharagraph. by Karl Dubost seems to me as much pharagraph as things I put into pharagraph in my example.
deathshadow60 thank you for explanation. I understand now, excepting again about pharagraph. Letās say it is ok to not use table in this case (I know I should it, but just for example). What would be in this case those pharagraphs if not pharagraph?
If you look even w3.org use p for such thing p tag. If you scroll down the index page to the events, you will see:
Think Mobile First, Then Enhance
by Karl Dubost
Confoo 2011
Montreal, Canada
They use for each line a new pharagraph. by Karl Dubost seems to me as much pharagraph as things I put into pharagraph in my example.
Even the people writing the website at the W3C often fail to grasp their own rules ā though with semantics the poorly written legalese of the specification does NOT help matters any.
My question would be, what makes an incomplete sentence fragment a paragraph or even need an extra block-level container around each and every lineā¦ NOTHING. Frankly, there is no reason for those even to have tags around them.
It doesnāt help when you look at the code and immediately realize that whoever wrote the W3Cās home page failed to grasp even the simplest concepts of HTML and CSSā¦ For example:
<ul class="hentry_list">
<li class="hentry">
<p class="entry-title">
<a href="http://www.w3.org/QA/2011/02/do_not_track_at_w3c.html" class="uri url" rel="bookmark">Do Not Track at W3C</a>
</p>
<p class="date">
<abbr title="2011-02-24" class="published">24 February 2011</abbr> by <span class="author vcard">
<a class="fn url" href="http://log.does-not-exist.info/">Thomas Roessler</a>
</span>
</p>
</li>
<li class="hentry">
<p class="entry-title">
<a href="http://www.w3.org/QA/2011/02/w3c_technologies_for_mobile_we.html" class="uri url" rel="bookmark">W3C Technologies for Mobile Web Applications</a>
</p>
<p class="date">
<abbr title="2011-02-24" class="published">24 February 2011</abbr> by <span class="author vcard">
<a class="fn url" href="http://www.w3.org/People/Dom/">Dominique Hazaël-Massieux</a>
</span>
</p>
</li>
Even if you agree to make that a list (I wouldnāt) itās got a perfectly good class on the UL what the blue blazes is it WASTING code putting classes on the LI. If every child element is getting the same class, they donāt need classes in the first place!!!
From there you have the microformat nonsense around the date (adding ZERO useful information BTW), a span around the second anchor for no good reason, vague/meaningless classes like āfnā, pointless classes like āurlā (an anchor is a url?!? Whoād have thought?)ā¦ The paragraphs around elements that are NOT PARAGRAPHSā¦ The list of ineptitude and/or ignorance goes on and on.
This is apparent in the page failing the litmus test for good HTML coding; it has 29k of markup to deliver 4.7k of plaintext; basically THREE TIMES the size HTML file that should be used for such a simple layout ā and thatās AFTER they whitespace strip it with no comments?!?
Or that the layout is broken on large font/120dpi systems as they failed to grasp when to use px, when to use %/em, and that fixed height backgrounds on dynamic content is a miserable /FAIL/ at web development.
ā¦ and weāre talking the website of the group thatās supposed to be setting the standards? So much for leading by example!
noonnope and deathshadow60, please give me some examples of sites you coded please, so I will have at least some sites that I can use it for learning a proper coding and to see proper css in action. I really ment it, it is not sarcasm. I like to learn from real cases.
Well, right now my most recent I can publicly share (Iāve got one client thatās a government agency which doesnāt like me to say I work for them) are my own crappy little project pages:
Both of these use very solid coding techniques which is why the first one ranks #2 behind the official site for the product on most relevant searchesā¦ despite having nowhere near the legacy presence or link juice. With one simple marketing push (if I had any reason to put the effort in ā like a revenue stream for it) I could easily push them out of the top slot.
The latter one has been mostly an experimental page for wild theme ideas (like the current ugly green retrocomputing one) and testing things like REAL accessibility menus. (hit shift-esc in opera to see what I mean).
ā¦ and there are two clients I can list from before I āretiredā from doing jobs for the public. Home - Publish or Perish
Simple page, uses a mcSwitchy type script (I call it quickSwitchy since it lets CSS do the real grunt work) to vary the width and number of columns, the CMS is simple enough theyāre able to maintain/modify it without handholding (important for the ātrainingā page), contact form has transparent fall-through server side so the validation script behavior is near identical when scripting is off, itās just āfasterā when scripting is presentā¦
Thereās also a client who I did the base template and CMS, (his color choices) though theyāve screwed with it a lot itās still pretty solid. http://www.topgamez.net/
In fact, all of those sites use my private from-scratch CMS under the hood.
But to give it some perspective, my biggest client I did BEFORE I learned all these semantics and modern coding techniques ā or that āgee aināt it neatā scripted nonsense is more headaches than itās worth ā Iāll give you an example of BAD work by me before I learned all this stuff:
To show that we all start somewhere. That page is BAD, but I wrote it seven or eight years ago. I was talked into the stupid news popups when I should have put my foot down, it relies on tables for nothing across the ENTIRE page, uses WAY too many separate files for things, uses javascript (and a really outdated one) to change the location bar (something that should have been handled server-side), and is chock full of some of the most non-semantic markup out there ā Thankfully it has content of value letting all those sins slide; hence itās top ranking on the search engines for relevant subjects. (something said companies newer efforts using turdpress cannot claim and are unlikely to ever manage ā especially with all the endless redirects and URL games they play)
BTW ā if your own work from just a year or two ago doesnāt disgust you, youāre in the wrong business
Though a common issue many of us face is that by the time the client has maintained a site by themselves for a while you often wish you werenāt associated with them.
One site that would have been REALLY good to point you at would have been CUTCODEDOWN.COM - Minimalist Semantic Markup Development, but that project is on hold indefinitely (hence the placeholder) as the person I was creating that new website with passed away; and without his drive the whole project has stagnated.
Though feel free to look through the directory of rewrites Iāve done for people here and on digital point: Index of /for_others
Some of thatās just small snippets to answer questions ā some of it are total from the ground rewrites of what people were trying to do. A lot of times the best answer to āwhatās wrong with my siteā on a forums is āthrow it out and start overā ā when itās a nube I often like to give them a well documented rewrite of one page to give them a head-start and to show all the advantages of doing things with semantics and separation of presentation from content.
ā¦ and the WIP tutorials directory (which has some web rot, not really meant for public presentation yet) that was going to build the core of cutcodedown.com Index of /html_tutorials
I AM planning on launching a new modern site at deathshadow.com that will make use of all the new techniques Iāve put together over the past year (which is how long itās been since I launched anything new) ā this site will be used to promote my new hobby; writing new DOS games that will run on the original IBM PC 5150/5160 (assuming they have at least 128 megs of RAM)ā¦ As I switched to doing that out of disgust of dealing with people not caring about doing websites properly or even TRYING to be anything more than sleazy scam artists.
One of the advantages to being officially retired, I can work on whatever the hell I feel like now instead of catering to the whims of people who always made me feel like screaming āIf you think you know so damned much about it, what the blue blazes did you hire me forāā¦
Itās made me a lot more mellow than I used to be. Yes, this is me MELLOW. I used to be much more arrogant and self-important.
) is to structure and tag your content, using proper elements.
