For example what is the difference between
<div class="page-header">
<h1>Example Page Header</h1>
</div>
and just writing:
<h1>Example Page Header</h1>
on the tutorial on w3Schools it says to place the "page-header"class in a divelement but does not say why. It seems unnecessary , is there a reason for this?
As the Bootstrap docs state:
The page-header class is:
A simple shell for an h1 to appropriately space out and segment
sections of content on a page. It can utilize the h1's default small
element, as well as most other components (with additional styles).
Not necessarily in a div, for example.
<nav class="page-header">
nav
</nav>
Or
<header class="page-header">
header
</header>
Related
Is using multiple header tags common practice when it comes to separating a main-header and a sub-header, or should you divide one header into two sections using divs?
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header class="header--main-header">
</header>
<header class="header--sub-header">
</header>
</body>
</html>
As opposed to:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div class="header--main-header">
<!-- Main-Header Content -->
</div>
<div class="header--sub-header">
<!-- Sub-Header Content -->
</div>
</header>
</body>
</html>
Would either of these methods be the "best-practice" way to achieve a website header and sub-header, or is there another approach that I'm missing?
You can use as many headers as you like. We tend to use a main header at the top of our HTML containing our h1, navigation, utilities etc. But headers can also be used for the head of a section.
For instance:
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h2>Title of this article</h2>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
It is the head tag that should only be used once per page.
The header tag element represents a container for introductory content or a set of navigational links.
A header tag element typically contains:
one or more heading elements (h1 - h6)
logo or icon
authorship information
You can have several elements in one document.
Convention in HTML is that generally there is one header tag. Sub-headers can be seperated by any element you wish, div for example like you have.
You can check out some of the example usage of header here and here.
Usually the header tag, followed by the nav or div tag itself. It is best-practice to use the nav tag.
Hi i'm trying to create a single page website with various sections. However, when I try to create two sections, there seems to be an auto margin between them. I tried to fix it by defining margin:0 for all sections but that doesn't do the trick.
Here's the link: http://alchuang.com/indexnav.html
Can anyone help?
Thanks!
Relevant code:
<section style="background-color:white">
<div class="container">
<h1>helllllllo</h1>
</div>
</section>
<section style="background-color:red">
<div class="container">
<h1>helllllllo</h1>
</div>
</section>
Heading elements have a default margin. Add margin:0 to your h1 rule.
I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.
Is it bad to nave no <header>?
I have this basic structure but I am thinking about wrapping a header arround everything between the body start and the content because the header has also this nice shema.org markup attached. Good Idea?
Just because sometimes the header is not there but the navbars actually contain the brandname and are sort of headers themseves.
if I do this how should I markup whats the <header> right now? A section inside a header is not valid right? Just a normal <div> I guess.
<body>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>
<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->
<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
<div>content ...
To this
<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>
<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->
<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...
Multiple headers not valid either or? I am thinking of it this way as using the <header> without any CSS styles just for semantic markup. I could think of styling barriers created with this so not 100% satisfied with this.
Or is this valid.
<body>
<header class="nav1"><h1>brandname</h1><nav>...</nav></header>
<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->
<header class="nav2"><h1>brandname</h1><nav>...</nav></header>
<div>content ...
// just read html5: using header or footer tag twice? this and looks like I stick with the 2nd solution since I not really like the idea of having no header at all
Dont be afraid to answer ;)
Decide for every sectioning root element (e.g., body) and every sectioning content element (e.g., article) if it contains content which is appropriate for header. The spec defines that it’s for "introductory content", and gives the following examples:
introductory or navigational aids
heading (an h1–h6 element) (not required)
table of contents, a search form, or any relevant logos
If there is such content, use a header element. If the content in that sectioning root/content element is scattered, use several header elements.
Keep in mind that the header always applies for "its nearest ancestor sectioning content or sectioning root element":
<body>
<header> <!-- this header is for the whole page --> </header>
<article>
<header> <!-- this header is for the whole article element --> </header>
<div>
<header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
</div>
<section>
<header> <!-- this header is for this article’s section element only --> </header>
</section>
</article>
<figure>
<header> <!-- this header is for the figure element only --> </header>
</figure>
<strong>
<header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
</strong>
</body>
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.