semantic-markup | 易学教程

<b> vs <span> in HTML5

阅读更多关于 vs in HTML5

问题 I've been having difficulty deciding when to use b and when to use span. The new semantics of the b element seem vague. The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood It sounds like that tag you use when you can't use strong, em, or i. The b element should be used as a last resort when no other element is more appropriate. But we've already got span

How to semantically tag poem text?

阅读更多关于 How to semantically tag poem text?

What to use for poem? pre blockquote code something else? unor Don't use code (unless computer code is part of the poem). Don't use blockquote (unless you quote a poem). white space / line breaks: pre or br You may use the pre element . The spec gives an (informative) example: The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself. <pre> maxling it is with a heart heavy that i admit loss of a feline so loved a friend lost to the unknown (night) ~cdr 11dec07</pre> However, I'd only use the pre

How to semantically provide a caption, title or label for a list in HTML

阅读更多关于 How to semantically provide a caption, title or label for a list in HTML

What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption". Fruit Apple Pear Orange How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself? ahsteele While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions: Nested List <ul> <li> Fruit <ul> <li>Apple</li> <li>Pear</li> <li>Organge</li> </ul> </li> </ul> Heading Prior to List <hX>Fruit</hX> <ul> <li>Apple</li> <li>Pear</li> <li>Orange</li> </ul>

The correct approach to markup “keywords” of a blog post by using HTML5 and Microdata?

阅读更多关于 The correct approach to markup “keywords” of a blog post by using HTML5 and Microdata?

问题 The keywords property from Schema.org, as it being in plural form suggests, seems to imply its value should be a line of comma-separated text . Like the following example: <p itemprop="keywords">lorem, ipsum, dolor, sit, amet</p> That reminds me of the <meta name="keywords" content="lorem, ipsum, dolor, sit, amet"> tag we used to put within <head></head> for SEO reason. However, from semantics' perspective, I think the above example is incorrect because keywords should be a list of words .

Is it good to put a inside an empty <td>?

阅读更多关于 Is it good to put a inside an empty ?

问题 If this is the structure: <table cellspacing="0" cellpadding="0"> <tr> <td>I don't need anything here, should I always put a here?</td> <td>item </td> </tr> <tr> <td>model</td> <td>one</td> </tr> <tr> <td>model</td> <td>two</td> </tr> <tr> <td>model</td> <td>three</td> </tr> </table> How will a screen reader read a blank td ? Is it semantically correct? 回答1: Semantically correct IMHO would be to keep an empty cell really empty. However, I, too, fill empty cells with s for pragmatic

HTML 5 Page without main <header>?

阅读更多关于 HTML 5 Page without main ?

Is it bad to nave no <header> ? I have this basic structure but I am thinking about wrapping a header arround everything between the body start and the content because the header has also this nice shema.org markup attached. Good Idea? Just because sometimes the header is not there but the navbars actually contain the brandname and are sort of headers themseves. if I do this how should I markup whats the <header> right now? A section inside a header is not valid right? Just a normal <div> I guess. <body> <div class="nav1"><h1>brandname</h1><nav>...</nav></div> <header><h1>brandname</h1><p

What is the benefit of tableless design if you need clearing blocks everywhere?

阅读更多关于 What is the benefit of tableless design if you need clearing blocks everywhere?

问题 I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic. However, I don't understand the benefit gained if you still need a clearing block to make column-based layouts work. For example:  <div class="contact"> <div class="personal-info"> <p> Shawn, etc, etc </p> </div> <div class="location-info"> <p><address>etc</address></p> </div> <br style="clear:both" />

Is it correct to use DIV inside FORM?

阅读更多关于 Is it correct to use DIV inside FORM?

I'm just wondering what are you thinking about DIV-tag inside FORM-tag? I need something like this: <form> <input type="text"/> <div> some </div> <div> another </div> <input type="text" /> </form> Is it general practice to use DIV inside FORM or I need something different? It is totally fine . The form will submit only its input type controls ( *also Textarea , Select , etc...). You have nothing to worry about a div within a form . It is completely acceptable to use a DIV inside a <form> tag. If you look at the default CSS 2.1 stylesheet , div and p are both in the display: block category.

Is it ok to use <strong> in place of <b> blindly?

阅读更多关于 Is it ok to use in place of blindly?

Note: I know <b> is presentational and <span style="font-weight:bold> is a better way, and <strong> and <em> are for emphasis but my question is not regarding this. Should we convert every <b> to <strong> blindly? Many people do this, they think <b> is not good as per web standards so they convert every <b> to <strong> upon site redesign, content re-population, new site design and people suggest this to others also. Dreamweaver has also given the option to convert all <b> and <i> to <strong> and <em> on code paste in design view and when we use B and I Which people use blindly. alt text http:/

Best HTML5 markup for sidebar

阅读更多关于 Best HTML5 markup for sidebar

问题 I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widget and after_widget right. So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article> element. Option 1: Aside with sections <aside id="sidebar"> <section id="widget_1"></section> <section id="widget_2"></section> <section id="widget_3"></section> </aside> Option 2: Div with Asides <div id="sidebar"> <aside id="widget_1"><