Div tag in HTML
The <div> tag in HTML stands for 'division'. It is one of the most commonly used elements in web development. This tag acts as a container that helps in grouping together different HTML elements so that you can style or manage them as a single unit using CSS or JavaScript.
Key Features of <div>
Key Features of <div>
- It is a block level element meaning it starts on a new line and stretches to fill the full width.
- It does not add any styling by default It is purely a container.
- Useful for layout, styling multiple elements or adding interactivity with JavaScript.
- Helps organize code and make your HTML more readable.
When to Use <div>
- To group multiple elements like text, images or buttons.
- To apply common styles or class selectors to a set of elements.
- For page layout structure along with CSS (like grid or flexbox).
Example:
Output:
Tips
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Div Example</title></head><body><div style="border:1px solid red; padding:20px; font-size:20px;"><p>Welcome to Quipoin</p><p>This is a paragraph</p></div></body></html>
Output:
Tips
- For semantic HTML, try using tags like <section>, <article> or <main> if they better describe your content.
- Use CSS classes instead of inline styles for cleaner code.