UrbanPro
true

Learn HTML from the Best Tutors

  • Affordable fees
  • 1-1 or Group class
  • Flexible Timings
  • Verified Tutors

Search in

Inline & Block Elements

Anitha Sahu
16/03/2017 0 0

HTML Block and Inline Elements:
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.
Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

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

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

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

Program:
-------
<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

</body>
</html>

The <span> Element:
------------------
The <span> element is often used as a container for some text.

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

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

<!DOCTYPE html>
<html>
<body>

<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>

 

0 Dislike
Follow 0

Please Enter a comment

Submit

Other Lessons for You

How to be a good developer?
I think practice more and read less.see what the logic in the programs then you must be a good developer
B

HTML - Introduction
HTML - Hypertext Markup Language is the standard markup language for creating web applications. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information...

HTMl tutorial for input type
<html> <body> <form> <input type="tel" id="phone" name="phone" pattern="{10}"required><br> <input type="submit" value="Submit"> </form> </body> </html>

HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute. <tagname style="property:value;"> Ex - HTML Background Color The background-color property defines the background...

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the...
X

Looking for HTML Classes?

The best tutors for HTML Classes are on UrbanPro

  • Select the best Tutor
  • Book & Attend a Free Demo
  • Pay and start Learning

Learn HTML with the Best Tutors

The best Tutors for HTML Classes are on UrbanPro

This website uses cookies

We use cookies to improve user experience. Choose what cookies you allow us to use. You can read more about our Cookie Policy in our Privacy Policy

Accept All
Decline All

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more