HTML - SPLessons

HTML Block

Chapter 30

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Block

HTML Block

shape Introduction

The code below demonstrates the HTML Block. The HTML elements are divided into different blocks of elements. Following are the concepts covered.

  • HTML Elements
  • Div Tag
  • Span Tag

HTML Elements

shape Description

Basically Html elements are divided into types

HTML blocks are used to divide the HTML document into sections. The following tags are used to define HTML blocks <div>, <span>.

Div Tag

shape Description

<div> tag is used grouping the various HTML elements by applying CSS. By using the div tag user can use the different alignments like left, top, bottom, right. The code below demonstrates the use of div tag.

<!DOCTYPE html>
<html>
	<div style="width:350px;height:200px;background-color:Gray">
		<h1>Div Section</h1>
		<p>
			<span style="font-weight:bold;font-style:italic">www.splessons.com </span> was established on Nov-01-2013.  SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.
		</p>
	</div>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Span Tag

shape Description

Span element is utilized to group the inline elements. No visual changes occur by using inline elements in a web page.
The code below demonstrates the use of span tag.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML span Tag</title>
	</head>
	<body>
		<p>span color is <span style="color:red">red</span> and span color is <span style="color:green">green</span></p>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Span is an inline element.
  • By using div tag and span tag HTML group the elements.