HTML5 Syntax ,Structure and semantics

Explain semantics with example?

Back in the olden days of Frontpage97 and Hotdogs… you create and format a page using tables, and nested tables within tables.

<table width="100%" cellpadding="10" cellspacing="0">
   <tr bgcolor="blue">
       <td align="center">Welcome to Farcebook.</td>
   </tr>
   <tr>
        <td align="left">Be my friend</td>
   </tr>
   <tr bgcolor="gray">
     <td align="center">Copyright Farcebook © 1997</td>
   </tr>
</table>

Fast forward, and formatting pages using table became old and there’s a new kid in town called divs and cascading style sheets (css).

<div id="header">
   Welcome to Farcebook
</div>
<div id="content">
    Be my friend
</div>
<div id="footer">
   Copyright Farcebook © 2003
</div>

Much clearer, and now all style formatting is in the css file. Without looking at the id tag, you really don’t know what that division represents.

So to give a more clearer meaning to code, we have semantic elements in html5.

<header>
   Welcome to Farcebook
</header>
<main>
   Be my friend
</main>
<footer>
   Copyright Farcebook © 2008
</footer>

and you can give styling to header, main, and footer tags.

Now looking at the html code, the intent is more clearer on what the different sections of the code is for.