This Is All The HTML You Need To Know
Tags: html, beginners, webdev, css
Published: 2021-08-04 06:24:02

Everyone who are into front-end web development will have this question, "How much HTML should I know?", well here is the answer.
There are some tags that are most commenly used, which can get your 90% of the job done, so if you just know these 90%, rest 10% you can google.

So just go through the below code and if you could understand it your most of the work is done

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Akshay">
        <meta name="description" content="mostly used html tags">
        <meta name="keywords" content="html, complete html, beginners">
        <title>Title</title>
    </head>
    <body>
        <h1>This is h1</h1>
        <h2>This is h2</h2>
        <h3>This is h3</h3>
        <h4>This is h4</h4>
        <h5>This is h5</h5>
        <h6>This is h6</h6>
        <br/>
        horizontal line 
        <hr/>
        <!-- This is a comment which can only be seen in code,browsers ignores it, useful for the developers to understand the code better -->
        <p>This is a paragraph tag</p>
        <b>this is bold</b>
        <i>Italic</i>
        <u>underlined</u>
        <sub>subscript</sub>
        <sup>superscript</sup>
        <header>
            <nav></nav>
        </header>
        <main>
            <article>
                <section>
                    <img width="100" height="100" src="http://link" alt="image text" />
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                    <ol type="A">
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>  
                    </ol>
                    <dl>
                        <dt>Item1</dt>
                        <dd>description of item1</dd>
                        <dt>Item2</dt>
                        <dd>description of item2</dd>
                    </dl>
                    <table>
                        <thead>
                            <caption>Table Title</caption>
                            <tr>
                                <th>title1</th>
                                <th>title2</th>
                                <th>title3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                            <tr>
                                <td colspan="2">item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                        </tbody>
                    </table>
                    <hr>
                    <span>text1</span>
                    <span>text2</span>
                    <hr>
                    <div>text1</div>
                    <div>text2</div>
                </section>
                <section>
                    <aside>
                        <video src="somevideo.mp4" loop poster="thumbnail.jpg" autoplay controls width="100" height="100">some video text</video>
                        <iframe src="http://link" width="100" height="100" frameborder="0" allowfullscreen></iframe>
                    </aside>
                    <form action="">
                        <label for="">something</label>
                        <input type="text" value="something" placeholder="something" >
                        <input type="password">
                        <input type="date">
                        <input type="email">
                        <input type="range">
                        <input type="file">
                        <input type="checkbox">
                        <input name ="gender" type="radio" value="male">
                        <input name ="gender" type="radio" value="female">
                        <select name="itemSelect" id="itemSelect">
                            <option value="item1">item1</option>
                            <option value="item2">item2</option>
                            <option value="item3">item3</option>
                            <option value="item4">item4</option>
                        </select>
                        <textarea name="textarea" id="" cols="30" rows="10">some text</textarea>
                        <input type="submit">
                        <button type="submit">click here</button>
                    </form>
                </section>
            </article>
        </main>
        <footer>
            <a href="http://google.com">google</a>
            <a href="http://google.com" target="_blank">google in new tab</a>
        </footer>
    </body>
</html>
```

If you didn't understand something, just go through the explanation.

Explanation:

```
<html></html>
```
It is the container for all the html tags
```
<head></head>
```
It is used to represent head of the document, this is where all the metadata goes
```
<meta>
```
It is used to inform the browsers and web crawlers what the document is about and how it need to be represented, meta tags are really important for for SEO purposes

```
<title></title>
```
It is used to declare the title of the webpage

```
<body></body>
```
This where the actual content of the webpage resides

```
        <h1>This is h1</h1>
        <h2>This is h2</h2>
        <h3>This is h3</h3>
        <h4>This is h4</h4>
        <h5>This is h5</h5>
        <h6>This is h6</h6>
```
These are the tags used to write the headings and sub heading in the webpage, h1 is the main or bigger heading h6 is the smaller

```
 <br/>
```
It is a break tag used to give a one line break and it is a block level tag
```
<hr/>
```
It is a horizontal line tag and it is also a block level element

```
<p>This is a paragraph tag</p>
```
This tag is used to write a paragraph text, for example in a blog post we can use p tag for writing main content of the blog post.

```
        <b>this is bold</b>
        <i>Italic</i>
        <u>underlined</u>
```
These tags are used to format text into bold, italic and underlined, we can use all three of them on a single text

```
        <sub>subscript</sub>
        <sup>superscript</sup>
```
These are subscript and superscript
subscript Example: H<sub>2</sub>O
superscript Example: a<sup>2</sup>+b<sup>2</sup>

```
        <header>
            <nav></nav>
        </header>
```
header and nav tags are used to create a header and navigation bar

```
<main></main>
```
It is to write the main content of the webpage

```
<article></article>
```
It is used to write a article, may be a blog post

```
<section></section>
```
 It is used to create a section, most of the time we need more than one section to write or display on an webpage

```
<aside></aside>
```
This is used to display content that is not directly related to the main objective of the webpage, one example might be for displaying advertisement we can use aside tag

```
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                    <ol type="A">
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>  
                    </ol>
                    <dl>
                        <dt>Item1</dt>
                        <dd>description of item1</dd>
                        <dt>Item2</dt>
                        <dd>description of item2</dd>
                    </dl>
```
ul is used to display unordered list, it displays the list in bullet points
li is nothing but a list item, which explains itself
ol is used to display ordered list, it displays list in numerical order or alphabetical order
dl is used to display a descriptive list
dt is a descriptive term
dd is a descriptive description for descriptive term 

```
                 <table>
                        <thead>
                            <caption>Table Title</caption>
                            <tr>
                                <th>title1</th>
                                <th>title2</th>
                                <th>title3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                            <tr>
                                <td colspan="2">item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                        </tbody>
                    </table>
````
note: will be explained

Let me know if there is something I missed.

Resources:

Photo by <a href="https://unsplash.com/@pankajpatel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Pankaj Patel</a> on <a href="https://unsplash.com/s/photos/html?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>