Block-level vs. Inline Elements

HTML elements are classified as block-level or inline based on their behavior within a webpage's layout.

Block-level Elements

• Always start on a new line.
• Occupy the full width of their container.
• Browsers automatically add margin before and after them.

Common Block Elements

Two widely used block elements are:

• <p> - Represents a paragraph.
• <div> - Defines a division or section in an HTML document.

Example

<p style="border: 1px solid red">Hello World</p>
<div style="border: 1px solid green">Hello World</div>

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>

Inline Elements

• Do not start on a new line.
• Take up only as much width as needed.
• Used for styling, formatting, and linking text.

Example

<p>This is an inline element: <span style="border: 1px solid green">Hello World</span>.</p>
<p>The `<span>` element does not start on a new line and only occupies necessary space.</p>

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>

Conclusion

Block-level elements start on a new line and occupy the full width of their container, while inline elements do not start on a new line and only take up as much width as needed. Block elements are commonly used for structuring content, such as paragraphs and divisions, while inline elements are used for styling and formatting within text.