Friday, November 2, 2012

Lesson 14: HTML Block level and Inline Elements

Most HTML elements are defined as block level elements or as inline elements.

HTML Block Elements


Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>

The HTML <div> Element


The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

Definition and Usage 

The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

 Example:-  
 
 
Out put:-


HTML Inline Elements


Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>

The HTML <span> Element


The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

Definition and Usage

The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.

Tip: When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.

 Example:-  
 

Out put:-










<< Previous Lesson                                            HTML Tutorial                                            Next Lesson >>

 

 

No comments:

Post a Comment