HTML_block and inline elemets
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.
Block-level Elements
A block-level element 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).
There are two block elements, <p> and <div>. What’s the difference?
The <p> element defines a paragraph in an HTML document. Basically, p for <p> stands for paragraph.
The <div> element specifies a division or a section in an HTML document.
Are theyre only two block elements, <p> and <div>? No, it is not true.
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcpation>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Wow, there are many.
Inline Element
In contrast, there is inline element. It does not start on a new line. It is embedded inside line like below.
Here are list of inline elements.
<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
With the <div> element, you can put other HTML elements and put into <div> element. It works like element container. <div> element does not need attributes, but style, class and id are common. When used together with CSS, the <div> element can be used to style blocks of content
| <div style="background-color:black;color:white;padding:20px;"> <h2>Shoreditch</h2> <p>There are many things</p> </div> |
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. It does not need 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:
| <p>You insisted <span style="color:blue;font-weight:bold">blue</span> is the most <span style="color:darkolivegreen;font-weight:bold">beautiful</span> color. </p> |
