/web development

5 main topics in HTML that you should know

5 main topics in HTML that you should know

HTML forms the basis of any website you see out there. Whether that’s tharunshiv.com, google.com or amazon.com . Fortunately, it doesn’t take much time to master HTML. I will list the most essential topics of HTML in this article which will help you kickstart your HTML knowledge or revise the essential topics.

5 essential topics


1. The Basic syntax & elements

This is an example of a basic HTML webpage which shows the heading and a line of text.

<html>
  <head>
    <title>My First WebPage</title>
  </head>
  <body>
    <h1>Welcome Buddy!</h1>
    <p>It's fun building websites</p>
  </body>
</html>

So, HTML is written using tags which are nested. It consists of elements which have specific properties. Know the various elements that exists, know atleast few of the majorly used tags. Some of the most frquently used elements are h1, p, img, form, table, ul, ol, div, span.

2. Class | id

Know when you have to use class versus when to use an id. A class is used when you have to target many elements. An id is used when you want to target a unique element. This means, many elements can have the same class name, but only one element must have that unique id. Classes and ids are used in the following situations:

  • To style a group of elements
  • To style a single element
  • To change the value of the element
  • To add a new element relative to this element and more… A class is preceded with a ’.’ (full-stop) An id is preceded with a ’#’
3. Adding Stylesheets

A plain HTML page is boring nowadays, compared to the level of creativity web designers exhibit nowadays. So in order to create something colorful, give some designs to it, we would definitely need to use Styling to our website. This would involve CSS - Cascasing Style Sheets. There 3 ways to use CSS to a HTML website.

  • Inline : The styles are written within the tags
  • Internal : the styles are written in the same HTML page
  • External : The styles are written in an external file and used by one or more HTML page

When you use all three of these on the same element, the priority goes like Inline first, Internal second and then external. Pro Tip: You can force an element to use a style when mentioned anywhere in these irrespective of the priority by using the ! symbol. Although it is not recommended to use this often, as this will slow down the page.

4. Tables in HTML

You might think tables are outdated and no one uses it nowadays. This is not true. Tables are being used in many parts of the website like the forms, tabular display of the contents, aligning content conveniently. Tables can be created using the original <table> tag and styling it on your own or by using the CSS Frameworks like Bootstrap or Materialize CSS to style the table easily. The table rows can also be dynamically generated by combining HTML with JavaScript (not necessary as a beginner).

<table>
  <tr>
    <th>S.no</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Tharun</td>
    <td>21</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Shiv</td>
    <td>26</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Nandi</td>
    <td>24</td>
    <td>Male</td>
  </tr>
</table>

The above code results in the following table

S.no Name Age Gender
1 Tharun 21 Male
2 Shiv 26 Male
3 Nandi 24 Male
5. Meta Tags

As a beginner, it is okay to ignore the meta tags. But as you start working on projects in web development where you want it to work on all sizes of desktops, on mobile phones, when you are deploying the website to the World Wide Web such that it appears on search engines like Google, you will definitely need to know about the meta tags. Let’s break it down, what does meta mean? Meta means data about data. So these meta tags are nothing but some data about our web page. Some of the stuff that you can do using meta tags is, you can set your website as a responsive website which will scale according to the display screen, you can add the tags related to the page, you can specify the author of the webpage, you can specify the encoding of the web page and many more. Just spend a few minutes going through the available meta tags so that you can google them and use it when you need them for your projects.

Where do I learn these?

I have got the exact place where you can learn these from, ask doubts and also get a Certificate on Completetion. Check out this course from Udemy (Click) Web Development - HTML - The Structure of any Website - FULL. The first few videos are free on my YouTube Channel. Try them out here: Being a Pro - YouTube - HTML Playlist Thank you for reading!

    Now you can subscribe to my blog to get the latest posts delivered directly to your inbox.

    Just enter your email below and confirm to subscribe!
    Get a FREE Ebook from me very soon!

Follow my articles on Dev.to: https://dev.to/tharunshiv

Subscribe to Tharun Shiv

Get the latest posts delivered right to your inbox

Tharun Shiv

Tharun Shiv

Devops Engineer Intern, PhonePe

Read More