w3resource

HTML block level and inline elements

In general, HTML elements can be divided into two categories : block level and inline elements.

1. HTML block level elements can appear in the body of an HTML page.

2. It can contain another block level as well as inline elements.

3. By default, block-level elements begin on new lines.

4. block level elements create larger structures (than inline elements).

List of block level elements

  • p
  • h1, h2, h3, h4, h5, h6
  • ol, ul
  • pre
  • address
  • blockquote
  • dl
  • div
  • fieldset
  • form
  • hr
  • noscript
  • table

Example of block level elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML block level element</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque mollis nisl, 
vel posuere nulla convallis non.</p>
<p>Aenean lacus ligula, suscipit a fringilla id, laoreet nec tortor. Fusce pharetra interdum mauris quis mollis.</p>
</body>
</html>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque mollis nisl, vel posuere nulla convallis non.

Aenean lacus ligula, suscipit a fringilla id, laoreet nec tortor. Fusce pharetra interdum mauris quis mollis.

Pictorial presentation

HTML-block-level-element

HTML inline elements

1. HTML inline level elements can appear in the body of an HTML page.

2. It can contain data and other inline elements.

3. By default, inline elements do not begin on new lines.

4. inline elements create shorter structures (than block level elements).

List of inline elements

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

Example of inline elements

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML block level element</title>
</head>
<body>
<p>w3resource <abbr title="Hyper Text Markup Language">HTML</abbr> tutorial.</p>
</body>
</html> 

Result

w3resource HTML tutorial.

Pictorial presentation

HTML-inline-element

Previous: Components of a HTML page
Next: List of HTML 4.01 elements

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html/HTML-block-level-and-inline-elements.php