Structural tags in HTML5

Although common tags were present in the previous versions of HTML, HTML5 introduced special structural tags which considerably enhanced the power and ease of web programming. For a majority of everyday programming, these tags would eventually replace many of the typical div entries from the code. The definition of the structure starts with the tag:

<section>

A section is a thematic grouping of content, typically preceded by header, and ends with footer. Sections can be nested inside of each other, if needed, and can hold any amount of typical markup. The <header> of a section is typically a headline of grouping of headlines but it may also contain further helpful information about the section. A <footer> typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. <nav> is a tag that defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer. Finally, we have <article> and <aside> tags which are used for an independent entry and tangentially related content respectively. Following comprehensive example makes use of all these tags:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Standard Blog&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;header&gt;

&lt;h1&gt;&lt;ahref="#"&gt;Standard Blog&lt;/a&gt;&lt;/h1&gt;

&lt;/header&gt;

&lt;nav&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;Home&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;Archives&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;About&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/nav&gt;

&lt;section&gt;

&lt;article&gt;

&lt;header&gt;

&lt;h1&gt;&lt;ahref="#"&gt;Title&lt;/a&gt;&lt;/h1&gt;

&lt;/header&gt;

&lt;section&gt;

&lt;p&gt;Lorem ipsum...&lt;/p&gt;

&lt;/section&gt;

&lt;/article&gt;

&lt;footer&gt;

&lt;p&gt;Ending line&lt;/p&gt;

&lt;/footer&gt;

&lt;/body&gt;

&lt;/html&gt;

As you can see, the tags themselves are much more descriptive than simply providing an id attribute to a div. This also gives the added benefit of a descriptive closing tag, as </article> is much more understandable that wondering which <div id=”something”> goes with a given </div>. At present, some of the browsers are missing full support for the structural tags of HTML5, but it would eventually become an integral feature of every browser.