Im writing a markup for Corpora - A Business Theme
And have divided it into main sections in this way:
<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>
</div>
<footer>
<div class="roof"></div>
<div class="credit"></div>
</footer>
Is that okay to name different sections of the page with the same class name .roof?
[Edit]
So, considering my .roof's have different styling I have to write
<header>
<div class="roofHeader"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roofContent"></div>
<aside></aside>
<div class="main"></div>
</div>
<footer>
<div class="roofFooter"></div>
<div class="credit"></div>
</footer>
?
No issues naming different section with same Name like in your example(roof) until you want them to style them the same way or make them look the same way .
for example
<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>
IN the above code the div in the header section will look exactly the same as a div in the content section .
To add more into this - If you are writing a markup for a theme - The best practice would be to -
write global style classes
section specific style classes
for example :-
Section specific styling
.header{
width:100%;
font-family:Ariel;
font-size:12px;
}
Global styling
.float-right{
float:right;
}
Now the .header class will be used specific for the header section .And it will provide us with maximun control to change anything in there and wont effect other section until and unless we use it somewhere else in our markup .
The .float-right class can be used anywhere in the html divs or section which you want to floated to the right side .
Semantically it's totally fine.
For 2 or more sections, if you want to apply same Style sheets, then all the sections can have the same class name and style sheets can be defined for that particular class.
For example
.className{ property:value; }
Related
I have a main layout page with a menu bar on the left displaying links to other pages. I'm trying to include a partial under that menubar on the left ONLY when the user is on a specific page within that layout.
Here is another question that is asking for pretty much the same thing.
The problem with that question is the answers are over five years old, and the outdated <% %> syntax isn't working in my website.
Is there a way to do the same thing while still using the regular #Html.Partial syntax?
In your page layout, where you want to include your side bar:
<div id="header">
</div>
#RenderSection("Sidebar", false)
<div id="content">
#RenderBody()
</div>
<div id="footer">
</div>
false means it is not a required section, so pages that don't need don't need to include it.
now to display the section, simply add it to the bottom of the page that needs it displayed, other pages within the same layout will not display this section:
<h2>This is a page</h2>
#section Sidebar {
<div id="sidebar">
your sidebar....
</div>
}
Your full html will display something like this with a sidebar:
<div id="header">
</div>
<div id="sidebar">
your sidebar....
</div>
<div id="content">
<h2>This is a page</h2>
</div>
<div id="footer">
</div>
and other pages will simply be:
<div id="header">
</div>
<div id="content">
<h2>This is another page</h2>
</div>
<div id="footer">
</div>
Is correct (semantically) wrapping <header> and <nav> tags to share in the background
example
<div id="background">
<header> <!-- ... --> </header>
<nav> <!-- ... --> </nav>
</div>
It is absolutely correct.
You could have the header and nav nested, or not nested. Both are fine. For example you could use any of these:
<div class="wrapper">
<header>
<nav></nav>
</header>
</div>
<div class="wrapper">
<header></header>
<nav></nav>
</div>
<section>
<header></header>
<nav></nav>
</section>
<article>
<header></header>
<nav></nav>
</article>
here's a useful thing to read: http://www.w3.org/wiki/HTML_structural_elements
in short: yes, its valid html5 structure
"the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. A common example is using a to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content."
I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.
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 the following html structure
<div id="content">
<div id="transport">
<div id="header">Header Text</div>
<div id="image"></div>
<div id="right_content">Lots of text</div>
</div>
</div>
Is there a better way to arrange the css for the above rather than use ids for all of the divs?
IDs can only be used once in a document. Classes can be reused throughout the document. Styles attached to IDs trump styles attached to classes.
Other than that, it's entirely up to you and the particular content you are marking up.
Looking at your sample code, I would recommend using an actual header tag instead of a div with an ID of header.
Why not change those to classes and have only the top level container with an ID? That way you can target it with the top level ID.
You should also remove the header DIV and use a H2 or H3 tag.
<div id="content">
<div class="transport">
<h2>Header</h2>
<div class="image"></div>
<div class="right_content">Lots of text</div>
</div>
</div>
Your CSS would look like
#content .transport {}
#content h2 {}
#content .image