FAQ Database Discussion Community


Should a heading “Navigation” be above a following

html,html5,accessibility,semantic-markup
What is better: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> </ul> </nav> Is there any significant difference?...

How to handle headers in HTML5

html5,header,semantic-markup,figure
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>...

Unwanted Space Between
and

html,css,html5,whitespace,semantic-markup
I have the following HTML5 code: <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> body { max-width: 960px; margin: 0 auto; font-size: 120%; } header, nav { margin: 0; padding: 0; border: 1px solid black; } header { border-color: red; } img.mainpicture { width: 100%; height: auto;...

Which element should I use for short group of foreign langague words?

html,css,html5,semantic-markup
I'm wondering which html element I should use in a sentence or a paragraph (let say a <p> block) for a borrowed word or one in a foreign language, refering to a valid semantic. Here a few examples : In English Tonight, I have a rendez-vous with a cute girl....

Does the order of appearance of a

html,html5,semantic-markup
On a page I'm working on, I noticed the following pattern: <section> <header>Article Headline</header> <footer> <!-- publication date and author go here --> </footer> <article> <!-- article content goes here --> </article> </section> At first glance, I was a bit surprised by the appearance of the <footer> element before the...

Which Schema.org property should I use for related articles, quizzes, stories? [closed]

html5,semantic-markup,schema.org,microdata
So there is a quiz & stories website, and on the right or bottom side of the screen (while you taking a quiz or read a story) there should be some lists of SIMILAR items, so the user can jump around at any time. Examples, for story reader section (similar...

Is it appropriate to wrap each navigation element in a div?

html,css,html5,semantic-markup
I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there...

2 column table or definition list for semantically correct HTML?

html,html5,html-table,semantic-markup
I frequently have to display a series of name-value pairs, as I'm sure most web developers face. Typically in the form of properties. What is the semantically correct HTML way to do this? <table> <tbody> <tr> <td>Name</td><td>Jimmy</td> <td>Age</td><td>33</td> <td>Gender</td><td>Male</td> </tr> </tbody> </table> or <dl> <dt>Name</dt><dd>Jimmy</dd> <dt>Age</dt><dd>33</dd>...

Heading order in HTML5

html5,seo,semantic-markup
This is a webpage example of my site: <html> <title> artilce header </title> <body> <header> <h1> nme of website</h1></header> <section> <h2> name of section</h2> <article> <h3>article header</h3> </article> </section> </body> </html> I want to know if this order is correct? Or does it maybe have a bad effect on SEO?...

Semantic markup of navigation and search area

html5,nav,semantic-markup
I'm trying to learn semantic HTML5 markup by converting a simple site I once made for an old magazine. Now I've come to the navigation and search area. You should be able to select a specific article to read or search within the database. There are two tabs and when...

Semantic markup of multiple articles inside article with preambles/postscript

html5,semantic-markup,article
As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this: <div id="article"> <h1>Main...

Correct HTML5 mark-up for floating logo, slogan and 2 navs

html5,semantic-markup
I'm having difficulty understanding the recommended method for using sections, navs, headers and floating div containers in unison. I have a network-wide nav followed by a site-wide nav, just like this Stack Overflow website. Based on the following code... <header> <!--Navigation menu for network:--> <section> <nav> <a href="#">Link</a> <a href="#">Link</a>...

HTML5 Semantic Elements Nesting with Boostrap

html5,twitter-bootstrap-3,semantic-markup
I have an article template in which I want the title to run the full width of the page (12 cols), and then the text itself to fall in below with an adjacent sidebar (8 and 4 cols respectively). The problem is that I can't get the sidebar to nest...