codescracker


html

HTML Block Level and Inline Tags



« Previous Tutorial Next Tutorial »


HTML Block

Here you will learn all about block level and inline tags in HTML with examples. Firstly, you will learn all about block level tags in HTML with examples then you will learn all about inline tags in HTML with examples.

As you know that most of the HTML tags are defined as

HTML Block Level Tags

HTML block level tags generally start (and end) with a new line, when displayed in a browser. Here are some examples of block level tags:

Example

Here are some examples on block level tags in HTML:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Block Level Tags Example</title>
</head>
<body>

<div style="background-color:green; color:white;padding:5px;">
	<h2 style="color:cyan;">HTML Block Level Tag Example</h2>
	<p>This is HTML Block Level Tag Example 1</p>
</div>
<div style="background-color:red; color:white;padding:5px;">
	<h2 style="color:cyan;">HTML Block Level Tag Example</h2>
	<p>This is HTML Block Level Tag Example 2</p>
</div>
	
</body>
</html>

Here is the sample output produced by the above HTML block level tag example code:

html block level tags

Now let's optimize the above HTML block level example code:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Block Level Tags Example</title>
</head>
<body>

<div style="color:white;">
<div style="background-color:green;padding:5px;">
	<h2 style="color:cyan;font-size:24px;">HTML Block Level Tag Example</h2>
	<p>This is HTML Block Level Tag Example 1</p>
</div>
<div style="background-color:red;padding:5px;">
	<h2 style="color:cyan;font-size:24px;">HTML Block Level Tag Example</h2>
	<p>This is HTML Block Level Tag Example 2</p>
</div>
</div>
	
</body>
</html>

The above block level tag example code in HTML produced the same output as of the above one produced. Here is the output of above example code of HTML block level tags:

html block level tags example

Here is another example on HTML block level tags. This is an example of HTML blocks creation side by side:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Block Level Tags Example</title>
</head>
<body>

<div style="float:left;width:50%;">
	<form action="">
		First Name:<br/><input type="text" name="fname"><br/>
		Last Name:<br/><input type="text" name="lname"><br/>
		Password:<br/><input type="password" name="pass"><br/>
		<input type="button" value="Submit">
	</form>
</div>
<div style="float:left;width:50%;">
	<form action="">
		First Name:<br/><input type="text" name="fname"><br/>
		Last Name:<br/><input type="text" name="lname"><br/>
		Password:<br/><input type="password" name="pass"><br/>
		<input type="button" value="Submit">
	</form>
</div>
	
</body>
</html>

Following is the sample output of the above HTML block level creation side by side example code:

html blocks create side by side

Now let's improve the above HTML block level creation side by side example code.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Block Level Tags Example</title>
</head>
<body style="background-color:silver;">

<div style="float:left;width:47%;background-color:green;border-right:1px solid white;color:white;padding:5px;">
	<form action="">
		First Name:<br/><input type="text" name="fname"><br/>
		Last Name:<br/><input type="text" name="lname"><br/>
		Password:<br/><input type="password" name="pass"><br/>
		<input type="button" value="Submit">
	</form>
</div>
<div style="float:left;width:47%;background-color:green; color:white;padding:5px;">
	<form action="">
		First Name:<br/><input type="text" name="fname"><br/>
		Last Name:<br/><input type="text" name="lname"><br/>
		Password:<br/><input type="password" name="pass"><br/>
		<input type="button" value="Submit">
	</form>
</div>
	
</body>
</html>

Here is the output produced by the above HTML example code of block level creation side by side:

html block level tags and inline tags

HTML Inline Tags

HTML inline tags are generally displayed without any line breaks. Here are some examples of inline tags in HTML:

Example

Here is an example shows the inline tag (span tag) to style some parts of the text.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Inline Tag Example</title>
</head>
<body>

<h2>This is an <span style="color:red">Important</span> Heading</h2>

</body>
</html>

Below is the sample output produced by the above HTML inline tag example code:

html span tags

Here is another example on HTML inline tags:

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML Inline Tags Example</title>
</head>
<body>

<p>
	This is
	<a style="color:green;font-size:22px;" href="html-blocks.htm">HTML Block Level Tags</a>
	and 
	<a style="color:green;font-size:24px;" href="html-blocks.htm">HTML Inline Tags</a>
	tutorial. Here you can
	<span style="font-weight:bold;">learn</span>
	about
	<span style="font-size:20px;font-weight:bold;">block level tags</span>
	and
	<span style="font-size:20px;font-weight:bold;">inline tags</span>
	with examples.
</p>

</body>
</html>

Here is the sample output of the above inline tag example code in HTML:

html inline tags

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test