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>
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>
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>
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 a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Post a Comment