Do you know these 5 topics in HTML?

#html #webdev #codenewbie #beginners

What is HTML?

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 that are nested. It consists of elements that have specific properties. Know the various elements that exist, know at least a few of the majorly used tags. Some of the most frequently 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 creative 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 - Cascading Style Sheets. There 3 ways to use CSS to an 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

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.

So these are the majority of the topics which you need to be aware of, before jumping into CSS and JavaScript. Feel free to reach out to me for any doubts on them.

The article was originally written on https://tharunshiv.com

Written by,