Scribd
Upload
49 views

HTML Grouping-1

This document discusses HTML grouping tags and block and inline elements. It explains that most elements have a default display value of either block or inline. Block-level elements always start on a new line and take up the full width, while inline elements only take up as much width as necessary and do not start a new line. Common block-level tags include <div>, <header>, and <p>, while common inline tags include <span>, <a>, and <b>. The <div> and <span> tags are described as container elements that can be styled with CSS.

Uploaded by

BCASEM517HIMALAY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
49 views

HTML Grouping-1

This document discusses HTML grouping tags and block and inline elements. It explains that most elements have a default display value of either block or inline. Block-level elements always start on a new line and take up the full width, while inline elements only take up as much width as necessary and do not start a new line. Common block-level tags include <div>, <header>, and <p>, while common inline tags include <span>, <a>, and <b>. The <div> and <span> tags are described as container elements that can be styled with CSS.

Uploaded by

BCASEM517HIMALAY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML GROUPING

TAGS
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.
 Example
 <div>Hello</div>
<div>World</div>
BLOCK LEVEL ELEMENTS IN HTML:
 <address>
 <h1>-<h6>
 <header>
 <article>
 <hr>
 <aside>  <li>
 <blockquote>  <main>
 <canvas>  <nav>
 <dd>  <noscript>
 <div>  <ol>
 <dl>  <output>
 <dt>
 <p>
 <pre>
 <fieldset>
 <section>
 <figcaption>  <table>
 <figure>  <tfoot>
 <footer>  <ul>
 <form>  <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.
 Example
 <span>Hello</span>
<span>World</span>
INLINE ELEMENTS IN HTML:
 <a>  <map>
 <abbr>  <object>
 <acronym>
 <q>
 <b>
 <bdo>
 <samp>
 <big>
 <script>
 <br>  <select>
 <button>  <small>
 <cite>  <span>
 <code>  <strong>
 <dfn>  <sub>
 <em>  <sup>
 <i>
 <img>
 <textarea>
 <input>
 <time>
 <kbd>  <tt>
 <label>  <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:
 Example
 <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>
</div>
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:
 Example
 <h1>My <span style="color:red">Important</s
pan> Heading</h1>
HTML GROUPING TAGS
Tag Description

<div> Defines a section


in a document
(block-level)
<span> Defines a section
in a document
(inline)
THANK YOU…!

You might also like