Introduction
HTML stands for HyperText Markup Language. It is a markup language that allows us to make web pages for websites. It is just a simple text file with a .html or .htm extension. Likewise other programming languages, HTML also has many versions, here we will talk about HTML5.
It is human-readable and uses tags to define what manipulation has to be done. It is used by browsers to manipulate text, images, and other content, in order to display it in the required format.
HTML is created by Tim Berners-Lee in 1991. You can learn the different tags and elements on a site like w3schools, understand how they work, and familiarize yourself with the language. This article is concerned with HTML syntax and some useful information.
HTML Elements
HTML element is defined by a start tag, some content, and end tag. There are some empty tags, which means that they do not need any end tag.
<tagname> Contents... </tagname>
Doctype Declaration
Every HTML5 document must start with this declaration. It is recommended by W3C
<!DOCTYPE html>
HTML Comments
HTML comments are not displayed by browser but it is helpful for developers to debug the code later.
<!-- Comments here -->
HTML Headings
Heading 1
This is the most important heading
<h1>Heading level 1</h1>
Heading 2
This is less important heading than heading 1
<h2>Heading level 2</h2>
Heading 3
This is the least important heading than heading 2
<h3>Heading level 3</h3>
Heading 4
This heading has ranking 4
<h4>Heading level 4</h4>
Heading 5
This heading has ranking 5
<h5>Heading level 5</h5>
Heading 6
This heading has ranking 6
<h6>Heading level 6</h6>
HTML Text Formatting
<strong> tag
It also makes the text bold with added semantic importance.
<strong>This is strong text</strong>
<small> tag
This element is used to make the text smaller.
<small>This is small text</small>
<mark> tag
It is also possible to highlight a text in HTML using this tag.
<mark>This is marked/highlighted text</mark>
<b> tag
We can make the text bold using this tag.
<b>This is bold text</b>
<i> tag
This tag is used to italicise the text.
<i>This is italic text</i>
<em> tag
It also makes the text italic with added semantic importance.
<em>This is emphasized text</em>
<sup> tag
This element is used to superscript a text.
<sup>Superscripted text</sup>
<sub> tag
This element is used to subscript a text.
<sub>Subscripted text</sub>
<del> tag
This element is used to strike through the text marking the part as deleted.
<del>This is deleted text</del>
<ins> tag
This element is used to underline a text marking the part as inserted or added.
<ins>This is inserted text</ins>
HTML Empty tags
The tags that do not contain any closing tags are empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.
<img> tag
This tag is used to add or embed the images to a webpage/website.
<img src="url" alt="some_text" width="" height="">
<br> tag
This tag is used to create a line break in a text.
<br>
<hr> tag
This tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page.
<hr>
<link> tag
This tag defines the relationship between the current document and an external resource. It is most often used to link to external stylesheets.
<link href="style.css" rel="stylesheet">
<meta> tag
Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s source code.
<meta charset="utf-8">
Container
There are several container tags in HTML which contain some data such as text, image, etc.
<div> tag
It is used to make divisions or blocks on the document.
<div> This is div block </div>
<span> tag
It is a container for inline content
<span> This is span block </span>
<p> tag
It defines paragraph
<p> This is a paragraph </p>
<pre> tag
It defined pre-formatted text.
<pre> This is pre-formatted text </pre>
<code> tag
It defines source code
<code>selectAll()</code>
List Tags
HTML lists allow web developers to group a set of related items in lists.
<ol> tag
This tag defines an ordered list. An ordered list can be numerical or alphabetical.
<ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>
<ul> tag
This tag represents an unordered list of items, typically rendered as a bulleted list.
<ul>
<li>Data 1</li>
<li>Data 2</li>
</ul>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
HTML Table Structure
<table>
<caption>Demo Table</caption>
<thead>
<tr>
<th>Column1</th>
<th colspan="2">Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
Links
Links are clickable text that can redirect you to some other page.
<a> tag
<a> or anchor tag defines a hyperlink.
<a href="https://example.com/">Go to Website</a>
HTML forms
Form is used to collect user’s input, generally user’s data is sent to server for further processing. Here is an example of HTML form with two input fields and one submit button:
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Semantic Elements
Semantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.
<header> tag
It defines a header in the document
<header>This is a header</header>
<nav> tag
This tag defines a set of navigation links.
<nav> Navigation links </nav>
<section> tag
It defines a section in the document
<section>This is a section</section>
<article> tag
This tag specifies independent, self-contained content.
<article> Enter your data here </article>
<aside> tag
This tag defines some content aside from the content it is placed in.
<aside>Content...</aside>