Skip to main content

html intermediate tutorial : Sectioning

Whereas div elements can be used to contain sections, used primarily as scaffolding on which to hang CSS, they don’t hold a great deal ofmeaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, andnavigation.

Articles and Sections

An article element can be used to mark up astandalone section of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles.
A section element represents a more general section and could be used to split up an article, or to represent chapters, for example.

<article>
    <section id="intro">
        <p>[An introduction]</p>
    </section>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>
While divs could be used to make these separations (or even if you didn’t need these separations for styling), this provides a much richer, more meaningful document.






Headers and Footers

header and footer provide further specialized, self-descriptive, sections:

<body>
<article>
    <header>
        <h1>Alternatively&hellip;</h1>
        <p>[An introduction]</p>
    </header>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <footer>
        <p>[End notes]</p>
    </footer>
</article>
<footer>
    <p>[Copyright bumf]</p>
</footer>
</body>
The footer is the footer of the section in which it is contained. So, in the above example, the firstfooter is the footer of the article and the second footer is the footer of the page.

Asides

An aside can be used to represent content that is related the content surrounding it. Think of pull-quotes or snippets of related information in an article:

<section id="main_content">
    <h1>Tixall</h1>
    <p>[All about Tixall]</p>
    <aside>
        <h2>Tixall Obelisk</h2>
        <p>[A short note about Tixall Obelisk]</p>
    </aside>
    <p>[Maybe a bit more about Tixall]</p>
</section>






Navigation

Finally, there’s nav, used to mark up a group ofnavigation links:

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/reference/">Reference</a></li>
        <li><a href="/articles/">Articles</a></li>
        <li><a href="/about/">About us</a></li>
    </ul>
</nav>





Labels:

Popular posts from this blog

Free tips to save yourself from phishing

Free tips to save yourself from phishing Phishing is a type of social building method utilized by programmers to assemble delicate data, for example, usernames, passwords and Visa points of interest by acting like a trustworty individual/association. Since most online clients are ignorant of the methods utilized as a part of completing a phishing assault, they regularly fall exploited people
Read more

html intermediate tutorial Text: Addresses, Definitions, Bi-directional, and Editorial

Addresses address  should be used specifically for the contact details  relating either to the entire web page (and so only used once) or to an  article element . It’s isn’t, as it might at first appear, for marking up any old address willy-nilly. < h3 > Author contact details </ h3 > < address > < ul > < li > 0123-456-7890 </ li > < li > author_dude@noplaceinteresting.com </ li > < li > http://www.noplaceinteresting.com/contactme/ </ li > </ ul > </ address > Definition terms dfn  is a  definition  term and is used to highlight the first use of a term. Like  abbr , the  title attribute can be used to describe the term. < p > Bob's < dfn title = "Dog" > canine </ dfn > mother and < dfn title = "Horse" > equine </ dfn > father sat him down and carefully explained that he was an < dfn title = "A mutation that comb...
Read more