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

Colors that you can use to design your Web Pages
HTML Colors Three Options to define Color1. Color Name - red, blue, green2. Hexadecimal Code - Example #7FFFD43. RGB - RGB (31,205,197) Every color is made up of three colors: Red, Green and Blue.You...

Awesome HTML and CSS hover button with transition effects
Hello all today we will learn to make an awesome and easy button hover and transition effect. 1) Lets make a basic html button. Click me 2) We have created a basic html 5.0 button, lets style it up...

Awesome rotating Image on hover | HTML5, CSS3
Hello everyone let's see how to make an awesome rotating image on hover with HTML 5.0 and CSS 3.0. STEP 1: In HTML code put an image with the HTML tag STEP 2: Style that image however you want. Below...

HTML and Web design-Introduction by Kris, konrad, andy
For visitors to access web pages on your website, they must be connected to Internet and start a web browser. After web server sends web pages to the visitors computer, the web browser interprets the...

Html elements and attributes
Html consists of a series if elements These elements tell the browser how to display the content Elements are specified with tagnames. They are enclosed in angular brackets. <> is the start...
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