Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 42 views

    Div HTML

    Uploaded by

    captainricardus

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Div HTML

    Uploaded by

    captainricardus
    42 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    42 views6 pages

    Div HTML

    Uploaded by

    captainricardus

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 6

    HTML Block and Inline

    Elements
    ❮ PreviousNext ❯

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

    The two most common display values are block and inline.

    Block-level Elements
    A block-level element always starts on a new line, and the browsers
    automatically add some space (a margin) before and after the element.

    A block-level element always takes up the full width available (stretches out to
    the left and right as far as it can).

    Two commonly used block elements are: <p> and <div>.

    The <p> element defines a paragraph in an HTML document.

    The <div> element defines a division or a section in an HTML document.

    The <p> element is a block-level element.

    The <div> element is a block-level element.


    Example
    <p>Hello World</p>
    <div>Hello World</div>
    Try it Yourself »

    Here are the 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.
    An inline element only takes up as much width as necessary.

    This is a <span> element inside a paragraph.

    Example
    <span>Hello World</span>
    Try it Yourself »

    Here are the 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>
    Note: An inline element cannot contain a block-level element!

    ADVERTISEMENT

    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>
    Try it Yourself »

    You will learn more about the <div> element in the next chapter.

    The <span> Element


    The <span> element is an inline container used to mark up a part of a text, or a
    part of a document.

    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
    <p>My mother has <span style="color:blue;font-
    weight:bold;">blue</span> eyes and my father
    has <span style="color:darkolivegreen;font-weight:bold;">dark
    green</span> eyes.</p>
    Try it Yourself »

    Chapter Summary
     A block-level element always starts on a new line and takes up the full
    width available
     An inline element does not start on a new line and it only takes up as
    much width as necessary
     The <div> element is a block-level and is often used as a container for
    other HTML elements
     The <span> element is an inline container used to mark up a part of a text,
    or a part of a document

    Exercise?
    Which type of elements takes up the full width available?

    Block elements

    Inline elements

    Submit Answer »
    HTML Tags
    Tag Description

    <div> Defines a section in a document (block-level)

    <span> Defines a section in a document (inline)

    For a complete list of all available HTML tags, visit our HTML Tag Reference.

    You might also like