HTML block and inline elements

All HTML elements are divided into two groups:

Block elements are large building blocks of your Web page. When displayed, the browser automatically adds a line break before and after the block element, which takes up all available width (by default, appears as a rectangle on the Web page), and the height of the block element is calculated by the browser Automatically based on the volume of its contents. Text in block elements is left-aligned by default.

Typically, block elements are used to divide the contents of a Web page into logical blocks (for example: Header, menu, content block, footer, etc.). Block elements cannot be nested in lowercase, except for links and table cells, in which the HTML5 standard can have block elements.

Inline elements are used to mark parts of the contents of elements. The width of a inline element equals the amount of content. Unlike block elements, the browser does not add a line break before and after a inline element, so if multiple line items follow each other, they are on the same line and are moved to another row as needed. In most cases, it is allowed to put other inline elements inside inline elements, and it is forbidden to insert block elements inside inline.

Block and inline HTML elements

Inline tags

<a>Creates a hyperlink.
<abbr>Defines text as an abbreviation.
<audio>Specifies the audio content.
<b>Selects the text in bold.
<bdo>Specifies the direction of text display.
<button>Creates a button.
<canvas>Defines the area for drawing graphics.
<cite>Specifies the title for the work. Converts the text to italic.
<code>Defines a piece of program code. Converts text to fixed.
<del>Specifies the text that was removed from the document. Is displayed crossed text.
<dfn>Highlights definitions of the term. Converts the font to a slant.
<em>Defines the selected text. Converts text to italic.
<i>Converts text to italic.
<iframe>Defines a built-in frame.
<img>Defines an image.
<input>Creates the data entry field.
<ins>Specifies the text that was added to the document. Displays the text underlined.
<kbd>Defines text typed from the keyboard. Converts text to monospace font.
<mark>Defines an important part of the text.
<meter>Defines a scalar dimension within a known range.
<q>Defines a short quote.
<rp>Specifies what to show to the browser that does not support the <ruby> tag.
<rt>Adds an annotation from the top or bottom of the characters enclosed in the <ruby> element.
<s>Specifies the text that is no longer correct. Displays the text crossed.
<samp>Specifies the text that is the result of a computer program output.
<small>Defines a small text size.
<select>Creates a drop-down list.
<span>Specifies the line item of the document.
<strong>Defines the important text. Converts the font to bold.
<sub>Specifies the text in the lower index.
<sup>Specifies the text in the top index.
<td>Creates a table cell.
<textarea>Creates a multiline text box.
<th>Creates a header cell in a table.
<var>Defines the variable. Selects the text in italics.
<video>Adds a video file to the page.

Block tags

<address>Defines the contact information of the author of the document/article.
<artical>Defines text as an article, news, etc.
<aside>Defines content away from the content of the page.
<blockquote>Selects text from a different source as a block quote.
<dd>Creates the description of the item in the definition list.
<div>Defines a section of a document.
<dl>Creates a definition list.
<dt>Defines a term in the definition list.
<figure>Groups page elements.
<footer>The bottom of the document.
<form>Defines the HTML form.
<h1> - <h6>Define HTML headers.
<header>Specifies the header of the site or section.
<hr>Creates a horizontal line.
<li>Defines a list item.
<nav>Defines a group of links for navigation.
<ol>Creates a numbered (ordered) list.
<p>Defines a paragraph.
<pre>Leaves the text content in its original form (with all the whitespace characters that are set when the text is written).
<ruby>Defines a small annotation (for the East Asian Printing house).
<section>Defines sections of a document.
<table>Creates a table.
<tr>Creates a row in the table.
<ul>Defines a bulleted (unordered) list.

Note: use the CSS display property to override the element type from block to inline or from inline to block.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © | ruen