Kachi Cheong
Posted on December 29, 2022
HTML (Hyper Text Markup Language) is the foundation of each webpage. It is essentially the skeleton of any webpage. Anyone who wants to be a frontend developer will need to know it.
In total there are over 100 html tags and when writing html files you'll only use about 30% of them on a regular basis. It is important to clarify that you don't need to remember every html tag off the top of your head.
In this article I'll outline the most frequently used HTML tags. Which I've split into 6 sections:
- Page Tags
- Body Tags
- List Tags
- Form Tags
- Table Tags
- Embedded Tags
Page Tags
Page tags are used tags used to outline the format of your page. Much like a human skeleton, html tags can be divided into different sections which indicates where they should sit on a page. Below are the most commonly used page tags.
| HTML TAG | Description |
|---|---|
<html> |
Defines the root of an HTML document |
<head> |
Contains metadata/information for the document |
<title> |
Defines a title for the document |
<body> |
Defines the document's body |
<main> |
Specifies the main content of a document |
<footer> |
Defines a footer for a document or section |
<header> |
Defines a header for a document or section |
<link> |
Defines the relationship between a document and an external resource (most used to link to style sheets) |
<style> |
Defines style information for a document |
<script> |
Defines a client-side script |
<noscript> |
Defines an alternate content for users that do not support client-side scripts |
Here is a common layout you're likely to see for a html page.
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
<script src="./script_1.js"></script>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
<script src="./script_2.js"></script>
<noscript>No javascript for this page</noscript>
</body>
</html>
Body tags
These are the most common tags you'll see inside of a body tag. They are used to display the text:
| HTML TAG | Description |
|---|---|
<div> |
Defines a section in a document. <section> can also be used for larger sections |
<h1> |
Defines HTML headings and size depends on h(number). Can select between <h1> and <h6>
|
<p> |
Defines a paragraph |
<b> |
Defines bold text. <strong> can also be used. |
<small> |
Defines smaller text |
<br> |
Defines a single line break |
<button> |
Defines a clickable button |
<i> |
Defines a part of text in an alternate voice or mood. <em> can also be used |
<a> |
Defines a hyperlink |
<s> |
Defines text that is no longer correct |
Here is an example of all of these tags in use:
<body>
<h1>Page Title</h1>
<h2>Sub Title</h2>
<div>
<p><b>Bold Text</b></p>
<p><small>Small Text</small></p>
<p>
Line One <br />
Line Two
</p>
<p><i>Italic Text</i></p>
<a href="https://www.google.com/" target="_blank">Google Link</a>
<button>Click Me!</button>
</div>
<script src="./script_2.js"></script>
<noscript>No javascript for this page</noscript>
</body>
Lists Tags
For a list you'll use either <ol> or <ul> with each bullet point wrapped in a <li>
| HTML TAG | Description |
|---|---|
<ol> |
Defines an ordered list |
<ul> |
Defines an unordered list |
<li> |
Defines a list item |
Here is an example of both in use:
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
Form Tags
Forms are a bit trickier than the previous html tags as input has multiple types. Lets start by breaking down the tags
| HTML TAG | Description |
|---|---|
<form> |
Defines an HTML form for user input |
<textarea> |
Defines a multiline input control (text area) |
<input> |
Defines an input control. See below for further explanation |
<select> |
Defines a drop-down list |
<option> |
Defines an option in a drop-down list |
Input Types
I won't cover every input type, I'll go through the most common one's you're likely to see on a html page.
| Type name | Description |
|---|---|
| checkbox | Checkboxes let a user select ZERO or MORE options of a limited number of choices. |
| color | used for input fields that should contain a color. |
| date | used for input fields that should contain a date |
| input fields that should contain an e-mail address. | |
| file | a file-select field and a "Browse" button for file uploads |
| number | for number inputs only |
| radio | enables users to only select one of the following fields |
| range | defines a slider control for entering a number a rough number important |
| tel | for telephone number inputs |
| text | for basic text strings |
| time | for time selection |
| url | used for input fields that should contain a URL address |
Example
Here is a basic form with multiple input types:
<form>
<label for="name">Name:</label>
<input type="text" />
<br />
<label for="age">Age:</label>
<input type="number" />
<br />
<label for="start">when did you start coding?</label>
<input type="date" />
<br />
<label for="image">Image:</label>
<input type="file" />
<br />
<div>
<p>Favourite Language:</p>
<br />
<input type="radio" name="fav_language" value="HTML" />
<label for="html">HTML</label>
<input type="radio" name="fav_language" value="CSS" />
<label for="css">CSS</label>
<input type="radio" name="fav_language" value="JavaScript" />
<label for="javascript">JavaScript</label>
</div>
<div>
<p>Would would you like to learn next?</p>
<select>
<option>Ruby</option>
<option>Python</option>
</select>
</div>
<div>
<p>What have you learnt so far?</p>
<textarea placeholder="What have you learnt so far?"> </textarea>
</div>
</form>
Table Tags
These are the tags used for displaying tables:
| HTML TAG | Description |
|---|---|
<table> |
Defines a table |
<caption> |
Defines a table caption |
<thead> |
Groups the header content in a table |
<tbody> |
Groups the body content in a table |
<tfoot> |
Groups the footer content in a table |
<tr> |
Defines a row in a table |
<th> |
Defines a header cell in a table |
<td> |
Defines a cell in a table |
Tables are not the easiest thing to wrap your head around. But the basic rules are as follows:
- The entire table should be wrapped inside of
<table>tags. - A
<caption>can be used if you need a table title. -
<thead>is used for the first row<tbody>used for the other rows. - Every row is wrapped in
<tr>and each column use wrapped in a<td>(or<th>for the<thead>row). - If you want a final table row for things such as total or summaries use
<tfoot>. - By default tables do not have any styling so they should be added using CSS
Example
Here is an example of a table using HTML tags.
<table>
<caption>
Example Table
</caption>
<thead>
<tr>
<th>-</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
Embedded tags
Embedding is used to add pictures, audio and videos to your html page. These tags require a source file.
Here is a list of commonly used tags for embedding:
| HTML TAG | Description |
|---|---|
<source> |
Defines multiple media resources for media elements (<video> and <audio>) |
<img> |
Defines an image. You can also use <video> and <audio>
|
<embed> |
Defines a container for an external application |
<iframe> |
Defines an inline frame |
I won't give examples of these specific tags cause they vary a lot. But when you are comfortable with the other aspects of HTML, play around with them.
Summary
The most important tags are the ones outlined in this article. For those new to coding, don't spend too much time trying to remember every tag that exists, your time can be spent elsewhere. Priorities learning CSS and Javascript once you've understood the fundamentals of HTML.
Thank you for reading, I hope this tutorial helps!
A full list of html tags can be found here.
Posted on December 29, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
