Block Elements
Block elements take up the full width available (by default) and start on a new line. They stack on top of each other vertically.
Following are some Common Block Elements in HTML
1. <div>
2. <h1> to <h6> (heading tags)
3. <p> (paragraph)
4. <ul> and <ol> (unordered and ordered lists)
5. <li> (list item)
6. <header>, <footer>, <section>, and other HTML5 semantic elements
block-elements.html
<!DOCTYPE html> <html> <head> <title>Block Element Example</title> </head> <body> <div> This is a div, which is a block element. </div> <p> This is a paragraph, another example of a block element. </p> <h1> This is a heading, also a block element. </h1> </body> </html>
Inline Elements
Inline elements take up only as much width as necessary and do not start on a new line. They are placed next to each other horizontally.
Following are the Common Inline Elements in HTML.
1. <span>
2. <a> (anchor/link)
3. <strong> and <b> (bold text)
4. <em> and <i> (italic text)
5. <img> (image)
Inline elements only occupy the width of their content. They do not force a line break and can sit side-by-side with other inline elements within the same line.
inline-elements.html
<!DOCTYPE html> <html> <head> <title>Inline Element Example</title> </head> <body> <p> This is a paragraph with <span style="color: blue;">inline</span> elements like <a href="#">links</a> and <strong>bold text</strong>. </p> <p> An image as an inline element: <img src="tree.jpeg" alt="Example Image" width="100">, tree with green leafs. </p> </body> </html>
Block vs Inline Elements
1. Block Elements start on a new line, where as Inline elements do not start on a new line, they stay inline.
2. Block Elements take up the full width of the container, where as Inline elements only take up as much width as their content.
3. Block Elements can contain other block or inline elements. Where as Inline elements cannot contain block elements, only other inline elements or text.
block-vs-inline.html
<!DOCTYPE html> <html> <head> <title>Block and Inline Elements Example</title> </head> <body> <h1>This is a block element (heading)</h1> <p>This is another block element (paragraph), and within it, we have <a href="#">inline elements</a> like this link.</p> <div> This div is a block element. It contains a <span style="color: green;">span</span>, which is an inline element. </div> <p> This is an example of a sentence with an <a href="#" style="color: blue;">inline link that contains <strong>bold text</strong></a>. </p> </body> </html>
No comments:
Post a Comment