semantic-markup | 易学教程

Correct usage of HTML5 `figure` and `aside`

阅读更多关于 Correct usage of HTML5 `figure` and `aside`

问题 I have a chunk of a page that looks semantically this: Heading A Textual information related to heading A. Blah blah blah blah blah. [image gallery related to heading A] I can think of a couple of ways to mark this up: Method 1: <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <figure> <img /> <figcaption>Image 1</figcaption> <img /> <figcaption>Image 2</figcaption> </figure> </section> Method 2: <section> <h1>Heading A</h1> <p

What is the most semantic way to display a street address in HTML?

阅读更多关于 What is the most semantic way to display a street address in HTML?

问题 I have an address that is going to be displayed on a webpage, but it is not the address for the author of the page. How should this be coded to be semantic given the w3c recommendation of: The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document. 回答1: You could use the hCard Microformat to describe your address. The advantage of Microformats is that you

Is 'en-EU' a valid value for HTML 'lang' attribute?

阅读更多关于 Is 'en-EU' a valid value for HTML 'lang' attribute?

Markup for different editions of my news site... US Edition: <html lang="en-US" xml:lang="en-US"> ... </html> India Edition: <html lang="en-IN" xml:lang="en-IN"> ... </html> Europe Edition (in this case not a specific country, i.e. news covers a broader region): <html lang="en-EU" xml:lang="en-EU"> ... </html> I am depending on the markup of the page to make the target language/region of pages clear to the search engines because the different editions of the news site use a directory-based path (e.g. example.com/eu/ ) rather than a sub-domain ( eu.example.com ) or domain (e.g. example.eu )

HTML time tag for duration

阅读更多关于 HTML time tag for duration

问题 I need to display the duration of a video. Should I use <time> or should it be used only for displaying time as in a clock? Example Is this correct HTML5? <p>Duration: <time>3:30 min</time>.</p> Or should <time> be used only on a situation like this? <p>Good morning. The actual time is: <time>9:45</time></p>. Docs MDN presents the following definition: The HTML element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone

Why <big> is not in HTML 5 Tag list while <small> is?

阅读更多关于 Why is not in HTML 5 Tag list while is?

Shouldn't both be removed? Or does it mean we should use <small> ? Why is <big> removed but <small> is not? What is the problem with <big> which does not apply to <small> ? http://www.w3schools.com/html5/html5_reference.asp Remember, the tags are meant to be semantic, not presentational. There is such a thing in English as "fine print". This is what the small tag represents. There is no analogous concept of "big print" except for a header, which is already covered by seven other tags. <small> is used more frequently, for footnotes and such...with <h1> , <h2> and <h3> there just wasn't a use

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 . × Unicode: U+00D7 MULTIPLICATION SIGN HTML: × , × CSS: \00d7 See the Wikipedia article about the multiplication sign : In mathematics, the symbol × (read as times or

Correct usage of HTML5 `figure` and `aside`

阅读更多关于 Correct usage of HTML5 `figure` and `aside`

I have a chunk of a page that looks semantically this: Heading A Textual information related to heading A. Blah blah blah blah blah. [image gallery related to heading A] I can think of a couple of ways to mark this up: Method 1: <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <figure> <img /> <figcaption>Image 1</figcaption> <img /> <figcaption>Image 2</figcaption> </figure> </section> Method 2: <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <figure> <img />

What is the most semantic way to display a street address in HTML?

阅读更多关于 What is the most semantic way to display a street address in HTML?

I have an address that is going to be displayed on a webpage, but it is not the address for the author of the page. How should this be coded to be semantic given the w3c recommendation of: The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document. You could use the hCard Microformat to describe your address. The advantage of Microformats is that you can use them in your existing documents to enrich them. Here’s an example derived from the example from the

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 of role on ul --> <li><a href="#">link</li> <li><a href="#">link</li> <li><a href="#">link</li> <li><a

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 code and rendered. If I wanted to, for instance, but a border around each pair, that would be a