Summary -

In this topic, we described about the below sections -

HTML Blocks are grouping items of HTML elements. Each HTML element has its own display based on the its type. However HTML blocks also have display but can group the other HTML elements also as block.

By default, all block level elements are starts in new line. The elements added after block level elements will start from new line. Block level elements can contain other block line elements as nested block line elements. Block level elements can stretch to the browser full width.

Examples of block-level elements -

TagsDescription
<address> Specifies the contact information for a page or document
<form> A Facility to submit the input data by user
<blockquote> used to define a quote section
<p> Paragraph
<pre> Preformatted text in HTML document
<h1> - <h6>Used to define HTML headings
<dd> Used to specify the term/description/name in a description list
<div> used to create block-level elements
<table> represents a table in an HTML document
<ol> Ordered list in html documents
<ul> Unordered list in HTML document
<nav> Specifies the navigation area

Block elements can be divided into two types.

  1. Inline Elements
  2. Group Elements

Inline elements -

The inline elements do not start at newline. The inline elements always start in the middle of the line and part of another element. The below list are the inline elements.

TagsDescription
<b> used to display the text as bold
<i> Alternate Voice or different quality of text
<u> Unarticulated text/underlined text in HTML document
<p> Paragraph
<address> Specifies the contact information for a page or document
<form> A Facility to submit the input data by user
<li> used to represent a list item in HTML document
<ins> Editorial Insertion
<del> Used for editorial deletion
<code> Used to define the computer code

Group elements -

The Group elements always start with newline. The Group elements used to group other elements. <div> and <span> are the majorly used Group elements.

<div>

<div> is mostly used to create block-level elements. In other words, <div> tag used to define a section in HTML documents. Except <div>, all other have its own display.

The tag can be coded like <div></div> with its contents/other HTML tags inserted between the opening and closing tags. <div> also acts as block-level element that is used as container for other HTML elements. The <div> element has no additional attributes by default.

style and class are commonly provided with DIV element. When <div> element used together with CSS, the style blocks can be used together. All browsers always place a line break before and after the <div> tag by default.

Syntax -

<div>.....</div>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>div tag text example.. </title>
	</head>
	<body>
		<div style="background-color:green;">
			<h2>Heading</h2>
			<p>This is paragraph</p>
		</div> 
	</body>
</html>

Output -

Heading

This is paragraph

<span>

Generic container for text or group inline-elements HTML. The <span> tag used to specify the generic container for inline elements and content. There no visual change that can be done by <span> tag.

It doesn’t represent anything other than its children. The tag can be specified like <span class=""></span> with the content between the opening and closing tags.

Syntax -

<span>.. text here.. </span>

Example -

<!DOCTYPE html>
<html>
<head>
	<title>span tag example.. </title>
</head>
<body>
    <p> <span style="color:red;font-weight:bold">TutorialsCampus</span>
    objective is to deliver the point to point online content on various
    technologies(including technical and non-technical)to encourage the
    reader to learn and gain expertise on their desired skills without
     any conditions and restrictions. </p>
</body>
</html>

Output -

TutorialsCampus objective is to deliver the point to point online content on various technologies (including technical and non-technical) to encourage the reader to learn and gain expertise on their desired skills without any conditions and restrictions.