I have an assignment due in on the 18th of August 2014, and have now been told that I need to add certain section elements to my website. However, I do not know how to use them. what are the header, nav, main, article, aside, and footer elements use for and how do I use them in my website?
Since HTML is a Markup Language, there are specific tags that it outlines which are essentially considered "the right ones to use" in different places of your code. For example, if you were to put a navigation bar in your site, you would use the "nav" tag to outline the section in your code that contains the navigation bar code, but you could just as easily use a "div" without causing any different behavior. Now with that said,
Nav: The section that is usually just the top section of your page that holds links to different parts of your site (see the top of this page, however if you look at this page's source code you will notice they do not even use nav tags as specifically named tags such as these are not mandatory, you can simply use divs all over the place but that is not a good practice)
Header: The banner section if you will where the title of the page and other global information pertaining to the page exists (ie the a large representation of your site's logo or number of visitors for your site)
Main: The actual content of your site (the main content)
Article: Think of this as a blog post which typically consists of text and maybe an image
Aside: Usually inline with an article or some other block of text used to insert additional information (ie fun facts)
Footer: The bottom of your page which also contains links like the header, but usually are more verbose as well as copyright information (Stack overflow has a rather large one if you scroll to the bottom of this page)
You can read more about these specific tags here: Quackit - HTML 5 Tags and good luck with your project.
Related
I do not know if this is easy or standard. I would like to be able to put a tag around a paragraph so that the paragraph is invisible in the main page of a tumblr account, but visible in the post.
A little bit similar conceptually to the [READ MORE] idea, except it just takes out a single paragraph.
My objective (in case there is a better way out there), is to have navigation at the top of the post (above the first paragraph), but for that navigation not to show in the main page where all the posts are listed.
From reading on the web (eg here), it seems that {block:PermalinkPage} can be used to hide text everywhere except the page. So I would either need to create a structure (e.g. or something) inside the html background that takes advantage of this (I don't know if this is possible), or do something similar with code in the actual post.
I'm not sure if I fully understand your question. If you want to create a text post with a paragraph hidden on the index page of your theme, then this should help:
Add this inside of the CSS of your theme code:
{block:IndexPage}
.hiddentext {display:none;}
{/block:IndexPage}
Create or edit the text post in HTML mode, and style the text you want to hide liked this:
<p>This is text that you will see!</p>
<p class="hiddentext">This text will only be visible on the permalink page!</p>
The text will display normally on the dashboard and on the permalink page of your blog, but will be invisible on the index page of your blog.
If you don't know where to add the css, go into your them HTML and search for </style> and place the code directly above that.
If you are wanting this navigation to show up on all post pages, and not show on the main page, you should put the navigation in your html and wrap it in {block:PermalinkPage} and {/block:PermalinkPage}. If you do not want this to show up on ask pages, and pages you create yourself (only post pages), instead wrap the html in {block:Date} and {/block:Date}.
You would put this somewhere after {block:Post} and before {/block:Post}, but without seeing your code, I can't be more precise.
Is it ok to use a h1 tag in the header of a site? I don't mean to replace the logo but as a bit of text next to it with keywords.
The body h tags would all be h2.
Only reason im thinking this is because the site is more or less a personel project site and the design is more of a news or directory layout with not much need for a h1 tag in the body.
Or will this somehow get my penalized by google?
From Mozilla Foundation:
...you should consider avoiding using more than once on a page; by convention, it's used for the page's displayed title, with all headings below starting with . When using sections, you should use one per section...
That said here you have the link to it for further knowledge:
Heading elements
I am displaying articles on my document, and displaying links to other articles at the bottom.
HTML looks something like this:
<article>...</article>
<article>...</article>
...
<article>...</article>
<aside>
Other recent articles
<div> ... </div>
</aside>
I think the links to other articles should be , because it is defined in MDN as:
a section of the page with content connected tangentially to the rest, which could be considered separate from that content.
But the name <aside> seems to imply that the element should be either on left or right side. Can it be in the bottom?
With HTML, you should always think of your usage of tags as structural, not presentational.
So don't think of <aside>'s name as a physical description. Think of it in terms of its purpose in structuring content: to associate tangentially related content to the main content. That has nothing to do with where it's placed on the physical page design.
If you're designing your page with media queries, for example, I bet your mobile view isn't going to put an <aside> on either side of the screen because there is not enough room. You'll likely position <aside> content after the main content. But when you scale up to a desktop-sized screen, you have plenty of room to put that content on the left or right side (if you want, but you're not forced to!).
I also think back on Shakespeare's usages of asides: the characters would pause from the main play to talk directly to the audience about what they were thinking or what was going on. (Kevin Spacey's character does it a lot in House of Cards too.)
Update: I also looked up the definition of the word "aside":
a remark that is not directly related to the main topic of discussion.
"the recipe book has little asides about the importance of home and family"
The term "aside" is used in a similar vein to how one might say "on a side note" (in fact, that is what the <aside> element is designed for). It doesn't necessarily imply that the content must be laid out on the left or right side — that is a layout concern which has little to do with content semantics. If your layout calls for aside content to be placed at the bottom, you are free to style it accordingly.
As an aside (heh), if it is a set of navigation links, you may want to mark it up as a <nav> instead, but that is up to you.
I think you can interpret aside in different ways. As in, if the content wasn't there, the main point of the page could still be understood. Thus, aside should hold anything tangentially related to the content.
Ask yourself, if you remove the content within aside, will the meaning of the page stay the same?
for example, I have a network nav menu at the top of the page which contains links to sites across the network and my main nav contains navigation to this site. Can both of these nav items be in the same header tag in html5? So I would have something like
<header>
<nav id="nav_network"></nav>
logo and stuff
<nav id="nav_site"></nav>
</header>
Is this valid?
This is fine by the validator:
http://validator.w3.org/check
(As long as you include a head and a title in the doc)
Usually, though, you would place the nav outside the header.
Header is more like the title, logo, and a search form.
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
http://dev.w3.org/html5/spec/Overview.html#the-header-element
More here: http://html5doctor.com/the-header-element/
There is nothing wrong in using Multiple nav in header, it is perfectly fine.
Yes, you can insert more than one element; that is the answer if you are basically asking about the availability. You can use more than one element, and the browser will read your code perfectly since the element is read as a element in your browser, and there is no difference between them.
But as an SEO wise it is not recommended because the is telling search engines where they can find your navigation menu. So, it is supposed to use only one navigation bar on your website.
Briefly, you can do that, but it is not recommended.
I'm looking at the BBC site, and putting together something following a similar overall pattern, and determining how to mark it up appropriately is stumping me somewhat.
The BBC consists of several what could be considered sites in their own right:
http://www.bbc.co.uk
http://www.bbc.co.uk/comedy/
http://www.bbc.co.uk/news/
www.bbc.co.uk/[a-lot-more-stuff]
(these could all be subdomains instead - indeed, this is the case for me - but the URLs are not important)
Each of these is essentially self-contained, with its own content, menu and look and feel. However all of them are tied together by the use of the (slightly variable but mostly) static header bar. This contains the header "BBC" along with links to all of the various sub-sites.
So the question is, how should this be marked up. I see several different options:
The main BBC header is the site's main <header> and <nav>. This is sort of correct, because it is but it ends up essentially de-emphasising the importance of the sub-site's actual content. When it boils down to it (to use the examples above), the title "Comedy" and associated menu is the main content of the page, not the BBC bar.
Make the sub-sites' header and navigation the ones which are marked up within <header> and <nav>. This feels better, but it then opens up the question as to what the BBC bar now is? An option is to use an <aside>, which then contains its own <header> and <nav>. As far as I know, this is fine for the header but having that other <nav> element is still weird. Better option than the above?
Do the same as number 1 (BBC bar has the main <header> and <nav>), but mark up the rest of the page inside an <article> element. The spec indicates that the article element is to be used for items which make sense on their own, which is the case here. And it'll also make sense for it to have its own <header> (and <nav>? Is this pushing it somewhat?) But this seems to be stretching the definition of an 'article' rather further than its dictionary definition allows.
To me, having given it some thought and thrown some ideas back and forth on Twitter, number 2 seems the best of these options. However the idea of essentially putting the contents of an <aside> as the top element on the page (visually and in markup, since it seems to make most logical sense this way) doesn't quite sit right with me.
Am I overlooking an obvious solution or is this an usual enough pattern that it does make itself as difficult as it seems? And surely I can't be the only one to puzzle over this?
Thanks for any thoughts.
The main header should be, as you pointed out, marked up in <header> and <nav>.
I would then mark each additional page content in an <article> containing it's own <header> and <nav>. Ignore the dictionary definition of article, it doesn't really apply here. It's fine to have more than one <nav> element on a page, as long as its contents navigate within the site, that makes sense.
Putting the top header in an <aside> also doesn't seem to be correct to me as the content isn't stand alone.
Just my thoughts on the subject!