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

HTML
HTML- Hyper Text Markup Language HYPER MEANS:For Example: Girls connected to jweleries, sarees, chocolates. Here there link to there intresting things.At the same way one word connected to other page....

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...

Web Technology Tutorial
Web Technology has 2 category Front End (HTML,CSS,JS Etc) Back End/Server Side (PHP,JSP,ASP,ROR Etc) Front End technologies are - HTML, CSS, Bootstrap, Javascript, jQuery etc. Using front end...

Bootstrap grid system
What is a Grid? As put by wikepedia − In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure...

Kick start your IT career with User Interface development
If you are planning to start your career into IT, you can begin as User Interface developer. No previous IT background or programming experience needed. Below are some of the responsibilties of User...
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