semantic-markup | 易学教程

What's the best HTML5 tag to use for marking up blog excerpts?

阅读更多关于 What's the best HTML5 tag to use for marking up blog excerpts?

It's a common pattern for blogs to have archive pages (eg by date or category) which list relevant blog posts, along with excerpts (a paragraph or) and a link. I can't quite work out which of the HTML5 elements it's best to use for the individual posts, however. The <article> tag might seem like a good fit (and certainly would be if you were displaying the whole content), but I'm not sure whether it's appropriate for excerpts. The specification says: The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently

Use of profile attribute in HTML head tag

阅读更多关于 Use of profile attribute in HTML head tag

What is the use of profile attributes in the HTML <head> tag? I happened to read about it in here : http://www.w3schools.com/tags/tag_head.asp . I could not understand this( http://www.w3.org/2002/12/namespace ) either, since it is too technical (for me). I have never used it. What is the purpose it serves? The URI in the profile attribute points to a document containing information regarding metadata. Profiles defines properties that may be used by the HTML meta tag and the HTML link tag . There are no prescribed formats for profiles. The profile attribute is no longer supported in HTML 5.

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" />  </div> The extraneous <br> tag is used strictly to describe style, and is required to make the layout

What is the proper HTML entity for the “x” in a dimension?

阅读更多关于 What is the proper HTML entity for the “x” in a dimension?

问题 Is the proper HTML entity for giving dimensions × ? I want to be semantically correct, but that begs the question, is listing a dimension as 2" x 3" even semantic? If the x represents "by", would I use the letter x or ×? In my code I've been using 2″ × 3″ , or 2″ × 3″. The non-breaking spaces are to prevent the dimension from being wrapped, as per the suggestions found in The Elements of Typographic Style Applied to the Web. 回答1: × Unicode: U+00D7 MULTIPLICATION SIGN HTML: × , × CSS: \00d7

HTML5 nav element vs. role=“navigation”

阅读更多关于 HTML5 nav element vs. role=“navigation”

问题 Do all of the following carry the same semantic meaning? If not please explain your answer. 1. <nav> <ul> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> </ul> </nav> 2. <div role="navigation"> <ul> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> </ul> </div> 3. <ul role="navigation"> <! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics navigation is not an allowed value

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"></aside> <aside id="widget_1"></aside > <aside id="widget_1"></aside > </div> I suppose the auxiliary

Semantics and Structure of Name-Value Pairs

阅读更多关于 Semantics and Structure of Name-Value Pairs

问题 This is a question I have been struggling with for a while. What is the proper way to mark up name/value pairs? I'm fond of the <dl> element, but it presents a problem: There is no way to separate one pair from another - they have no unique container. Visually, the code lacks definition. Semantically, though, I think this is the correct markup. <dl> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> </dl> In the above code, it is difficult to properly offset the pairs visually, both in

Span inside anchor or anchor inside span or doesn't matter?

阅读更多关于 Span inside anchor or anchor inside span or doesn't matter?

I want to nest span and a tags. Should I Put <span> inside <a> Put <a> inside <span> It doesn't matter ? 3 - It doesn't matter. BUT, I tend to only use a <span> inside an <a> if it's only for a part of the contents of the tag i.e. <a href="#">some <span class="red">text</span></a> Rather than: <a href="#"><span class="red">some text</span></a> Which should obviously just be: <a href="#" class="red">some text</a> It is perfectly valid (at least by HTML 4.01 and XHTML 1.0 standards) to nest either a <span> inside an <a> or an <a> inside a <span> . Just to prove it to yourself, you can always

Should I use 'li' or 'article' for products listing?

阅读更多关于 Should I use 'li' or 'article' for products listing?

I made some research and didn’t find an appropriate answer. I’m wondering if it’s better to keep using li elements for a products listing or maybe switch to the article element? Every product list contains 1 main image, name and price. From how you describe the product listing (image + name + price), it doesn't seem to fit the description of an article in HTML5 : The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. Ask yourself: Will that content be independent from the rest of

What support does HTML5 provide for semantic markup and Semantic Web technologies?

阅读更多关于 What support does HTML5 provide for semantic markup and Semantic Web technologies?

It seems that, as of right now, there is little to no support in HTML5 for semantic markup using RDFa or Microformats. I've done a little bit of reading, but if I were to start using HTML5 right now, what could I do to support semantic markup (such as microformats) and Semantic Web technologies (such as RDFa)? If I want to utilize these technologies now, should I stick with XHTML? (Some years have passed …) For semantically annotating your content in HTML5 documents, you can use Microdata, Microformats, and/or RDFa: Microdata is an extension to HTML5, but now merely a W3C Working Group Note (