All about HTML5 for Absolute Beginners: Part 6

on

All about HTML5 for Absolute Beginners: Part 6







Hi everyone, welcome back to the blog. Let's continue our journey and learn something that has the power to shape our future!

Do I have to learn all tags?

No, you don't have to pressurize yourself and try to memorize HTML concepts. All you need is a lot of practice. The more you work with these tags in the code editor, the more likely you are to understand these concepts and learn them by heart automatically. 

In my case I didn't even use the snippet that generates the HTML boilerplate. Instead, I opened Notepad and started writing code manually. In that way, I practiced hard and learned these fundamentals by heart.

Tables in HTML

It's obvious that you would need a table to organize information to present to the user. To create a table in HTML we will learn a few tags that are necessary to create the structure of a basic table.

Table tag <table></table>

This tag is the main container for a table. In it we will write different tags to create the table.

Table Row <tr></tr>

In a table, we have to create rows and columns. The table row tag simply creates a row.

Table Head <th></th>

We use this tag for the main headings in the table. The row is created by the tr tag, and now we have to add data for headings.



Table Data <td></td>

After the headings are in place, we'll be writing information below those headings. For that, we use the table data tag.


Example Table

This table represents the different laptops in a specific budget.

<table>

<tr>

<th>Name</th>
<th>Specs</th>
<th>Price</th>
<th>Availability</th>

</tr>

<tr>

<td>HP Laptop</td>
<td>Core i5, 8 GB/256 GB SSD</td>
<td>$499</td>
<td>Yes</td>

</tr>

<tr>

<td>Dell Laptop</td>
<td>Core i3, 8 GB/128 GB SSD</td>
<td>$399</td>
<td>Yes</td>

</tr>

</table>

This is how a basic table is structured in HTML5. The first row is for the headings, and the other two rows are for the data below them. To make it look a little better, you can use a border. It's an attribute for the table tag itself. For example,


<table border="1"></table>

Try this out in your code editor.

Semantic Tags in HTML5

You might be familiar with the name semantic if you've been following this series. Now let's cover in detail the semantic tags.

Semantic tags provide meaning to the overall code and optimize it for SEO. For example, to create a header for a website, we can use the header tag. To create a section, we use the section tag. These tags are self-explanatory. Let's explore the ones you're going to use the most.

Header Tag <header></header>

You know every website has a header. On it you can usually see the logo of the website, navigation links, maybe a button to open a sidebar, a search bar, or more.

When you're about to create a header for your website, you will use the header tags.

Creating a header tag wouldn't reflect much on the webpage because it's just a container for tags. But it makes your code readable for both search engines and other developers.

Footer Tag <footer></footer>

When you go down to the bottom of a webpage, you will see a bunch of navigation links to the website, copyright symbols, contact information, and more. The footer is similar to the header, and both are necessary to create a basic webpage. So, to create a container for the footer, use the footer tag.

Main Tag <main></main>

In between the main tags, the content before the footer and below the header will come. This is the main content of your webpage; that's why it's called the main tag.

Navbar Tag <nav></nav>

The navbar (navigation bar) is where you list the main links to important content on your website. So, to create this navbar, you will use the nav tag for a container.


Section Tag <section></section>

Obviously, there are different sections in a webpage, so to create each, use the section tag as a container.


Article Tag <article></article>

When you have to write some long form of text like a blog, a story, news, a letter, or more, use the article tag.

Aside Tag <aside></aside>

This tag is used to write content that is not much related to the main content or is not as important. It may be relevant to the content close to it. For example, an area of suggested articles. This is also commonly used for advertisements on websites.


Well, these semantic tags are not the only ones HTML5 is offering. In fact, there are a ton more. You can check the documentation on MDN web docs. They are not commonly used, but you never know when they might come in handy. Below is the link to MDN web docs on semantic tags:

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Wrapping up

Your feedback can help me a lot to improve my content and align it with your needs. If you feel like any change with the length of the content, more examples, quality of content, or any other ideas you have in mind, then feel free to leave a comment or contact me through the contact us page.

Thanks for reading the blog. Don't forget to share this with aspiring web developers who would benefit from beginner-friendly guidance.