These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:20 pm Advanced search

Which HTML5 elements do I use to design this page?

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Which HTML5 elements do I use to design this page?

Postby ekuemoah » Sat Feb 05, 2011 12:21 am

Hello,
I just started learning HTML5 today. I drew a diagram of a sample page and would like help assigning or picking the right elements and tags to use. Can someone look at my diagram, the elements I chose to use for the different parts of the page, and tell me if I am using the correct ones or not? Can you also tell me which elements you would use to markup the page and give me the reason for your selections? The sections have numbers assigned to it. Please refer to the numbers when explaining your answers.. Thanks

I am going to provide a link to the page with the picture on it.

http://proficiencymargin.tripod.com/HTML5Example.html
Here's the picture for the page. Thanks

Image
ekuemoah
<h6>
 
Posts: 4
Joined: Thu Feb 03, 2011 11:47 pm

Postby BlueBoden » Wed Feb 09, 2011 6:23 am

Your graphical representation seems rather confusing, but i will try to give you some basic principles, so that you will be able to apply those on the layout you want.

Your header element can contain a logo, and optionally a horizontal navigation mechanism, marked up by a ordered list, which is styled with CSS to give the appearance of tabs.

The header could contain information, such as a link to your about page, privacy policy, and contact page, etc.

Your main content should be marked up with an article element, which begins with a h1 header, followed by potential subsections. An example is shown below.

Code: Select all
    <article>
       <h1>Example of how to use the article element</h1>
       <p>Main blog post, article, etc..</p>
       
       <section>
        <h1>Subsection of article</h1>
        <p>A subsection of the main article.</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>This is a subsection to a subsection</p>
        </section>
       </section>
    </article>


Above should be placed in your body, and can be styled any way you please with CSS.

The navigation should be indicated by nav elements, just keep in mind that some links, such as breadcrumb-links in your content, shouldn't be marked up using nav.

Your footer can be used for copyright information, and contact information.

Keep in mind that many elements are optional, but recommended where it makes sense to include them. If you don't have anything which contributes to your site as a footer, then don't use the footer element.[/b]
User avatar
BlueBoden
<h4>
 
Posts: 26
Joined: Wed Feb 09, 2011 4:40 am

what is an aside then

Postby ekuemoah » Wed Feb 09, 2011 6:45 am

thank you, what is an aside?
ekuemoah
<h6>
 
Posts: 4
Joined: Thu Feb 03, 2011 11:47 pm

Postby BlueBoden » Wed Feb 09, 2011 6:56 am

It can be hard to define. But if you have viewed some news related sites, then an aside would likely be used to markup additional "facts", as summarized by the editor of the article.

An example would be as follows.



Code: Select all
<article>
       <h1>Example of how to use the article element</h1>
       <p>Main blog post, article, etc..</p>
       
       <section>
        <h1>Subsection of article</h1>
        <p>A subsection of the main article.</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>This is a subsection to a subsection</p>
        </section>
       </section>

      <aside>
      <h1>Additional side note</h1>
      <p>I was implementing the aside feature, to show additional facts about the main article topic.</p>
      </aside>

      <article>
        <h1>Some Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
      </article>
      <article>
        <h1>Another Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
      </article>
    </article>
User avatar
BlueBoden
<h4>
 
Posts: 26
Joined: Wed Feb 09, 2011 4:40 am


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests