<div> vs semantic tags

When designing a web page, we need to consider how we want to break a page into parts. There are several tags we use to do this. However, the distinction between these tags can be very confusing. Here are some guidelines to help you choose how you want to split your page into parts.

• div tags are used for grouping sections in the page for styling purposes only
• section is a tag that generically groups semantically related content together under a heading. An example of a section is a section of a newspaper (like the sports section) or a section of a research paper (introduction, methods or conclusion).
• header tags are used once in a page for the header of the page. The header is at the top of the webpage and is typically separated from the body of the webpage. Note that a header tag is different from heading tags h1-h6 which are used to verbally identify content areas.
• footer tags are used once in a page for the footer of the page. The footer is at the bottom of the webpage and is typically separated from the body of the webpage.
• article is very similar to a section. The only requirement that makes a section differ from an article in that an article is self contained. That means that you could take this part out of your web page and put it into a second page and still be able to understand what is going on. If we think of a newspaper, we can think of individual sports articles found in the newspaper as articles because I could cut out the article and put it on another webpage or in another newspaper and it would still make sense.

Could any section be an article? Is any article a section? Do articles go inside sections or vice versa?

• Any article could be a section. However, it does not work the other way around. To understand why, think about if we tried to take out the results section of a research paper and putting it on another website. In this case, the results may refer to outside areas of the paper so it would not make contextual sense on a random web page. Sections can go inside of articles or vice versa, you just need to make sure that articles are self-containing.

Which one do I use where? This seems a little ambiguous…

• The point of using these tags are that they are a design decision. You need to think about the semantic content of your page and how you want to relate things together and choose the appropriate ways to section your page. Therefore, there may be more than one right way to section a page. I would recommend that you include a comment justifying your design choice.