I want to make use of the semantics of the html grouping elements as much as possible.
I am struggling with the right element name for a viewport that centers my whole page in the middle of the screen (only horizontally).
My current solution is this:
<section id="viewport">
<header>
<nav>
<ul>
<li id="home">Home</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
</nav>
</header>
<main data-ng-controller="shell as vm">
<img alt="logo" src="/content/images/midbody.png" />
<aside data-ng-show="vm.isBusy" class="page-splash dissolve-animation">
<div data-cc-spinner="vm.spinnerOptions"></div>
</aside>
<article data-ng-view class="contentpage"></article>
</main>
<footer>
<div id="footer">Webdesign by Patrick Peters</div>
</footer>
</section>
The html elements are about semantic. While footer, header or aside imply somehow that header is at the beginning footer at the end and aside somewhere else, they main purpose is not about telling how their layout is, but to describe the importance and what they are about.
Because of that there is no equivalent for a centered element, because centered is only a visual information. And the visual representation belongs to css.
So if section fits use section. You have a header and a footer so it is a section somehow, but as it is the whole page that is represented by body there is no real need to wrap it into a section (it does not make the structuring clearer). If it has no semantic meaning you can stay with div as an anonymous container.
whatwg: section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
whatwg: body
The body element represents the main content of the document.
Related
Is semantically correct to use a header, footer o main elements inside a dialog component in Html5?.
I want to build a complex modal view with options about articles in my main page content. I am wondering if is correct use html5 as follows
<dialog>
<header>
<h1>Title</h1>
<button> Save </button>
</header>
<main>
<!--modal view options-->
</main>
</dialog>
Only the <main> tag shouldn't be there.
As copied from W3schools:
The header element represents a container for introductory content or a set of navigational links.
And:
You can have several header elements in one document.
This applies to the header and the footer.
but then there is this:
There must not be more than one main element in a document. The main element must NOT be a descendant of an article, aside, footer, header, or nav element.
So, to say it in a short way:
you can use multiple <header> and <footer> tags in your document, but you're better of using a <div> instead of your <main>
Tl;dr
Using header, footer or main in the dialog element for the purpose of describing this dialog's content is not semantically correct.
About header and footer
Only Sectioning content elements (or body) define a semantic scope that is applied to header and footer. dialog is not a sectioning content (source). So, header and footer placed within dialog will describe the closest sectioning content or body, not a dialog itself.
About main element
There are 3 important rules to remember when using main element (source):
it should be used only to represent the dominant contents of the document (dialog's content is not likely to be the dominant content),
there can be only one main element without hidden attribute on the webpage at the same time (which means you would need to add hidden attribute on your general main page element),
main element ancestors can only be html, body, div or form elements without an accessible name. main cannot be contained within anything else, including autonomous custom elements.
So, 3rd point makes it impossible to use main element inside of a dialog. And 1st and 2nd make it really hard.
Solution
Good solution in this case would be to either drop using of those elements or to wrap dialog's content with a section element to be able to provide semantic header and footer.
<dialog>
<section>
<header><!-- header content --></header>
<div>
<!-- modal content -->
</div>
<footer><!-- footer content --></footer>
</section>
</dialog>
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 alongside the article body without placing it within the article section.
My question is: is it bad practice to move the sidebar element up so it falls within the article section, and thus sits nicely on the right next to the main content, but below the title?
The markup would look something like this:
<article>
<header>
PAGE/POST TITLE
</header>
PAGE/POST CONTENT
<div class="sidebar">
SIDEBAR CONTENT
</div>
</article>
The article element, just like any other HTML element, should only contain content that conforms to the element’s definition.
Including navigation doesn’t seem to be appropriate, unless it’s the navigation for the article itself (like a table of contents or similar), in which case you should use the nav element.
While there is the aside element, which would allow to markup separate content inside of article, this content still has to be
[…] tangentially related to the content around the aside element
As the title says, do I have to use these new tags in a DIV or are they basically DIVs themselves?
This is how each of the major HTML5 tags can/should be used:
section – Used for grouping together thematically-related content. Sounds like a div element, but it’s not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself: “Is all of the content related?”
aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer – Sounds like its a description of the position, but its not. Footer elements contain informations about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
<header>
The <header> element represents a container for introductory content or a set of navigational links.
A element typically contains:
one or more heading elements ( - ) logo or icon authorship information You can have several elements in one document.
Note: A <header> tag cannot be placed within a , or another element.
<nav>
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
<aside>
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
<section>
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
The default layout page I get in a MVC razor has a problem with the section tag being smaller than its contents. The issue is I have a large table inside of it, and it is running out of the section, rather than the section simply becoming wide enough to fit it. I have recreated the issue in jsFiddle. You can see that the blue box is much thinner than the red box. The blue section being the initial size of the window, but if you scroll right, then you see the table is wider than the section.
How do I get the section to widen to match the size of its contents?
<div class="page">
<section id="main" style="background:blue;height:50px">
<table style="width:1000px; overflow:auto;background:red">
<tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>
</table>
</section>
<footer>
</footer>
</div>
http://jsfiddle.net/sDG8n/1/
Float the section to the left
<section id="main" style="float:left;background:blue;height:50px">
Try putting the overflow:auto on the section instead of on the table.
The Spec says you're doing it wrong:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead
In other words: Use a DIV.