Semantic Tags: Article, Section and Aside

Semantic Tags: Article, Section and Aside
namecheap placeholder image

Unlike tags like div and span, in this lesson, we'll look at structuring a page using more meaningful HTML tags.

Articles and Sections

They still make these, right?
They still make these, right?

You can think of an article as standalone content. Like in articles you might see in a newspaper, articles will ideally contain sections like introductions, the main content, and then perhaps a footer with some closing notes.

Let's see an example:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Article</title>
		</head>
		<body>
			<article>
			    <section class="header">
					<h1>Article heading</h1>
			        <p>Hello there!</p>
			    </section>
			    <section class="main">
			        <p>This is the main content</p>
			    </section>
			    <section class="footer">
			        <p>Good-bye!</p>
			    </section>
			</article>
		</body>
	</html>
	

As you can probably tell, section tags are used to split up the article into smaller, more cohesive parts. section tags act like div tags in that they're both blocks, but section tells the browser that whatever is inside is just a piece of the larger puzzle.

We used section tags for headers and footers, but there are actually tags made specifically for this.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Article</title>
		</head>
		<body>
			<article>
			    <header>
					<h1>Article heading</h1>
			        <p>Hello there!</p>
			    </header>
			    <section class="main">
			        <p>This is the main content</p>
			    </section>
			    <footer>
			        <p>Good-bye!</p>
			    </footer>
			</article>
		</body>
	</html>
	

Both tags are pretty straightforward. The header tag defines the header of an article or section, while the footer tag defines the footer.

udemy2 placeholder image

Asides

If you find yourself wanting to go into a bit of detail about the topic at hand, like for example a quick little snippet, use the aside tag.

	
	<article>
	    <header>
			<h1>Article heading</h1>
	        <p>Hello there!</p>
	    </header>
	    <section class="main">
	        <p>This is the main content</p>
			<aside>
		        <h2>This is a small snippet!</h2>
		        <p>Snippet text goes here.</p>
		    </aside>
	    </section>
	    <footer>
	        <p>Good-bye!</p>
	    </footer>
	</article>
	
The magic isn't something you can see visually!
The magic isn't something you can see visually!

To more semantically define where your user can find navigation on your site, take advantage of the nav tag. There's not much to them, just surround the links used for navigation with this tag and you're golden.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Navigation</title>
		</head>
		<body>
			<nav>
			    <ul>
			        <li><a href="/page1">Page 1</a></li>
			        <li><a href="/page2">Page 2</a></li>
			        <li><a href="/page3">Page 3</a></li>
			    </ul>
			</nav>
			<article>(Article content here)</article>
		</body>
	</html>
	

As you already know, the modern web is more than just text and images. It is vibrant and offers compelling experiences, largely thanks to its multimedia support.

Our next lesson will guide you with embedding your own audio, video and canvases to your page!