HTML Block and Inline Elements - Tutorial for Beginners

Inline And Block Elements In HTML - Tutorial for Beginners A Complete Information

If you are learning HTML, you should have basic knowledge of HTML, like inline and block elements in HTML, the tags of HTML, and how they work.

You should take some information that will help you learn HTML.

Every HTML element includes a default display value, depending on what element it is.

There exist two display values: block and inline.

{tocify} $title={Table of Contents}

Block-level elements - HTML: HyperText Markup Language

A block-level element is an HTML element that carries up horizontal space by default. It extends 100% wide and takes on the height of its inner content. 

By default, the block-level element constantly begins a new line and stacks vertically. With the use of CSS, its width and height can be modified. Take a look at the example below.

Example:

HTML -

 <div> Hello World. </div>

 <div> Hello World. </div>{codeBox}

CSS -

body {

padding: 30px;

}

div {

padding: 15px;

background: #ff5722;

margin: 10px;

color: #000;

}{codeBox}

In this example, the group of words containing is inside of a <div> tag. By default, the <div> tag is viewed as a block-level element. 

The block element carries the full width of the parent element, no matter the width of the content inside. 

The element's height is modified to the height of the inner content.  

display: block, is the default value for the following elements:

Examples of a block-level elements in HTML:

• <address> - Displays contact information.
• <applet> - Embed a Java applet.
• <article> - Includes the article's content.
• <aside> - Represent a section of content.
• <blockquote> - Indicate a section that is quoted.
• <canvas> - Sketch graphics using JavaScript.
• <caption> - Add a caption to the table.
• <center> - Make a Center text.
• <details> - Make an interactive widget to hide text.
• <dir> - Designate a collection of file names.
• <div> - Creates a document division.
• <dl> - Have a list of definitions and their descriptions.
• <dt> - Designate a term within a description list.
• <embed> - Designate an area for interactive content.
• <figure> - Designate an area of self-contained content
• <form> - Creates an input form to capture data.
• <frame> - Create a frame window of another page.
• <h1> to <h6> - Creates a heading.
• <header> - Create a header section.
• <hr> - Create a horizontal line.
• <iframe> - Create a window frame of a page.
• <li> - Used to denote a list item.
• <main> - Contains the content specific to a certain page.
• <marquee> - Create scrolling text.
• <nav> - Contains a page's navigation links.
• <noscript> - Contains the content to use in browsers that don't support scripting.
• <object> - Designate an object embedded into a web page
• <ol> - Contains an ordered list.
• <p> - Used to denote a paragraph.
• <pre> - Contains preformatted text.
• <section> - Group thematically similar content together.
• <table> - Contains a table.
• <ul> - Contains an unordered list.

It is necessary to note that with block elements, CSS margin-right has no effect. However, you can even customize the size of block elements with CSS width, height, margin-top, margin-bottom, and margin-left.

Inline Elements - HTML: HyperText Markup Language

You already know that inline means in one line. In HTML, inline elements default appear in one line; for this, we do not need to do inline CSS; they are default in one line.

What are inline-level elements?

An inline-level element carries on the width and height of its inner content. It allows you to put numerous elements in the same line. 

Unlike block-level elements, inline elements cannot have the width, top, or bottom margins set on them.

I hope you have understood the inline elements in HTML.

Example:

HTML -

<span>inline</span>

<span>inline</span>

<span>inline</span>

<span>This is alone an inline</span>{codeBox}

CSS -

body {

padding: 30px;

}

span {

padding: 10px;

background: #ff5722;

color: white;

}{codeBox}

The above example shows the content inside a <span> tag. By default, the <span> tag is viewed as an inline-level element. The inline element always fits the size of the content inside of it.

display: inline, is the default value to the following elements: 

Examples of a Inline Elements in HTML:

• <a> - Create an anchor.
• <abbr> - Create an acronym or abbreviation.
• <acronym> - Create an acronym.
• <audio> - Embed sound files.
• <b> - Bold text.
• <bdi> - Confine differently formatted text.
• <bdo> - Force text to go one way or another.
• <big> - Make text bigger.
• <blink> - Make text blink.
• <br> - Create a line break.
• <button> - Create a form button.
• <cite> - Mention any creative work.
• <code> - Designate text as code.
• <del> - Delete or strikethrough text.
• <dfn> - Represent the defining instance of a term.
• <em> - Emphasize text.
• <font> - Change the font.
• <i> - Italicizes text.
• <img> - Show an image file.
• <input> - Create an input box on a form.
• <ins> - Insert text.
• <kbd> - Indicate text was inserted using a keyboard.
• <mark> - Highlight text.
• <meter> - Create a meter.
• <output> - Show the result of a user's action or a calculation.
• <progress> - Display the progress of a task.
• <q> - Designate text as a short quotation.
• <rp> - Designate parenthesis for browsers without Ruby annotations.
• <rt> - Designate the pronunciation of an East Asian word.
• <ruby> - Designate a ruby annotation on a web page.
• <s> - Strikethrough text.
• <samp> - Designate sample output from a computer
• <select> - Drop-down menu for form field
• <small> - Make text smaller.
• <span> - Container for grouping or phrasing content.
• <strike> - Strikethrough text.
• <strong> - Mark text with a strong importance.
• <sub> - Create subscript text.
• <sup> - Make text superscript.
• <strong> - Give strong importance to the text.
• <textarea> - Create a text area for the form.
• <time> - Designate a date and time that are readable by humans.
• <tt> - Make text teletype text.
• <u> - Underline text.
• <var> - Define text as a variable.
• <video> - Show a video file.
• <wbr> - Break a line of text.

Note that you cannot adjust the size of the inline element except by changing the size of the content inside of it.

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Block and Inline Elements - Tutorial for Beginners.” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.