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: H2O
superscript Example: a2+b2
<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 Pankaj Patel on Unsplash
Top comments (6)
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
Okay will edit and add some explanation later today, thanks for the feedback 🙂
Added explanation for some of the tags, will add strong, em and remaining once in sometime
Thanks , really helping me out since I'm a beginner :)
< ul > underlined </ ul > I think it should be < u >underlined< /u >
But, thank you for your article ❤️
Hey, Thanks for the comment, I corrected it now🙂