HTML div tag

HTML div tag with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

<< Back to HTML

next → ← prev

HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag is just like a container unit which is used to encapsulate other page elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once. For example: If you wrap a set of paragraph elements into a div element so you can take the advantage of CSS styles and apply font style to all paragraphs at once instead of coding the same style for each paragraph element.

<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to TheDeveloperBlog.com, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>

Test it Now

Output:

Welcome to TheDeveloperBlog.com, Here you get tutorials on latest technologies.

This is second paragraph.

Difference between HTML div tag and span tag

div tag	span tag
HTML div is a block element.	HTML span is an inline element
HTML div element is used to wrap large sections of elements.	HTML span element is used to wrap small portion of texts, image etc.

HTML div example: Login Form

In this example, we are creating box using div tag. There is a login form inside the box. Let's see the CSS and HTML code.

CSS Code:

.loginform{
	padding:10px;
	border:1px solid pink;
	border-radius:10px;
	float:right;
	margin-top:10px;
}
.formheading{
	background-color:red;
	color:white;
	padding:4px;
	text-align:center;
}
.sub{
background-color:blue;
padding: 7px 40px 7px 40px;
color:white;
font-weight:bold;
margin-left:70px;
border-radius:5px;
}

HTML Code:

<div class="loginform">
<h3 class="formheading">Please Login</h3>
<form action="LoginServlet" method="post">
<table>
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr>
</table>
</form>
</div>

Test it Now

Output:

Please Login

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<div>	Yes	Yes	Yes	Yes	Yes

Next TopicHTML em tag

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf

TheDeveloperBlog.com