As you start to build more complex websites, it is important to organize the data structure efficiently and effectively. HTML 5 added several organizational tags to help provide context to the contained data.
In the previous version of HTML, we’d usually use a div tag, with a user created class. However, the issue with that was that classes very easily could be used inconsistently across websites. By using set structures, it is easier to work with the HTML as data.
Div tags are still used, and have their place, but so we’re going to start with them, however we’re also going to look at other tags like main, article, header, etc.
<div>
The div tag is the first one we will look at, however, it has been around since before HTML 5. So why look at it? Well, it is still used all over the place, and still has a place, even though most of the following tags were designed to make it less prevalent.
The div tag has no logical organization purpose, rather it is used anytime a person needs to group or separate data. Therefore, it can still easily be used to build a graphical portion of the web page.
While not recommended, I’ve seen people try to build a web page with almost nothing else but div tags and classes assigned to them. However, this makes the content very hard to work with and maintain and should be avoided.
<div class=”article”>
<div class=”article-header”>
<div class=”article-title”>How not to build a web page</div>
<div class=”article-author”>Walter Wimberly</div>
</div>
<div class=”article-content”>
<div>This is the first paragraph, but we’re not using paragraphs, or any other relevant tags, because we like doing things the hard and impossible way.</div>
</div>
</div> Advanced HTML Structures was originally found on Access 2 Learn
