FAQ Database Discussion Community


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...

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...

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?...

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;...

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...

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>...

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>...

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...

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>...

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?...

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....

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...

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...