semantic-markup

问题 How should I mark up a list of users? Each user has a name, picture, and job title. How's this? <h1>Venmo</h1> <h2>Employees</h2> <ul> <li> <article> <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b"> <h3>Matt Di Pasquale</h3> <p>Software Engineer</p> </article> </li> <!-- ... --> </ul> Should I remove the article elements? Should I remove the ul & li elements? 回答1: This isn't so much a list of users as a table of data about the users. Each user has an image, a name

问题 I am referring to the usage a table for showing tabular data, eg: a spreadsheet, focusing on numbers , that I feel and see in UX that should be right aligned, properly formatted (with same number of decimals) to facilitate sums. For numbers this looks like a borderline case between semantics and formatting, for other kind of data types like dates choosing an alignment is more arbitrary. I of course agree in using css when possible but css is not always supported or enabled and I see reasons

问题 I've read this and I GENERALLY use spans or strongs to describe "text-labels". Is this true for best practices? It seems is also a semantic way but why is it limited to just form elements? What if I wanted to display information as this: Name: FOo Bar Age: 27 Weight: 151 kg etc? name, age, and weight can all be described as labels, but since the items they're describing aren't input tags, it isn't semantically correct(for html and w3c at least). I usually use <span class="label"> or <span

问题 I have a piece of code like this: <figure> <img title="An amazing image that I forgot to specify a url for"/> <figcaption>An amazing image that I forgot to specify a url for</figcaption> </figure> Is it necessary for me to specify the title attribute in addition to the figcaption element, and will not doing so result in SEO problems? 回答1: Title attribute is mainly for providing a tooltip about what is that image or link about. Usually a the target's title. In the images, using figcaption

问题 Say I have the given table: +------+------+------+ | Col1 | Col2 | Col3 | +------+------+------+------+ | Row1 | D1.1 | D1.2 | D1.3 | +------+------+------+------+ | Row2 | D2.1 | D2.2 | D2.3 | +------+------+------+------+ | Row3 | D3.1 | D3.2 | D3.3 | +------+------+------+------+ And I want to represent it in HTML5. The tricky thing is that tables like this must be semantically important, but the top-left cell is not semantically important, but instead a spacer to line up the more

问题 It's very common to see the usage of the tag <nav> in a main menu navigation, but I don't know other examples where I can use it. For example, for pagination: <div class='my-pagination'> <!-- first, 2, 3, 4 ... 8, 9, last --> </div> Can be: <nav class='my-pagination'> <!-- first, 2, 3, 4 ... 8, 9, last --> </nav> Is it semantic? 回答1: Yes. The HTML5 spec defines the nav element like this: The nav element represents a section of a page that links to other pages or to parts within the page: a

问题 What are people's opinions on semantic HTML for confirmation, error and warnings messages? Currently I have something simple like: <div class="message message-warning"> <h3>Message Title</h3> <p>Message text</p> </div> Whereby the message-warning class gets replaced by message-confirmation or message-error if the message is a different type. Is there a more semantic way of marking this up? 回答1: May I suggest <figure> ? Excerpt from HTML5 Doctor (and they, from W3C): The figure element

问题 The DOA ( or more appropriately, Dead Before Arrival ) XHTML2 working standard indicates support for the <di> tag. [...] The term and its definition can be grouped within a di element to help clarify the relationship between a term and its definition(s). To clarify, this tag would be used to group <dt> and <dd> tags together under a <dl> : <dl> <di> <dt>defenestrate</dt> <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd> <dd>what I will do if web standards keep going they

问题 In the following example html5 page structure, which of the following is more semantic in respect to the sidebar of widgets (elements which appear in the sidebar are elements which appear on multiple pages and do not necessarily, directly, nor particularly relate to this page of content): <body> <header id="site-header"> ... </header> <section id="page-body"> <main> <header></header> <article></article> <footer></footer> </main> <aside class="sidebar" id="sidebar-a"> <section id="search

问题 In a project I need to make headings like this and I want to use with less image and markup because Texture will be the same but Gradient are different in different sections. I have 3 things in heading. Heading text A texture over the gradient and under the heading text A gradient behind the texture like this in a combined form I'm only considering Web-Kit based browsers. I can make gradient with CSS. I can put heading text and can add shadow in css. I want to make this thing without using