HTML tags list with examples
today articles
learn HTML tags list with examples. html is a hypertext transport
languages. using a web development, this a simple language.
1.html basic Structure:
Basic Structure
1.< HTML >:
This Tag Main of html Strucure The < HTML > element tells the browser that the page will be formatted in HTML and, optionally, which world language the page content is in.
2.< TITLE >:
This Tag Used Title of webPage In this Tag
3.< HEAD >:
The element surrounds all the special “behind the scenes” elements of a web document. Most of these elements do not get displayed directly on the web page.
4.< BODY >:
The < BODY > element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web page.
Basic Example
1.< HTML >:
This Tag Main of html Strucure The < HTML > element tells the browser that the page will be formatted in HTML and, optionally, which world language the page content is in.
2.< TITLE >:
This Tag Used Title of webPage In this Tag
3.< HEAD >:
The element surrounds all the special “behind the scenes” elements of a web document. Most of these elements do not get displayed directly on the web page.
4.< BODY >:
The < BODY > element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web page.
Basic Example
<DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<h1>Homepage
Headline</h1>
<p>This
is a paragraph.</p>
</body>
</html>
2.html hello :
<html>
<head>
<title> Hello Html</title>
</head>
<h1>Hello
Html</h1><br><br>
</html>
3. html anchor tag or link tag :
Links are found in
nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
<html>
<head>
<title> Hyperlink demo</title>
</head>
<h1>HyperLink</h1><br><br>
<a
href="www.google.com">www.google.com</a>
</html>
4.html body tag:
Body Tag:
The HTML <body> tag is used for indicating the main content section of the HTML document. The HTML <body> tag defines the main content of the HTML document or the section of the HTML document that will be directly visible on your web page. This tag is also commonly referred to as the <body> element.
Body Tag Syntax:
<body>
element your html
</body>
Body Tag Example
<doctype html>
<html>
<head>
<meta
charset="UTF-8">
<title> HTML5
Example by www.techonthenet.com</title>
</head>
<body>
<h1>
Heading</h1>
<p> This is the
content.</p>
</body>
</html>
5.html drop down tag :
Html Drop Down Tag
The 'drop down' lists are one of the most practical types of lists. You probably already came across them all over the internet, but without knowing they had a fancy name like this.
Example
<!DOCTYPE HTML>
<html lang =
"en">
<head>
<title>formDemo.html</title>
<meta
charset = "UTF-8" />
</head>
<body>
<h1>Form
Demo</h1>
<form>
<fieldset>
<legend>Selecting
elements</legend>
<p>
<label>Select
list</label>
<select
id = "myList">
<option
value = "1">one</option>
<option
value = "2">two</option>
<option
value = "3">three</option>
<option
value = "4">four</option>
</select>
</p>
</fieldset>
</form>
</body>
</html>
6.html heading tag:
Basic Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading
Example</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>
7.html image tag:
Html Image Tag
Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the <form> tag.
Example
<html>
<head>
<title>My
Page</title>
</head>
<body>
<form
name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div
align="center">
<br><br>
<input
type="text" size="25" value="Enter your name
here!">
<br><input
type="image" src="rainbow.gif" name="image"
width="60" height="60"><br>
</div>
</form>
</body>
</html>
8.html table :
Html Lable
The HTML tag is used to add a label to a form control like text, textarea etc. in html tag <lable>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML
label Tag</title>
</head>
<body>
<label
for = "email">EMAIL-ID:<br />
<input
type = "email" value = "" name = "emailid"
size
= "30" placeholder = "Enter a valid email address">
<br
/>
<br
/>
<label
for = "phone">PHONE NO:<br />
<input
type = "text" value = "" name = "phno"
size
= "30" maxlength = "10" placeholder = "Enter a valid
phone number"
pattern
= "[0-9]{10}">
<br
/>
<br
/>
</body>
</html>
9.html list tag :
Html List Tag
Lists are used all the time on the web. Articles, website navigation menus, and product features on e- commerce websites all make frequent use of lists – even when you can't tell that a list is being used
There are three types of lists you can use, and this quick guide will show you how to use each.
1.Unordered Lists
2.Ordered Lists
3.description list
1.Unordered Lists:
used to group a set of related items in no
particular order
Unordered Lists Example
<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>
2.Ordered Lists:
used to group a set of related items in a
specific order
Ordered Lists Example
<ol>
<li>Gather ingredients</li>
<li>Mix ingredients
together</li>
<li>Place ingredients in a baking
dish</li>
<li>Bake in oven for an
hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten
minutes</li>
<li>Serve</li>
</ol>
3.description list:
used to display name/value pairs such as terms
and definitions
description Lists Example
<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML
Unordered List</title>
</head>
<body>
<ul type =
"circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
10.html password tag:
Html Password Tag
The difference is that what is entered into a password field shows up as dots on the screen. This is, of course, to prevent others from reading the password on the screen.
Example
<html>
<head>
<title>My
Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div
align="center">
Enter Password :
<input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>
11.html radio button tag example:
Html Radio Tag
Radio Buttons are used when the user must make only one selection out of a group of items. The for attribute is necessary to bind our custom radio button with the input. Add the input's id as the value of the for attribute of the label.
Example
<html>
<head>
<title>My
Page</title>
</head>
<body>
<form
name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div
align="center"><br>
<input
type="radio" name="group1" value="Milk">
Milk<br>
<input
type="radio" name="group1" value="Butter" checked>Butter<br>
<input
type="radio" name="group1" value="Cheese">
Cheese
<hr>
<input
type="radio" name="group2" value="Water">
Water<br>
<input
type="radio" name="group2"
value="Beer">Beer<br>
<input
type="radio" name="group2" value="Wine"
checked> Wine<br>
</div>
</form>
</body>
</html>
No comments:
Post a Comment