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
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>.
- Block elements Block elements are always starts with new line and have the line breaks. Eg:<p>, <h1>, <h2>, <h3>.
- Inline elements Inline elements not starts with a new line and always available in a paragraphs. Eg:<b>, <i>, <u>.
<div>tag defines block level section in HTML document.<span>tag defines inline section in HTML document.
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.
[html]
<!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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
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.
[html]
<!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>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Span is an inline element.
- By using div tag and span tag HTML group the elements.