Which HTML5 elements do I use to design this page?

[ekuemoah]

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

[BlueBoden]

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]

[ekuemoah]

thank you, what is an aside?

[BlueBoden]

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>