HTML5 BLOCKS & INLINE ELEMENTS CHAPTER 13

13th TUTORIAL ON HTML BLOCK AND INLINE ELEMENTS


Every HTML element has a default display value, depending on what type of element it is.

The two display values are: block and 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.

<!DOCTYPE html>

<html>

<body>

 

<div style="border: 1px solid black">Hello World</div>

 

<p>The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

 

</body>

</html>

 

OUTPUT

 

Hello World

The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).

Block level elements in HTML:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt>

 

<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header>

 

<hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table>

 

<tfoot> <ul> <video>

 

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.

<!DOCTYPE html>

<html>

<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

 

</body>

</html>


OUTPUT

This is an inline span Hello World element inside a paragraph.

The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.

Inline elements in HTML:

 

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn>

 

<em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp>

 

<script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time>

 

<tt> <var>

 

The <div> Element

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

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

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

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

OUTPUT

London

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.

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.

 

The <span> Element

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

The <span> element has no required attributes, but style, class and id 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>


OUTPUT

My Important Heading

 

HTML Grouping Tags


Tag

Description

<div>

Defines a section in a document (block-level)

<span>

Defines a section in a document (inline)

 


Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more