Understanding basic HTML tags is important while learning HTML. Here are the HTML elements that are used more frequently than others. They are:
-
The Heading
<h1>to<h6>tag - The
<p>tag - The
<img>tag - The
<a>tag - The
<div>tag - The
<video>tag - The
<audio>tag - The
<table>tag - The
<form>tag - The
<input>tag
HTML Headings
Headings are defined with the <h1> to
<h6> tags. <h1> is the most
important heading, and <h6> is the least important.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>HTML Paragraphs
The <p> tag defines a paragraph. A paragraph always
starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>HTML Links
HTML links are defined with the <a> tag. The link's
destination is specified in the href attribute.
<a href="https://www.example.com">This is a link</a>HTML Images
HTML images are defined with the <img> tag. The source
file (src), alternative text (alt),
width, and height are provided as attributes.
<img src="image.jpg" alt="Description of image" width="500" height="600">HTML Divisions
The <div> tag defines a division or a section in an
HTML document. It is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
<div style="background-color: lightblue; padding: 20px;">
<h2>This is a heading inside a div</h2>
<p>This is a paragraph inside the same div.</p>
</div>HTML Video
The <video> tag is used to embed video content in a
document, such as a movie clip or other video streams.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>HTML Audio
The <audio> tag is used to embed sound content in a
document, such as music or other audio streams.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>HTML Tables
The <table> tag defines an HTML table. Each table row
is defined with a <tr> tag. Each table header is
defined with a <th> tag. Each table data/cell is
defined with a <td> tag.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>HTML Forms
An HTML form is used to collect user input. The user input is most often
sent to a server for processing. The <form> element is
a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>HTML Input Types
The <input> element is the most important form element.
The <input> element can be displayed in several ways,
depending on the type attribute.
Here are some common input types:
<!-- Text input -->
<input type="text" placeholder="Enter your name">
<!-- Password input -->
<input type="password" placeholder="Enter your password">
<!-- Radio buttons -->
<input type="radio" name="gender" value="male" placeholder="Male"> Male<br>
<input type="radio" name="gender" value="female" placeholder="Female"> Female<br>
<input type="radio" name="gender" value="other" placeholder="Other"> Other<br>
<!-- Checkboxes -->
<input type="checkbox" name="vehicle1" value="Bike" placeholder="I have a bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car" placeholder="I have a car"> I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat" placeholder="I have a boat"> I have a boat<br>
<!-- Submit button -->
<input type="submit" placeholder="Submit">