Hello, my friends. With slight delay, I welcome you back to my weekly blog.Â
Today I will introduce some new tags to you, along with a few recaps of things we have already covered. Just so we’re all back on the same page. So, without further a-boo...Â
We know that we must nest our header in the navigation section. You have the content area and main content, sidebars for advertisements, links, extra information etc. This is what gives our web page structure, and the semantics we add gives it meaning.Â
Div tags (dividers) were used before in HTML, but things got confusing as each coder had different ways of defining the parts of navigation, which made it difficult for semantics to be made. Thankfully, they have now created a standard so that bots can ensure they find the specific elements and their true meaning.Â
The <header> element represents a group of introductory navigation aids. Many pages have a mast head in the header area, that may contain the site name, logo, search bar etc. The <nav> element represents pages that are a major navigation blocks (for example, a table of contents), by nesting lists in the element (for example, the header, footer or sidebar).
The <article> element can be a standalone tag in any section of the page. You can have multiple <article> tags on one page, or you can have <article> elements within an <article> (for example, a comment on a blog). The <section> element is similar to the <article>, but it doesn’t need to make sense out of context of the document. It represents a group of related content, so don’t use it for styling!
The <aside> element represents everything inside and related to the main content. It is used for when you want a sidebar, either on a page or within an article. However, make sure that the contents are related to the article.
The <footer> lies at the bottom of the page, and may include contact details, more advertisements, copyright information etc.
Back to our beloved <div> elements... They are used to group content together. Only use them to hook CSS where appropriate. They have no meaning by themselves. Avoid what they call a “div soup” by structuring your HTML document with identifiable sections, and remember, use semantic elements where you can. It helps the machines infer structure of content, and gives you a standardised vocabulary for organising your web pages.
Say your page had three sections, and you want two out of three styled differently. You would do this by putting a <div> outside the two sections, and nest the two sections outside to the div. REMEMBER: only use the div for layout purposes! You can use the <body> element as a natural wrapper for site content. If you wanted to style a particular block of content, a <div> is suited.
<div> elements are block-level elements, meaning they always appear on a new line and are 100% wide. Block boxes appear below the previous block element. The width of these boxes are set automatically based on the width of the container, which would be the full width of the browser page. The height, of course, is based on the content it contains.
Inline boxes don’t affect spacing. They are not for determining layout, they simply style the stuff inside a block, and the width is based on its contents. Inline elements will appear next to each other (<a>, <em>, <strong> etc.) which you will easily learn along the way!
<span> is a generic inline grouping element. It is used to contain a section of text where there is no suitable element to differentiate it from the surrounding text. It is mainly used to apply styling in CSS.
As we know, class attributes allow you to identify one or more elements in a document. They can appear multiple times on page, and one element can have multiple attribute classes.Â
As we know, the <main> element represents the main section of content. This should be unique to the document, excluding any content that is repeated across other documents. Using a combination of elements, class and id attributes give structure. Our <main> element can be placed in the main content section. We can have the <header> and <footer> inside an <article>. Oh, and one final recap, the <meta> element includes information about the document. It’s a void element, meaning there’s no content within, and it uses attributes to carry the information, and it must appear inside the <head>.Â
Well, that’s all for now... But don’t worry, there will be more.. much more!
BOO-bye now! Don’t forget to close them tags!!
