My page for the Block Elements task: https://thimble.webmaker.org/p/8n1
There are several primary block elements used in HTML5. We will look at some new and old tags that complement the <head> and <body> duo.
The <header> tag is a container for introductory materials in a document or section. <header> can be used multiple times in a document and usually contains at least one <h1>-<h6> element (in order to validate).
<header> <h1>Section/Document Header</h1> <p>A brief description of this section/document</p> </header>
The <nav> tag is used to demarcate a section containing navigation anchors (links) to other content or sections. The anchors can be nested within a list such as an unordered list <ul>.
<nav> <h1>Navigation</h1> <ul> <li><a href="#home">Home</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </nav>
The <article> tag designates a region of a document that is self-contained. <article> can be an article, blog post, news story, etc.
<article> <img src="image.webp" alt="An image." /> This is the content for the article. </article>
The <aside> tag contains information that is tangentially related to to the primary content. Examples can include anecdotes, sidebars, external links, keyword definitions, etc.
The <footer> element is located at the end of a content section, such as <html>, and will contain information including licensing details, addresses and contact information, and links to site-wide documents such as a community aggreement.
<html> <article>Article content.</article> <footer> Creative Commons license. </footer> </html>
The <blockquote> tag is used to indicate a quotation or citation. The cite attribute is used within a <blockquote> tag to reference the origin of the quote.
<blockquote cite="Caleb">on the last element you listed 'bockquote', should be blockquote</blockquote>
Hint: Use the following diagram as an example of how block elements are nested.
Note: CSS is required to obtain the layout in the following diagram.
I know I'm late in responding, but I just got to this task today. I don't think we have to use CSS, they were only saying that CSS is needed to get the layout that they showed above.
Even so, it looks like everyone went ahead with CSS, so I'll be using it on my assignment as well...
Aqui mi trabajo:
Here is my effort toward learning to use block-level elements.
I hijacked lots of CSS to make the layout remotely close to the example but didn't have time to figure out why the articles layout extends all the way to the edge. Also, colors and fonts are ugly and unimaginative, but learning CSS is something that happens later :)
Here's my example for Block Elements, I made a news page with the given layout. Check it out and tell me what do you think...
Ok, so... Coming back to my news page I found the mistake that I made - I've put fixed heights on my <p>'s and that might be the reason for text to run out of the paragraph area. I am also using FF8 on Windows, but I am also working on Windows8 Developer Preview and this is not the first time when I am having this kind of difference. Anyways, I also tested the page using Expression Web 4 Super Preview and to me it looks fine in most of the new browsers that support HTML5 new elements.
I would realy appreciate if you could try to look at it again and let me know if my fixed heights for paragraphs was the problem and if it is looking better now.
For the CSS code, I followed the page source of a the previous comment that completed the colored table. Also, put my own content in there to make it relevant to the original webpage. I will continue to update both!
If anyone has any ideas for formatting pictures to fit in an aside (such as my oversized picture...) please let me know (though, I'm assuming this is a more complex CSS task)!
I don't have the answer to that question, having only begun this class myself, but wanted to say that those are awesome questions just because you are 12 yrs old. I'm 46 and think that it's great you're taking the initiative to learn HTML 5.
Considering the nav tag, if you did not use it in a saved .html document that you make in your editor and than put on a browser, you will not see any change by using it. However it is important for other “user agents” as they are called now, such as a phone. Note browsers are being called user agents now too.
When viewing source do not be discouraged at seeing many computer (more correctly software generated) generated code out there. Developers still go into them to make a change to the code that the software is not expressing to the user agent on its own. It is really fun when you view the source of a totally hand written site, such as this one which I picked because it is an educational one for a reader of it- http://themaingate.net/
He could have used the nav tag in his listed hrefs, but his purpose is served, it is a beautiful site, we just have to note about anything can usually be better.
The aside tag is for when you know the content should be aside, or off to the side (not always) of the main content. Here is a guy using it wondering if it is a good way to do something, the conversation is enlightening. http://stackoverflow.com/questions/6109027/can-the-header-tag-be-contained-within-the-aside-tag-in-html5
Here are some more links about the aside
This useful link is almost like someone is in the room teaching you!
I will get to the other question tomorrow, but for now a few things on the keyboard like the copyright symbol do not render or show on a user agent if you use them, so they have special ways of being keyed (typed / written) onto the document.