Mastering Semantic HTML with the Article Tag

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.html and 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70702{{"`HTML Article Section`"}} html/head_elems -.-> lab-70702{{"`HTML Article Section`"}} html/text_head -.-> lab-70702{{"`HTML Article Section`"}} html/para_br -.-> lab-70702{{"`HTML Article Section`"}} html/lists_desc -.-> lab-70702{{"`HTML Article Section`"}} html/layout -.-> lab-70702{{"`HTML Article Section`"}} html/nav_links -.-> lab-70702{{"`HTML Article Section`"}} end

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 `<article>` 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>

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.

HTML Article Section

Introduction

Skills Graph

Add the HTML5 Structure

Add an `<article>` Tag

Add Article Content

Add the Footer Tag

Summary

Other HTML Tutorials you may like

HTML Article Section

Introduction

Skills Graph

Add the HTML5 Structure

Add an <article> Tag

Add Article Content

Add the Footer Tag

Summary

Other HTML Tutorials you may like

Add an `<article>` Tag