Table of Content:

What is HTML?
Features
HTML Editor
HTML Skeleton
Comments
HTML Tags
List
Table
Image
Video
Formating
I-frame
Semantics
Form

What is HTML?

HTML is very popular and easy to learn language.
HTML is stand for Hyper Text Markup Language.
HTML defines how the web page looks and how to display content on web page.
Mainly html provide structure to the web.
Important to save your file with .html extension

Features Of HTML

Easy to learn and easy to understabd
use attributes in it.
Add videos, graphics and audios making it more attractive.
Case insensitive language
Show links of audio, video, image .

HTML Editors

Atom 2.Sandcode 3.Sublime 4.Visual Studio

HTML Skeleton

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

<!DOCTYPE html>

Providing Instruction to the browser about the HTML version

html

Act as a container to store all the code of program to store in it. and always write all code or head part as well as body part in it. Head and Body tag also declare in html tag.

head

Information write in head tag never show or display at web. head tag is only store information about the documentation ,title and store some metadata.

body

In body tag, all code write in body part and this coding ,content show on the web browser. it's contain like image, audio, video, links and etc.

Some Extensions

we love some extensions to use in our compiler and work start with professional. and done our work very easy and fast like:-

Emmet Abbreviation 2.Live server 3.Priter

HTML Comment

Html comment not display on the browser.
It help to understand the code and easy to readable.
Anyone understand the code part after reading the comment's about the code part.
we can comment a particular part of code is ctrl+/

one-line comment

<!-- comment  -->

Multi-line comment

 <!-- <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 <h2>This is heading two</h2> -->

HTML Tags

HTML contains some tags to write the content in it.

<!-- this is heading tag's -->
 <h1>This is a heading</h1>
 <h2>This is heading two</h2>
 <h3>This is heading three</h3>
 <h4>This is heading four</h4>
 <h5>This is heading five</h5>
 <h6> This is heading six</h6>

 <!-- this is paragraph tag -->
 <p>This is paragraph tag</p>

Mainly tag's contain opening tag or closing tag:-

some tags in html are only closing tag or some are only open tag
:Closing tag
is also known as closing tags, means they have open tag or close tag. like:- <p></p> <div></div> <h1></h1> <ol></ol> <ul></ul>

###Open tag: In html ,have some tag are only open tag. like:-

<img>,<input>,<hr>,<br>

Entities

Entities in HTML is, have some reserved characters to show in output. Like: > , < , &gcy;

https://codepen.io/Meghakhatri/pen/XWYVRbK

List

In HTML list are two type's.

Ordered List

In Ordered List ,list will show in numbering format.

<ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ol>

Unodered List In Unordered List ,list will show with bullets or disc.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

Table

Table tag used for creating a table.
First row always for table heading's .
Other row or column are create in table data tag.

https://codepen.io/Meghakhatri/pen/rNKpmLL

Image

In image tag we pass the image path and render in browser.
We can pass the random image link address in image tag.

https://codepen.io/Meghakhatri/pen/zYapwKN

UseMap

Image map is an image with clickable areas.
Usemap create a relationship between image and map.
Always show usemap name with hash(#) symbol.

click on flower or flower pot and see a message: %[https://codepen.io/Meghakhatri/pen/mdKpmRG]

Video

In video tag ,we will show or pass any video link path address.
Video tag support some attributes or controls like pause video, volume, mute, autoplay and etc.

https://codepen.io/Meghakhatri/pen/vYrpmma

Formatting

Formatting elements were designed to display special types of text.
https://codepen.io/Meghakhatri/pen/wvXpdqL

Iframe

HTML iframe is used to display a web page within a web.
In iframe Use the height and width attributes to specify the size of the iframe.

https://codepen.io/Meghakhatri/pen/bGKaWYX

Semantic

semantic element clearly describes its meaning to both the browser and the developer.

non-semantic elements:
and - Tells nothing about its content.
semantic elements: , , and
- Clearly defines its content.

All semantic tag's are as follow:-

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Form

HTML form is used to collect user input.
HTML element is used to create an HTML form for user input.
The element is a container for different types of input elements.
such as: text fields, checkboxes, radio buttons, submit buttons, etc.

https://codepen.io/Meghakhatri/pen/rNKpmZw

Thank's for reading Happy learning

Starting with HTML