Block and Inline Elements

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,061,916
3.	Videos	353,254
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Block and Inline Elements

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

<!DOCTYPE html>
<html>

<head>
<title>Block-level Elements</title>
</head>
<body>

<p style="border: 1px solid black">GSSS KHOKHAR</p>
<div style="border: 1px solid black">GSSS KHOKHAR</div>

<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>

Live Demo & Try it yourself!

Here are the block-level elements in HTML:

#HTML #block level Elements

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

<!DOCTYPE html>
<html>

<head>
<title>The inline element</title>
</head>
<body>

<p>This is an inline span <span style="border: 1px solid black">GSSS KHOKHAR</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body>
</html>

Live Demo & Try it yourself!

Here are the inline elements in HTML:

#HTML #Inline Elements

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

<!DOCTYPE html>
<html>

<head>
<title>The div element</title>
</head>
<body>

<div style="background-color:black;color:white;padding:20px;">
  <h2>GSSS KHOKHAR</h2>
  <p>ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ  ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ।  ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>


  <p>ਮੌਜੂਦਾ ਸਮੇ ਵਿਚ ਸਕੂਲ ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਖਿੱਚ ਦਾ ਕੇਂਦਰ ਹੈ. ਕਿਤਾਬਾਂ ਨਾਲ ਭਰੀ-ਪੁਰੀ ਲਾਇਬ੍ਰੇਰੀ, ਆਧੁਨਿਕ ਟੈਕਨੋਲੋਜੀ ਨਾਲ ਲੈਸ ਕੰਪਿਊਟਰ ਲੈਬ, ਐਜੂਸੈਟ ਲੈਬ, ਸਾਇੰਸ ਲੈਬ, ਮੈਥ ਕਾਰਨਰ ਅਤੇ ਐਸ.ਐਸ ਕਾਰਨਰ ਸਕੂਲ ਦੀ ਸ਼ਾਨ ਹਨ. ਸਕੂਲ ਵਿਚ ਸਥਾਪਿਤ ਕੀਤੇ ਵਿੱਦਿਅਕ ਪਾਰਕ ਵੇਖਣ ਯੋਗ ਹਨ. ਸਕੂਲ ਦਾ ਮਿਹਨਤੀ ਅਤੇ ਤਜਰਬੇਕਾਰ ਸਟਾਫ ਸਕੂਲ ਵਿਚ ਪੂਰਨ ਵਿੱਦਿਅਕ ਮਾਹੌਲ ਦੀ ਨੁਹਾਰ ਖਿੱਚ ਪਾਉਂਦੀ ਹੈ.</p>
</div> 

</body>
</html>

Live Demo & Try it yourself!

#HTML #element #div

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

<!DOCTYPE html>
<html>
<head>
<title>The span element</title>
</head>
<body>

<h1>The span element</h1>

<p>GSSS <span style="color:blue;font-weight:bold;">KHOKHAR</span> Sri <span style="color:darkolivegreen;font-weight:bold;">Muktsar</span> Sahib.</p>

</body>
</html>

Live Demo & Try it yourself!