Complete HTML 🤯
Tags: beginners, programming, webdev, tutorial
Published: 2023-07-03 10:32:34

## Introduction
Welcome 👋 to this blog. This blog contains all the required information of **HTML**. If you are completely new to the web development then you are in the right place and also if you are professional then also you can revise by reading this blog and also give me feedback in the comment section.
Let's get started 🚀 

## HTML 
HTML stands for **HyperText Markup Language**. It gives the basic structure of the website or webpages. It define how your website look like in the sense of structure i.e., website contains heading, input, form, table, button and many more. 


HTML Code

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body> 
    <h1>Hello world</h1>
  </body>
</html>
```

You can check the live version of the Hello world website [here](https://ankur0904.github.io/blog-1/complete-HTML/helloworld.html) whose code is written above.



![Hello world webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m594d7kiy5eo4dw3i4i.png)

We will talk about each line of the code in details so that you can get the idea of each line.


### <!DOCTYPE html>
This line basically tells the web browser which **HTML** version we are using. In this case we are **HTML5**.


### html 
This is **HTML** element that contains all the code of our webpage. In other words, this contains all the structure and setup required _i.e., external CSS, JS, CDN etc._ of the webpage. You may notice that all the content comes between `<html>` and `</html>`. This is because so that all the content will be between these elements. `<html>` is generally refers to opening tags and `</html>` is generally refers to the closing tag.


### head
This element contains all the requirements of the webpage. _for example_ if you want to add some external CSS file, external JS file or some external CDN which is a requirement for the website then this element comes in handy. If you don't know about CSS it is used for the styling purpose, JS for the functionality purpose and CDN stands for Content Delivery Network.


### title 
This element contains the **Title** which is shown in the tab of the **web browser**. If you go to the Hello world website you will notice in the tab of the web browser, there is the title `Hello world`. This is the main work of these `<title>...</title>` tags.


### body 
This element contains the structure which is visible to the user. The above elements you can imagine can be used for the setup of our webpage. The main content goes into the body section.


### h1 
`h1` is a heading element that is used for the heading. If you go to the hello world website there the hello world which is visible to us is the heading. `h1` is not only the heading element we have. We have a heading element that starts from `h1` and goes till `h6` the only difference is that `h1` is larger and then the size is decreased till  `h6`.  
 
If you want to read more about the elements of HTML you can check it [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

## Lets create some table

```HTML
<table>
  <tr>
    <th>S.No.</th>
    <th>Day</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Sunday</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Monday</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Tuesday</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Wednesday</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Thursday</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Friday</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Saturday</td>
  </tr>
</table>
```
`table` : This is the table element which is used to create the table.
`tr` : It means table row. i.e., the row of the table.
`td` : It means table data. i.e., the data which contains the table.

You can check the live version of the code [here](https://ankur0904.github.io/blog-1/complete-HTML/table.html).
**Note** This code must be written between the `body` element.


![HTML table webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu55dcduiih7lti6ral4.png)

## Time to create HTML form 

You might have seen some HTML form when you surf the internet. Let's time to create our own HTML form.

Here is the code snippet.

```HTML
    <form>
        Name: <input type="text" name="name"><br>
        Email: <input type="email" name="email"><br>
        <input type="submit" value="Submit">
    </form>
```

`form` : The HTML element help us to create the HTML form. 
`input` : The input element allow us to take the input from the user. The `type="email"` and `name="email"` is called **HTML attribute.**

You can check the live version of the webpage [here](https://ankur0904.github.io/blog-1/complete-HTML/form.html).
**Note** This code must be written between the `body` element.


![HTML form webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6gec3mmy2sbvn6gbco4.png)

## Conclusion

In conclusion, HTML serves as the foundation of a website or webpage by defining its structure. It determines how the website appears in terms of elements such as headings, forms, tables, buttons, and more. By using HTML tags and elements, we can create a well-structured and organized webpage.






Contact me: ankursingh91002@gmail.com 
            [LinkedIn](https://www.linkedin.com/in/ankur-singh-161458227/)
            [Twitter](https://twitter.com/ankursingh91002)