Block-Level and Inline Elements Computer Science Engineering (CSE) Notes | EduRev

Computer Science Engineering (CSE) : Block-Level and Inline Elements Computer Science Engineering (CSE) Notes | EduRev

 Page 1


Block-Level and Inline Elements 
? Difference –  
 
? the content of block-level elements starts on a new 
line while the content of inline elements does not.  
 
? block-level elements may contain inline elements, 
some block-level elements may even contain other 
block-level elements, while inline elements may only 
contain text and other inline elements.  
 
 
Page 2


Block-Level and Inline Elements 
? Difference –  
 
? the content of block-level elements starts on a new 
line while the content of inline elements does not.  
 
? block-level elements may contain inline elements, 
some block-level elements may even contain other 
block-level elements, while inline elements may only 
contain text and other inline elements.  
 
 
Examples 
? Block-level elements 
? headings ( H ) 
? paragraphs ( P ) 
? divisions ( DIV ) 
? tables ( TABLE ) 
? lists ( OL / UL / DL) 
 
? Inline Elements 
? bold text ( B ) 
? underlined text ( U ) 
? subscript ( SUB ) and superscript ( SUP ) 
? anchors and hyperlinks ( A )  
 
Page 3


Block-Level and Inline Elements 
? Difference –  
 
? the content of block-level elements starts on a new 
line while the content of inline elements does not.  
 
? block-level elements may contain inline elements, 
some block-level elements may even contain other 
block-level elements, while inline elements may only 
contain text and other inline elements.  
 
 
Examples 
? Block-level elements 
? headings ( H ) 
? paragraphs ( P ) 
? divisions ( DIV ) 
? tables ( TABLE ) 
? lists ( OL / UL / DL) 
 
? Inline Elements 
? bold text ( B ) 
? underlined text ( U ) 
? subscript ( SUB ) and superscript ( SUP ) 
? anchors and hyperlinks ( A )  
 
<pre> tag 
? <Pre> tag is used to preserve formatting of the 
typed text. 
<pre>  
    Apple 
  Banana 
 Orange 
</pre> 
Page 4


Block-Level and Inline Elements 
? Difference –  
 
? the content of block-level elements starts on a new 
line while the content of inline elements does not.  
 
? block-level elements may contain inline elements, 
some block-level elements may even contain other 
block-level elements, while inline elements may only 
contain text and other inline elements.  
 
 
Examples 
? Block-level elements 
? headings ( H ) 
? paragraphs ( P ) 
? divisions ( DIV ) 
? tables ( TABLE ) 
? lists ( OL / UL / DL) 
 
? Inline Elements 
? bold text ( B ) 
? underlined text ( U ) 
? subscript ( SUB ) and superscript ( SUP ) 
? anchors and hyperlinks ( A )  
 
<pre> tag 
? <Pre> tag is used to preserve formatting of the 
typed text. 
<pre>  
    Apple 
  Banana 
 Orange 
</pre> 
<div> tag 
? The <div> tag is nothing more than a container 
for other tags. 
<div id="content" align="left" style=“color: green" 
> 
<h5>Content Articles</h5>  
<p>This paragraph would be your content 
paragraph with all of your readable material.</p>  
</div>  
Page 5


Block-Level and Inline Elements 
? Difference –  
 
? the content of block-level elements starts on a new 
line while the content of inline elements does not.  
 
? block-level elements may contain inline elements, 
some block-level elements may even contain other 
block-level elements, while inline elements may only 
contain text and other inline elements.  
 
 
Examples 
? Block-level elements 
? headings ( H ) 
? paragraphs ( P ) 
? divisions ( DIV ) 
? tables ( TABLE ) 
? lists ( OL / UL / DL) 
 
? Inline Elements 
? bold text ( B ) 
? underlined text ( U ) 
? subscript ( SUB ) and superscript ( SUP ) 
? anchors and hyperlinks ( A )  
 
<pre> tag 
? <Pre> tag is used to preserve formatting of the 
typed text. 
<pre>  
    Apple 
  Banana 
 Orange 
</pre> 
<div> tag 
? The <div> tag is nothing more than a container 
for other tags. 
<div id="content" align="left" style=“color: green" 
> 
<h5>Content Articles</h5>  
<p>This paragraph would be your content 
paragraph with all of your readable material.</p>  
</div>  
<div> Tag Example 
Content Articles 
  This paragraph would be your content 
paragraph with all of your readable material. 
Read More
Offer running on EduRev: Apply code STAYHOME200 to get INR 200 off on our premium plan EduRev Infinity!

Related Searches

Objective type Questions

,

Exam

,

Summary

,

Important questions

,

video lectures

,

Block-Level and Inline Elements Computer Science Engineering (CSE) Notes | EduRev

,

Block-Level and Inline Elements Computer Science Engineering (CSE) Notes | EduRev

,

MCQs

,

study material

,

Block-Level and Inline Elements Computer Science Engineering (CSE) Notes | EduRev

,

Semester Notes

,

Sample Paper

,

Extra Questions

,

pdf

,

Viva Questions

,

ppt

,

Previous Year Questions with Solutions

,

practice quizzes

,

shortcuts and tricks

,

past year papers

,

Free

,

mock tests for examination

;