Theory
Theory
Comments

The aside tag, which is used to specify additional content

There is another major logical container besides <section> and<article>. It is the <aside> tag.

The <aside> tag is used to include additional content that is not directly related to the main content. These blocks are often referred to as sidebars or side panels, but it‘s not the position on the page that determines whether to use the <aside> tag, it‘s the fact that the content is not directly related.

<aside>
  I am just a modest block that displays currency exchange rates on a website about fish
</aside>

We should also use <aside> on our internal website page. Later we will be able to include links to similar blog posts, tweets or some other such content (who knows what the boss will think of next).

We can assign various styles to tags, which can be used to solve various types of problems, by using template styles. In doing so, we have made use of the type system that is described in the HTML specification. Here is an explanation:

The dotted line is used to highlight the special tag <body>.
A blue box is used to highlight flow tags, which are usually used to mark major structural blocks in pages, such as, for example, <main>.
A purple box is used to highlight tags that are used to create semantic sections, such as, for example, <section>.
An orange box is used to highlight heading tags, such as, for example, <h1>.
A pink box is used to highlight flow tags, which are usually used to directly mark up text elements, such as, for example, <p>.

Of course, there are even more types that are defined in the specification. But we have not chosen to format everything: we have limited ourselves to only those tags that we need for our template.

index.html

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <nav> Return to home </nav> </header> <main> <article> Day One. How I forgot to feed the cat. Who would have thought that semantics was so important? I had an urgent need to talk about it. The cat caught my attention. The cat insistently meowed at me. And then I realized — it’s time for me to write the first blog entry. And to feed the cat. </article> </main> <footer> Website footer </footer> </body> </html>

Goalscompleted

Add the <aside> tag with the text Your ad could go here after <article> inside <main>.

The aside tag, which is used to specify additional content

Comments

Log in

Sign up

Restore access