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

Amazing Photoshop Cs6 Effect - Puppet Warp.
Being a puppet master using Adobe Photoshop Creative Suite 6 is an easy task with Puppet Warp. Think of Puppet Warp as a lighter weight Liquify filter. This command enables you to distort specific areas...

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>

How to create a Basic Webpage using HTML
This is a very small basic article about creating HTML webpages. To start with you need to create an html file. you can create a text file (.txt) then rename it to something.html file ( .html extension...

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

Top Programming Languages 2017: Every Beginner Should Learn
Every year a plethora of job opportunities are being created for skilled programmers. So if you are thinking of honing your coding skills it is really a bright idea. But with so many programming languages...
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