block elements code example

Example 1: html inline elements

Inline elements in HTML:

1	<a>			    The <a> tag defines a hyperlink, which is used to link from one page to another.
2	<abbr>			The <abbr> tag defines an abbreviation or an acronym, like "HTML", "Mr.", "Dec.", "ASAP", "ATM".
3	<acronym>		The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.
4	<b>			    The <b> tag specifies bold text without any extra importance.
5	<bdo>			The <bdo> tag is used to override the current text direction.
6	<big>			The <big> tag defines bigger text.
7	<br>			The <br> tag inserts a single line break.
8	<button>		The <button> tag defines a clickable button.
9	<cite>			The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).
10	<code>			The <code> tag is a phrase tag. It defines a piece of computer code.
11	<dfn>			The <dfn> tag represents the defining instance of a term in HTML.
12	<em>			The <em> tag is a phrase tag. It renders as emphasized text.
13	<i>			    The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.
14	<img>			The <img> tag defines an image in an HTML page.
15	<input>			The <input> tag specifies an input field where the user can enter data.
16	<kbd>			The <kbd> tag is a phrase tag. It defines keyboard input.
17	<label>			The <label> tag defines a label for several elements
18	<map>			The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
19	<object>		The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
20	<output>		The <output> tag represents the result of a calculation (like one performed by a script).
21	<q>			    The <q> tag defines a short quotation.
22	<samp>			The <samp> tag is a phrase tag. It defines sample output from a computer program.
23	<script>		The <script> tag is used to define a client-side script (JavaScript).
24	<select>		The <select> element is used to create a drop-down list.
25	<small>			The <small> tag defines smaller text (and other side comments).
26	<span>			The <span> tag is used to group inline-elements in a document.
27	<strong>		The <strong> tag is a phrase tag. It defines important text.
28	<sub>			The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
29	<sup>			The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].
30	<textarea>		The <textarea> tag defines a multi-line text input control.
31	<time>			The <time> tag defines a human-readable date/time.
32	<tt>			The <tt> tag defines teletype text.
33	<var>			The <var> tag is a phrase tag. It defines a variable.

Example 2: what does display inline-block do?

/*Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.

Compared to display: block, the major difference is that
display: inline-block does not add a line-break after the element,
so the element can sit next to other elements.

The following example shows the different behavior of
display: inline, display: inline-block and display: block: */


span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Example 3: are h1 block elements

<h1> through <h6> are block level elements taking up their own line.