Block and Inline Level Elements

Block Level Element:

A block-level element always starts on a new line, and it takes up the full width available on the browser. In HTML we have many block level elements like <p> ,<ul>, <ol>, <form>, <hr> etc.

Example: <p> tag is a block level element,

Inline Level Element:

An inline element does not start on a new line, it only takes up as much width as necessary. In HTML we have many Inline level elements like <a>, <input>, <img>, <select>, <textarea> etc.

Example: <a> tag is a inline level element

Div and Span tags

Div tag:

The <div> tag is a block level element. It is used to defines a division or section in a HTML document.

<div> tag is used as a container for other HTML elements.

It is a block-level element, so it stretches to the full width of the browser.

Example:

In above example, we are using <div> tag as a container for the other tags <h4>, <p> and <a>.

Span tag:

The <span> tag is a inline element. it can be used as container of other inline elements, and also used to mark up a part of a text, or a part of a document.

Example: We can use <span> tag to highlight some part of the text in a paragraph.

HTML Attributes: class & id

class Attribute

• The HTML class attribute is used to specify a class for an HTML element.
• The class attribute can be used on any HTML element.
• Multiple HTML elements can share the same class.
• The class attribute is often used to point to a class name in a style sheet.

Note: The class name is case sensitive!

Example:

Id Attribute

• The HTML id attribute is used to specify a unique id for a HTML element.
• The value of the id attribute must be unique within the HTML document.
• The id attribute is used to point to a specific style declaration in a style sheet.

Note: The id name is case sensitive!

Example: