One of the benefits of HTML 5 are semantic tags like <header>, <nav> and <main>.
Unfortunately, I haven't found a way to style them so the <nav> goes down the left of the page, not without a parent <div>, anyhow. It seems to me that such a <div> messes up the semantics, and I'm not sure it's technically valid HTML.
<header>My Page</header>
<div class="nav-main"> <!-- I don't like this -->
<nav>
Foo
Bar
</nav>
<main>
<h1>My Main Content</h1>
<p>Blah.</p>
</main>
</div>
<footer>ⓒ Not really copyright</footer>
The CSS:
div.nav-main {
display: flex;
}
nav {
width: 10em;
}
nav a {
display: block;
}
Is there a clean way to do it, without the <div>?
I don't think an old-school float: left is a solution, because I don't want the <main> to wrap around the <nav> if it's taller, and I don't want to add arbitrary heights or other hacks. I just want the <main> and <nav> to both be their natural heights and have consistent widths, and for the <footer> to be underneath both.
Otherwise, if somebody can cite assurance that wrapping <nav> and <main> in a <div> is okay, I'll just thank you and move along… although it still doesn't look very elegant to me.
So a <div> is a non-semantic element, so you technically have valid html here. But I understand not wanting divs everywhere. You could potentially put flex on the body, set the width of the header and footer to 100% so they would be on their own line. So it'd be
body
{
display:flex;
flex-flow: row wrap;
}
header, footer
{
width:100%
}
Hopes this helps!
You're trying too hard to achieve minimalist markup. What you have there is extremely simple compared to almost any website. If it works to have a couple div elements for layout, there's no issue.
The key is that relevant content is contained in your semantic elements, not that you only use semantic elements. If you're doing any sort of modern, flexible, responsive layout it can't be avoided.
I still haven't found 'official' (W3C) word about whether a <div> can be a legal parent for a <nav> or <main>, but I do trust Mozilla's web docs. They state that:
<nav> can have '[a]ny element that accepts flow content' as a parent, and
<main>'s parent can be any element '[w]here flow content is expected, but only if it is a hierarchically correct main element'.
So in this example, the <div> is fine.
Related
A question about HTML5 markup. Which is correct?
<header class="wrapper">
<div class="wrapper-inner">
</div>
</header>
-OR-
<div class="wrapper">
<header class="wrapper-inner">
</header>
</div>
.wrapper { width: 100%; }
.wrapper-inner { width: 980px; margin: 0 auto; }
Leaving attributes (like lang) aside, you can ignore div and span elements, as they are meaningless. So (apart from the different classes) your examples are semantically equivalent.
Assuming that the .wrapper element won’t contain anything else than the .wrapper-inner element, it’s up to you which one to use for which.
A possible benefit of using <header><div></div></header> over <div><header></header></div> could be that it might be easier for markup authors to spot the header in the document, as authors wouldn’t have to "enter" the div element to check what it contains and what it’s used for.
Either is correct.
If you want to use as a sectioning element for the page, then, you likely want:
<header class="page-header">
<div class="page-header-subsection">
</div>
</header>
If you want to use as a sectioning element for a sub-section of the page, then, you likely want:
<section class="author-biography">
<header class="author-name-and-thumbnail">
</header>
</section>
I'm having a problem. In the following markup, there's an aside-element which contains additional information for the user which I would like to display as shown in the attached picture (right floated).
<section>
<h2>site title</h2>
<p>that's the site's main content</p>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
However, I don't want to place the aside-element before the h2-element and just right-float it. I know this would work, but somehow it would seem wrong to me. One could say, that the search-engines know that it's lesser-important content, since it's contained in an aside-element.
But I would also like the aside-element behave, that when the page's width is smallered (e.g. smaller devices), the aside element stays BELOW the main content.
So my question is: Is there any possibility to float the aside-element as shown in the picture, without manipulating the markup-order (adding helping div's is okay, i guess).
Thanks already, looking forward.
You need to wrap your main content in a div, and then add float: left to both the main div and your aside element. Then, just use the margin property to space them appropriately.
HTML
<section>
<div class="main">
<h2>site title</h2>
<p>that's the site's main content</p>
</div>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
CSS
.main {
float: left;
}
aside {
float: left;
}
See DEMO.
In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.
An example body:
<header>
<div class="center">
<h1>Title</h1>
<nav>
...
</nav>
</div>
</header>
<div>
<section>
...
</section>
</div>
<footer>
<div class="center">
...
</div>
</footer>
.center {
max-width: 70em;
margin: 0 auto;
}
header {
width: 100%
background-color: red;
}
footer {
width: 100%
background-color: green;
}
body > div {
width: 100%
background-color: blue;
}
Is it actually better like this?
<div id="head">
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
</div>
<div>
<section>
...
</section>
</div>
<div id="foot">
<footer>
...
</footer>
</div>
As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.
What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).
Basically, that div elements are not required semantically speaking (maybe you need them for styling?).
div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.
If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.
By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:
In HTML 5 you can specifically mark up all the “secondary” content on
a page such as navigation, branding, copyright notices, so it feels
odd that you can’t specifically mark up the most important part of
your page—the content.
But what would be the purpose of marking it up specifically, anyway?
If you need to style it, use a div. An assistive technlogy like a
screenreader can find the main content because it is the first thing
inside a page that isn’t a header, nav or footer.
With a <div role="main"> you have everything you need.
It'd be better like this:
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
<section>
...
</section>
<footer>
...
</footer>
Or alternatively:
<div class="header">
<h1>Title</h1>
<div class="nav">
...
</div>
</div>
<div class="section">
...
</div>
<div class="footer">
...
</div>
Why are you being told to add those extra wrapper div elements?
Try
<section>
<header> head content </header>
main content
<footer> footer content </footer>
</section>
This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.
I have a div container with a series of p tags. Each p tag will float to the left. I want two p tags per line, so think field/value.
Title: Some Title
Author: Some Author
<div id="container">
<p class="field">Title</p><p>Some Title</p>
<p class="field">Author</p><p>Some Author</p>
</div>
If I set the "field" class to clear: both, I get the desired functionality in most browsers except IE 7 (not worried < 7). However, in IE 7 if the containing div is wide enough, the clear: both seems to be ignored and I'll get something like this:
Title: Some title Author:
Some Author
A couple of thoughts:
I can monitor the width of the containing div so that only two p tags can sit on one line but that seems very brittle.
I can muddy up the markup by placing clearing divs after every two p tags. It would work but makes me feel dirty inside.
How can I overcome this issue?
Use this pattern (span is optional - for additional styling if needed). Lists make more semantic sense than re-purposing the wrong tags. This is a list. :)
<ul>
<li><label>Title</label><span>Some Title</span></li>
...
</ul>
CSS:
ul, li {
padding:0;
margin:0;
list-style-type:none
}
li {
clear:both
}
label {
float:left;
width:150px;
}
http://jsfiddle.net/QUL9v/1/
Using the p tags....
<div id="container">
<p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
<p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>
with css:
.field {
float: left;
}
.clear {
clear: both;
}
This is just sticking to the use of the p tag. Personally, this is how I would accomplish it (http://jsfiddle.net/QUL9v/3/):
<div id="container">
<div class="field">Title</div>
<div class="field">Some Title</div>
<div class="clear"></div>
</div>
<div id="container">
<div class="field">Author</div>
<div class="field">Some Author</div>
<div class="clear"></div>
</div>
The only reason I'm recommending this is because since this is more of a layout issue, it feels more natural to me to use the div as opposed to p element. Also, it will ensure the position of the text, regardless of what you put inside the divs (anchors, forms, tables, etc).
Another thing you should pay attention to is I'm using the clear as the last sibling instead of the first (as in your examples). If you're clearing the front; then its possible that since your trailing elements are floated and inline, you're going to potentially run into errors down the road, especially with IE7. A lot of the times, the floating rule will get passed on to elements you never intended or thought it would be passed to. Clearing at the end ensures that this doesn't happen.
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.