Semantic markup: Why instead of ? [duplicate]

Answer 1

@Tyblitz

Semantic elements means Elements with meaning. These elements clearly describes its meaning to both browser as well as to the developer.

<div> and <span> are examples of non-semantic elements; they don't tell anything about their content, whereas elements like <form>, <table>, and <img> clearly define their content and are therefore referred to as semantic elements.

<header> - header is a semantic element that specifies a header for a document or section. headers should be used as containers for introductory contents. You can have several header elements in one document.

<section> - section is a thematic grouping of content, typically with a heading.

<article> - article specifies independent, self-contained content.

and so on...

The following example defines how to use schematic elements in HTML5 markup:

 <!-- BODY CONTAINER START -->
    <header>
        <h1>Little Green Guys With Guns</h1>
        <nav>
            <ul>
                <li><a href="/games">Games</a>
                <li><a href="/forum">Forum</a>
                <li><a href="/download">Download</a>
            </ul>
        </nav>
        <h2>Important News</h2> <!-- this starts a second subsection --
        <!-- this is part of the subsection entitled "Important News" -->
        <p>To play today's games you will need to update your client.</p>
        <h2>Games</h2> <!-- this starts a third subsection -->
    </header>
    <p>You have three active games:</p>
    <!-- this is still part of the subsection entitled "Games" -->
 <!-- BODY CONTAINER END -->

Answer 2

The answer is hidden in search engines.

Search engines can only crawl for HTML elements, and they do not know much about your website's css colors, font size, and so, they can see clearly which words you find more important written as bold or title, header, footer(for mission or contact), and so.... which gives a clue of your website to their algorythm.

Answer 3

The benefit is that the mark-up describes the content and the structure of the document more accurately. A <div> with an id does not mean a header, whatever that id may be - it's completely arbitrary. Whereas a <header> is a header, no matter what its id.