<p> is used to align items in paragraph
<br> is used to for line break - Empty Tag ( No closing bracket required ) ^
<a> is to allow users to click their way from page to page. There are various types of links. For example link to an email
<a href="https://github.com/Thiru-Malai/"> Get out my github page </a>
Link Target
The target attribute specifies where to open the linked document
<a> href="https://www.w3schools.com/" target="_blank" >Visit W3Schools!</a>
<img> is used to display images in the web page
<img src="https://avatars.githubusercontent.com/u/73980589?v=4" width="100" height="100" alt="Thirumalai">
<pre> - Preformatted Text It is rendered as the same format as you have entered ( No trimming )
Written by Elon Musk.
Visit us at:
https://www.tesla.com/ abcd
USA
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, architecto vitae laboriosam itaque dolorum odio similique sed debitis non qui dolore incidunt quibusdam optio dignissimos minus amet ipsam omnis, eveniet corrupti, aperiam ipsum. Iure adipisci laborum, aut eius nisi magni enim voluptas iste quisquam perferendis explicabo, atque itaque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, labore!
A favicon is a small icon ( image ) that is displayed next to the title of the webpage.
<link rel="icon" type="image/x-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2048px-HTML5_logo_and_wordmark.svg.png">
| SNO | NAME | PHONENUM | ADDRESS | TOTAL MARKS |
|---|---|---|---|---|
| 1 | BILL GATES | 9123456789 | ABC, XYZ | 100 |
| 2 | ELON MUSK | 9123456789 | DEF, GHI | 100 |
| TOTAL MARKS SCORED | 200 | |||
<table border="1px">
<caption style="text-align: center;">STUDENT TABLE</caption>
<tr>
<th>SNO</th>
<th>NAME</th>
<th>PHONENUM</th>
<th>ADDRESS</th>
<th>TOTAL MARKS</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>BILL GATES</td>
<td>9123456789</td>
<td>ABC, XYZ</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>ELON MUSK</td>
<td>9123456789</td>
<td>DEF, GHI</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">TOTAL MARKS SCORED</td>
<td>200</td>
</tr>
</tfoot>
</table>
Various types of lists
Ordered List
<ol type="A">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ol>
Unordered List
<ul type="circle">
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>
Description List
<dl>
<dt>Batman</dt>
<dd> - DC Movie</dd>
<dt>Iron man</dt>
<dd> - Marvel Movie</dd>
</dl>
Block Elements
<address> <article> <aside> <blockquote> <canvas> <dd> <dl> <dt> <div>
<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr>
<li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
<a> <abbr> <b> <bdo> <br> <button> <cite> <code> <dfn> <em> <i> <u>
<img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select>
<small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
iframes is used to display a webpage within a web page
<iframe src="index.html" width="80%" height="360px" title="Learn HTML"></iframe>
code - Defines a piece of computer code
x = 6;
y = 6;
z = x + y;
kdb - Defines keyboard input
Press Ctrl + S to save the content
samp - Defines a sample output from a computer program
Cannot locate the file. Please make sure it is available
pre - Preformatted Text It is rendered as the same format as you have entered ( No trimming )
Sections divided the content into separate paragraphs. It groups related content together like Introduction, Chapters, etc.
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, ad.</section>
Article tag specifies independent, self-contained content. It is more commonly used in blog posts, article, forum post,news story and comments.
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit, voluptate.</article>
Aside
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, aspernatur accusamus itaque magnam, nostrum debitis ipsa sit amet similique veritatis iusto sunt iure, delectus veniam animi eveniet harum impedit voluptatem repellendus eaque velit provident. Itaque illo asperiores animi dolores autem a! Odit, quas nostrum culpa minima voluptates mollitia suscipit velit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis, nulla iste consectetur provident voluptate aliquam corrupti asperiores totam iure molestiae et magnam animi assumenda, ab enim eos nostrum sunt! Aliquam sed saepe et ducimus eaque labore, possimus quos iste quas commodi quod corporis architecto odit. Laudantium quis distinctio perferendis eveniet?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque officia laudantium aspernatur vero quo ipsa reprehenderit pariatur fugit et? Sed, cupiditate ipsum assumenda dignissimos dolorum vitae. Magni blanditiis saepe asperiores molestias incidunt velit pariatur dolore modi hic nisi ducimus animi voluptatem libero similique perferendis, aperiam quia quod eum ipsum obcaecati.
A HTML Form is used to collect user input. The user input is sent to the server for processing.
<form action="#" method="POST">
<label for="name">Name:
<input type="name" name="name" id="name">
</label>
<br>
<br>
<label for="phonenum">Phone Number:
<input type="text" name="phonenum" id="phonenum">
</label>
<br>
<br>
<label for="address">Address:
<br>
<textarea rows="10" cols="20" id="address">
</textarea>
<br>
<label for="gender">Gender:
<label for="male">Male</label><input type="radio" name="gender" id="male" checked>
<label for="female">Female</label><input type="radio" name="gender" id="female">
</label>
<br>
<br>
<label for="Favourite Characters">Choose your favourite characters</label>
<br>
<input type="checkbox" name="character" id="superman">Superman
<br>
<input type="checkbox" name="character" id="spiderman">Spider man
<br>
<input type="checkbox" name="character" id="batman">Bat man
<br>
<input type="checkbox" name="character" id="ironman">Iron man
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>