Introduction
Semantic HTML is an important concept in web development because it helps search engines and assistive technologies to better understand the content on a website. One of the elements that can be used to create semantic HTML is the <article> tag. In this lab, we will learn how to use the <article> tag and how it helps in creating accessible web pages.
Note: You can practice coding in
index.htmland learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
Add the HTML5 Structure
Create an index.html file in your favorite text editor and save the file.
Add the basic HTML5 structure to the index.html file. This includes the <!DOCTYPE html> declaration, the <html> element, the <head> element, and the <body> element.
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
Add an Tag
Inside the <body> element, add an <article> tag. This tag will contain the main content of your webpage. The <article> tag has an opening and closing tag.
<article>
<!-- Add main content here -->
</article>
Add Article Content
Inside the <article> tag, add some content that will represent the main content of the webpage. This can be anything, such as an article, a blog post, or a product description.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
</article>
Add the Footer Tag
Within the <article> tag, add a <footer> tag to provide additional information about the content.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
<footer>
<p>
Published on <time datetime="2022-09-15">September 15th, 2022</time> by
<a href="#">John Doe</a>
</p>
</footer>
</article>
Save the index.html file and open it in a web browser to see the final webpage with contact information.
Summary
Using the <article> tag is an easy way to create semantic HTML and make your website more accessible. By using the <article> tag, you can provide additional information about the main content on your webpage, which can help search engines and assistive technologies to better understand your website. Remember to always validate your HTML code to ensure that it is free of errors and meets all of the necessary standards.
