DEV Community

loading...
Cover image for This Is All The HTML You Need To Know

This Is All The HTML You Need To Know

Akshay R
Front End Developer
・4 min read

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>
Enter fullscreen mode Exit fullscreen mode

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

Explanation:

<html></html>
Enter fullscreen mode Exit fullscreen mode

It is the container for all the html tags

<head></head>
Enter fullscreen mode Exit fullscreen mode

It is used to represent head of the document, this is where all the metadata goes

<meta>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

It is used to declare the title of the webpage

<body></body>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/>
Enter fullscreen mode Exit fullscreen mode

It is a break tag used to give a one line break and it is a block level tag

<hr/>
Enter fullscreen mode Exit fullscreen mode

It is a horizontal line tag and it is also a block level element

<p>This is a paragraph tag</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

These are subscript and superscript
subscript Example: H2O
superscript Example: a2+b2

        <header>
            <nav></nav>
        </header>
Enter fullscreen mode Exit fullscreen mode

header and nav tags are used to create a header and navigation bar

<main></main>
Enter fullscreen mode Exit fullscreen mode

It is to write the main content of the webpage

<article></article>
Enter fullscreen mode Exit fullscreen mode

It is used to write a article, may be a blog post

<section></section>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode


`
note: will be explained

Let me know if there is something I missed.

Resources:

Photo by Pankaj Patel on Unsplash

Discussion (6)

Collapse
istealersn profile image
Stanley J Nadar • Edited

Good collection, you should also include strong and em with their meaning/differences - its important from accessibility standpoint.

Maybe include detail while you have listed dl.

Best practise is to use more HTML standard tags while building pages, it enhances your SEO and accessibility experience

Edit: updated the tags I was referring to

Collapse
akshayrak profile image
Akshay R Author

Okay will edit and add some explanation later today, thanks for the feedback 🙂

Collapse
akshayrak profile image
Akshay R Author

Added explanation for some of the tags, will add strong, em and remaining once in sometime

Collapse
mateusz_ksiazek_8 profile image
Mateusz Ksiazek

Thanks , really helping me out since I'm a beginner :)

Collapse
ohmiler profile image
Patiphan Phengpao • Edited

< ul > underlined </ ul > I think it should be < u >underlined< /u >
But, thank you for your article ❤️

Collapse
akshayrak profile image
Akshay R Author

Hey, Thanks for the comment, I corrected it now🙂