Learn HTML in 15 Min...


HTML
HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. You can make your own website using HTML. It defines the meaning and structure of web content. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript to describe a web page's presentation or appearance and functionality.
The term "hypertext" refers to links that connect online pages inside a single website or between websites. Links are an important part of the Internet. HTML annotates text, pictures, and other content for display in a Web browser using "markup." Tags, which are written in angle brackets, separate HTML elements. Tags like <img /> and <input /> insert content into the page immediately. Other tags, such as <p>, surround and offer information about document text, and may comprise sub-elements of other tags. An element's name inside a tag is case insensitive. It can be written in capital, lowercase, or a combination of both. The <title> tag, for example, can be written as <TITLE>, <Title>, or any other variation. However, it is conventional and advised to write tags in lowercase.
Base Tags
As Web Developers, we all have to use HTML as our basic language for building the structure of the whole website. More specifically "HTML Tags" play a very vital role in writing efficient HTML programs. Let's dive deep into this concept.
Why HTML tags?
Ok... Before starting with "What?" let's understand "Why?"
Each markup language has its own set of rules for creating, Defining, modifying, displaying & formatting the block of content on the editor or website. HTML (Hypertext Markup Language) uses elements & tags for the proper presentation of content as per the requirement of the admin & user.
What are HTML tags?
HTML tags are used for defining the blocks of text and assigning formatting. HTML tags are special keyword which is used to wrap the content & apply the rule of specific tag on the whole wrapped content.
We wrap the block of content using angle brackets: <tag keyword>
. Majorly (Not all) tag comes in pair of opening & closing tag. The closing tag is the same as an opening tag with the addition of a forward slash.
Example: <tag> ... Block of content... </tag>
Some tags don't have any closing tag. <img>
tag is one of them as we don't need to define an opening and closing to display an image, just a location of where the image can be found.
Example: <img src="path_of_image">
List of common HTML tags:
- Document structuring tags:
Opening Tag | Closing Tag |
<html> | </html> |
<head> | </head> |
<title> | </title> |
<body> | </body> |
- Container tags:
Opening Tag | Closing Tag |
<h1> to <h6> | </h1> to </h6> |
<p> | </p> |
<div> | </div> |
<span> | </span> |
<em> | </em> |
<strong> | </strong> |
<a href = "document location"> | </a> |
<ol> | </ol> |
<ul> | </ul> |
<li> | </li> |
<!-- | --> |
- Semantic HTML tags:
Opening Tag | Closing Tag |
<header> | </header> |
<nav> | </nav> |
<main> | </main> |
<aside> | </aside> |
<footer> | </footer> |
Empty (Non-Container) Tags:
Tag |
<br/> |
<img src="image location" alt="alternate text" /> |
Tags for Table
Opening Tag | Closing Tag | Sample Attributes |
<table> | </table> | |
<tr> | </tr> | |
<th> | </th> | scope="row"scope="col" |
<td> | </td> | |
colspan="number" | ||
rowspan="number" |
Subscribe to my newsletter
Read articles from Lalit LP directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
