Questions
1 of 8
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
What are semantic elements and why do they matter?
Difference Between Block and Inline Elements in HTML
In HTML, elements are broadly categorized into block-level and inline elements. They differ in how they are displayed and how they interact with surrounding elements.
Key Differences
- 1
Block elements always start on a new line and take up the full width available by default.
- 2
Inline elements do not start on a new line and only take up as much width as needed.
- 3
Block elements can contain other block elements and inline elements, while inline elements usually contain only text or other inline elements.
- 4
Block elements are commonly used for layout structure, while inline elements are used for styling small parts of text or content.
Example of Block vs Inline Elements