semantic-markup | 易学教程

What tag should be used for a logo element if the logo is text?

阅读更多关于 What tag should be used for a logo element if the logo is text?

问题 I have read that an <h1> tag is inappropriate for a logo. But if your logo is plain text, what should you use? I feel like <p> and <span> are also unsuitable. Here's a sample: <header> <nav> <a id="logo" href="."> <span>Company Name</span> </a> <a id="linkOne" href="#thingOne"> <img src="…"> </a> <a id="linkTwo" href="#thingTwo"> <img src="…"> </a> <a id="linkThree" href="#thingThree"> <img src="…"> </a> </nav> </header> Thanks! 回答1: Given your markup example, you seem to ask about a link in

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. 回答1: 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

How to use <section> and <article> tags in HTML5?

阅读更多关于 How to use and tags in HTML5?

问题 I just confused how to use <article> and <section> tags in HTML5. I referenced lot in Google and also in Stack Overflow website. On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements. I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements. What is the exact use of these tags? 回答1: It depends on your content. For example, a list of recent

HTML5: should hreflang always point to a direct translation?

阅读更多关于 HTML5: should hreflang always point to a direct translation?

问题 This is a good practice to place this kind of links in head for multilanguage sites: <head> <link rel="alternate" hreflang="en" href="/en"> </head> But, according to an answer to the question Semantic markup for language switcher, language switcher should look something like: <nav> <h1>Translations of this page</h1>  <ul> <li>English</li>  <li><a rel="alternate" href="/pl" hreflang="pl" lang="pl"

HTML5 Event Listing Semantics

阅读更多关于 HTML5 Event Listing Semantics

问题 Would it be correct to list each event as an <article> on an event listing page (given that each event is a listing from the detail page of said event. Should it be considered the same thing as blog (semantically). Also should there be any consideration of the event date/time when it comes to markup. Any referenced reading are welcome, I couldn't find any particulars! <main> <article>Event 1 on date given</article> <article>Event 2 on date given</article> <article>Event 3 on date given<

How to handle headers in HTML5

阅读更多关于 How to handle headers in HTML5

问题 I need to migrate a website for an old magazine to HTML5 and I have some semantic problems. I have created the following outline to illustrate the main layout. There's a fiddle here. <div id="wrapper"> <header> </header> <nav> </nav> <main> <p><i>Name of Magazine</i>, 1985, 4, p. 12-14</p> <article> <header> <h1>Heading</h1> <p>Subheading</p> </header> <figure> <img ...> <figcaption> Caption. </figcaption> </figure> <p>First paragraph of article text.</p> </article> </main> </div> Above the

Right usage of the <header> tag in HTML5

阅读更多关于 Right usage of the tag in HTML5

问题 I have read that the tag is the header of a section. It could be used more then 1 time in the document. Should I use the <header> tag in the section: <section> <header> </header> </section> or above the <section> like: <header> </header> <section> </section> Is it possible to have this sctucture for heading information and the sections: <section id="main"> <header id="results"> <h1>My Results</h1> </header> <section id="results"> <section id="result1"> <h2>Title</h2> <div class="body"></div>

Semantic way to select current or active links in navigation menu

阅读更多关于 Semantic way to select current or active links in navigation menu

问题 Currently the most common way to identify the current link is adding a class to the anchor or its parent: <li class="active"><a href="/">Home</a></li> This technique has a couple of drawbacks: Adding the class is often delegated to server languages and it means an extra work just for presentation. Even though there is a convention around the active class name, it's a stupid selector and doesn't seem to be semantically correct. I tried the following with no success: I looked for something like

Adding a toolbar to a table following HTML semantics

阅读更多关于 Adding a toolbar to a table following HTML semantics

问题 I have a basic HTML table like so: <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> I want to add a toolbar above it. Would it be semantically acceptable to add a toolbar as a row in the thead ? <table> <thead> <tr> <th colspan="2">  </th> </tr> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> 回答1: IMHO, since the toolbar is related to the tabular data, I see

What is the correct HTML tag to emphasize a sentence or a section?

阅读更多关于 What is the correct HTML tag to emphasize a sentence or a section?

问题 I realized that I was using blockquote throughout my HTML to emphasize paragraphs that have to be learned by my students – which is obviously wrong, since the blockquote is meant to specify a section that is quoted from another source. In my case (mathematics), the paragraph(s) define(s) or describe(s) a word and should stand out visually. After some research, I found the em tag which "marks text that has stress emphasis", however, it seems to be designed for single words or a group of words,