Html Block Elements

-

 Html Block Elements

All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements

Block Elements

Block elements appear on the screen as if they have a line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

The <div> tag

This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts ( Left, Right, Top etc) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example

<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<!-- First group of tags -->
<div style="color:red">
   <h4>This is first group</h4>
   <p>Following is a list of vegetables</p>
   <ul>
   <li>Tomato</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</div>

<!-- Second group of tags -->
<div style="color:green">
   <h4>This is second group</h4>
   <p>Following is a list of fruits</p>
   <ul>
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Orange</li>
   </ul>
</div>

</body>
</html>

 

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements where as the <div> tag is used with block-level elements.

Example

<html>
<head>
<title>HTML span Tag</title>
</head>
<body>

<p>This is <span style="color:red">red</span> and this is 
 <span style="color:green">green</span></p>

</body>
</html>
 
Result Is:::: 


This is red, and this is green 
 


Comments

Post a Comment

Popular posts from this blog

-
Image
Top 10 Programming Languages Important To Learn  Financial and enterprise systems need to perform complicated functions and remain highly organized, requiring languages like Java and C#. Media- and design-related webpages and software will require dynamic, versatile and functional languages with minimal code, such as Ruby, PHP, JavaScript and Objective-C. 1. C Language C  is a high-level and general purpose  programming language  that is ideal for developing firmware or portable applications. Originally intended for writing system software,  C  was developed at Bell Labs by Dennis Ritchie for the Unix Operating System (OS) in the early 1970s.  Dennis MacAlistair Ritchie was an American computer scientist. C  is a very powerful and widely  used  language. It is  used  in many scientific programming  situations. It forms (or is the basis for) the core of the modern languages Java and C++. It al...
Read more

A Javascript Program To make (open new window and close that window) button in your web browser.

-
Image
A Javascript Program To make (open new window and close that window) button in your web browser. < html > < head > < script > function openWin() { myWindow=window.open("","","width=200,height=100"); myWindow.document.write(" <p >This is 'myWindow' </ p >"); } function closeWin() { myWindow.close(); } </ script > </ head > < body > < input type =" button " value =" Open 'myWindow' " onclick =" openWin() " / > < input type =" button " value =" Close 'myWindow' " onclick =" closeWin() " / > </ body > </ html >    
Read more

A simple running clock in javascript

-
A simple running clock in javascript Here I show how to code for a simple digital clock in javascript. The advantage of javascript is that it is only a client side scripting language.  Here’s the code… <html> <head> <title></title> <script type=”text/javascript”> function getClock() { var clock = new Date(); var hours12; var ampm = “AM”; var hours24 = clock.getHours(); var minutes = clock.getMinutes(); var seconds = clock.getSeconds(); if (hours24>=13) { hours12 = hours24 – 12; ampm = “PM”; } else if (hours24==12) { hours12 = 12; ampm = “PM”; } else if (hours24==0) { hours12 = 12; } else { hours12 = hours24; } if(hours12<10) { hours12 =”0″+hours12; } if (minutes<10) { minutes = “0” + minutes; } if(seconds<10) { seconds =”0″+seconds; } var ti...
Read more