This content originally appeared on DEV Community and was authored by akshayrak
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>
<ul>underlined</ul>
<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>
Let me know if there is something I missed.
Resources
Photo by Pankaj Patel on Unsplash
This content originally appeared on DEV Community and was authored by akshayrak
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
akshayrak | Sciencx (2021-08-04T06:24:02+00:00) This Is All The HTML You Need To Know. Retrieved from https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/
" » This Is All The HTML You Need To Know." akshayrak | Sciencx - Wednesday August 4, 2021, https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/
HARVARDakshayrak | Sciencx Wednesday August 4, 2021 » This Is All The HTML You Need To Know., viewed ,<https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/>
VANCOUVERakshayrak | Sciencx - » This Is All The HTML You Need To Know. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/
CHICAGO" » This Is All The HTML You Need To Know." akshayrak | Sciencx - Accessed . https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/
IEEE" » This Is All The HTML You Need To Know." akshayrak | Sciencx [Online]. Available: https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/. [Accessed: ]
rf:citation » This Is All The HTML You Need To Know | akshayrak | Sciencx | https://www.scien.cx/2021/08/04/this-is-all-the-html-you-need-to-know/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.