Learn Complete HTML For Beginners in 10 Minutes

HTML stands for Hypertext Markup Language and it is a widely used programming language used to develop web pages. Through this HTML Tutorial, we’ll understand what HTML means, What are the features of HTML and Many More so without wasting Time let’s Dive in.

What is HTML

HTML stands for Hypertext Markup Language
Hypertext stands for Link between web pages.
Markup Language means Text between tags that define the structure.

HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with .html extension. In this HTML Tutorial, we’ll understand all the basic concepts required to kick-start your journey in HTML.

Applications of HTML

HTML is used for various purposes. Let us take a look at them

Web Pages Development

HTML is famously used for creating web pages on the world wide web. Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages. Every page on the internet is written using HTML.

Navigating the Internet

Navigating on the internet would have been quite a tedious task without HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without anchor tags, you would literally have to enter URL every time. Using anchors tags, you can also navigate within a webpage.

Embedding Images and Videos

HTML allows us to embed images and videos with ease and gives us features to adjust height, position and even rendering type. You can adjust controls, thumbnails, timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier with the help of

Client-side storage

HTML5 has made client-side storage possible using localStorage and IndexD due to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward, with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is a larger and more capable client-side data store. With the user’s permission, the IndexDB database can be enlarged.

Game development

Although you cannot create complex high-end video games with HTML, the <canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can be run on browsers.

Data entry support

With the usage of new HTML5 standards in all the latest browsers, developers can simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several new attributes for data-entry and validation purposes.

Interacting with Native APIs

With the help of HTML, you can interact with your Operating system. With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much more.

Features Of HTML

The learning curve is very easy (easy to modify)
Creating effective presentations
Adding Links wherein we can add references
Can display documents on platforms like Mac, Windows, Linux, etc
Adding videos, graphics, and audios making it more attractive
Case insensitive language

HTML Editor

Notepad
Notepad++
Atom,
HTMLpad 2020
Sublime Text (latest version is 4)

HTML5 CODE

HTML Skeleton<!DOCTYPE html><html>  <head>    <title></title>  </head>  <body>  </body></html>

HTML Basic

Type Declaration

<!DOCTYPE html>

Instruction to the browser about the HTML version.

Root Tag

<html>

Root element which acts as a container to hold all the code
The browser should know that this is an HTML document
Permitted content: One head tag followed by one body tag

Head Tag

<head>

Everything written here will never be displayed in the browser
It contains general information about the document
Title, definitions of CSS and script sheets
Metadata(information about the document)

Body Tag

<body>

Everything written here will be displayed in the browser
Contains text, images, links that can be achieved through tags

Examples:<p> This is our first paragraph. </p><a href=”http://www.google.com”>Go To Google</a><img src=”photo.jpg”>

HTML Comment

Comments don’t render on the browser. Helps to understand our code better and makes it readable. Helps to debug our code. There are Three ways to comment:

Single line
Multiple lines

<!-- This is a comment --><!-- This is a multi-line HTML comment  It contains a lot of HTML content inside it.  <div id="header">  <h1 id="my-logo" class="title">Picture learner</h1>-->Comment tag //Supported by IE

HTML Elements

Elements are created using tags
Elements are used to define the semantics
Can be nested and empty

What is HTML Elements Definition

<p color="red"> This is our first Paragraph </p>

Explanation :

Start Tag: <p>

Attributes: color=”red”

End Tag: <p>

Content: This is our first Paragraph

Types of Elements

There are different types of elements in HTML. Before moving ahead in the HTML Tutorial, let us understand the types of elements.

Block Level

Takes up full block or width and adds structure in the web page.
Always starts from the new line.
Always end before the new line.

Example:<p><div><h1>...<h6><ol>...<ul>

Inline Level

Takes up what is requires and adds meaning to the web page
Always starts from where the previous element ended

Example :<span><strong><em><img><a>

HTML Attributes

Properties associated with each tag is called an Attribute.

Example Structure<tag name="value"></tag>

There are some Global Attributes that can be applied to all the tags.

Title: Add extra information (hover).
Style: Add style information(font,background,color,size).

There are some attributes that can be applied to specific tags.

<img src=” URL” width=”100” height=”70” alt="File cannot be loaded">

src is the attribute used in image tag to define the path
Width is an attribute used to define width in pixels
Height is an attribute used to define width in pixels
Alt i.e alternate text if an image is not loaded

<a href="URL"> Name of the link </a>

href is used for defining the path of the link

<hr color="red">

color is used to set the color of the horizontal line drawn on the webpage.

HTML Tags

Enclosed within <>.
Different tags render different meanings.

Title Tag

<title>

Whatever is written this tag comes up in the web page’s tab
Defines the title of the page

Syntax:<title>Home</title>

Paragraph Tag

Defines the paragraph

Syntax:<p> This is our first Paragraph </p>

Self-closing tags

<hr> - Stands for horizontal rule<br> - Stands for break line / Moving to next line

Image Tags

To add images in the web page

Syntax:<img src="path">Example:<!DOCTYPE html><html>  <head>    <title> </title>  </head>  <body>    <img src="https://images.unsplash.com/photo-1674071393771-eaeaa3d4d1c4?ixlib=rb4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" title="mountain" style="width:500px">  </body></html>

Heading Tag

Stands for heading tag.
<h1> to <h6>
Defines heading of a page.
h1 represents most important page in the page.
h6 represents least important page in the page.

Syntax:<h1>This is my first heading </h1>Example:<!DOCTYPE html><html>  <head>    <title></title>  </head>  <body>    <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>  </body></html>

Strong Tag

Defines the text to be bold.
Replace the <b> Tag in HTML 5.

Syntax:<strong> This text is important </strong>Example:<!DOCTYPE html><html> <head>  <title> </title> </head> <body>   <p> Lorem ipsum dolor sit <strong>amet, consectetur adipisicing elit, sed do eiusmod</strong>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p> </body></html>

emphasized Tag

<em></em> Tag.
Defines the text to be emphasized text.
Replaces the <i> Tag in HTML 5.

Syntax:<em> This text is special </em>Example:<!DOCTYPE html><html> <head>  <title> </title> </head> <body>   <p> Lorem ipsum dolor sit <em>amet, consectetur adipisicing elit, sed do eiusmod</em>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p> </body></html>

<li> Tag
Defines the list item.
Used inside the ol and ul tag to define the events.

There are Two Types of list Ordered List and Unordered List

Ordered List

<ol> Tag
Stands for an ordered list
To define a series of events that take place in some order
Example making a tea (like a flow chart)

Syntax:<ol>………</ol>Example:<!DOCTYPE html><html>  <head>    <title></title>  </head>  <body>    <ol>      <li> Cricket </li>      <li> Football </li>      <li> Hockey </li>    </ol>  </body></html>

Un Ordered List:

<ul> Tag
Stands for unordered list
To define a series of events that take place where the order is not important.
Example your hobbies

Syntax:<ul>………</ul><li> </li>Example:<!DOCTYPE html><html>  <head>    <title></title>  </head>  <body>    <ul>      <li> Cricket </li>      <li> Football </li>       <li> Hockey </li>    </ul>  </body> </html>

Div and Span Tags

<div> and <span> Tags
Both of these are used to group different tags.

Search Suggest