Block and Inline HTML Elements
By Stephen Bucaro
There are two main types of html elements, block and inline. A block element starts
with an inherent line break. In other words, it starts on the far left of it's containing
element. A block element also ends with an inherent line break. So it takes up the full
width of its containing element, and causes the following html element to start on a new line.
Below is a list of block elements
|<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> || || |
One of the most used block elements is the <div>. The div element is commonly
used to divide a web page or the div's containing element into horizontal sections.
The div element itself is commonly used as a container for other elements.
The code shown below displays a div element.
<div>This text is contained within a div element</div>
An inline element starts at a position defined by its sequence in the code. When the html
code parsing comes to an inline element it starts it at the next horizontal position.
The inline element then takes up the space required by its contents, and stops after
that, even if it has not reached the right side of its containing element.
Below is a 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> |
One of the most used inline elements is the <span> The span element is commonly
used as a container for some text in a line.
The code shown below displays a span element.
<span>This text is contained within a span element</span>
Note: An element's display type can be modified with styles, but to keep it simple we won't cover that here.
More HTML Code:
• HTML5 role Attribute
• HTML Linking Basics
• Create a Meta Tag Slide Show - No Java Script Required
• Setting the Number of Items Visible in a Select List
• Use an Image as a Form Submit Button
• Using col and colgroup to Apply Attributes to a Table Column
• HTML Table Basics
• The HTML Head Tag
• HTML Image Basics
• HTML5 Input Type - Email