HTML Block and Inline Elements W3School
Examples of block-level elements: <div> <h1> - <h6> <p> <form>
Give examples of a block level element.
Examples of inline elements: <span> <a> <img>
Give examples of an inline element.
My Important Heading ("Important" is red The heading size is 24px This is an inline element)
How would this appear on a web page? You may write in colors and font families do not matter because individual browsers have unique default font families. <!DOCTYPE html> <html> <body> <h1>My <span style="color:red">Important</span> Heading</h1> </body> </html>
London (Heading size 2 = 22px) London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. (Black background with white font color) (This is a block element)
How would this appear on a web page? You may write in colors, font styles, heading size, and cell padding. <div style="background-color:black; color:white; padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html>
False: The <div> element has no required attributes, but style and class are common.
True or False: The <div> element has required attributes.
True: The <span> has no required attributes, but style and class are common.
True or False: The <span> element has no required attributes.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
What are the characteristics of a block-level element?
An inline element does not start on a new line and only takes up as much width as necessary.
What are the characteristics of an inline element?
block or inline
What are the two default display values for most html elements?
The <span> element.
What is an inline element that is often used as a container for some text?
The <div> element
Which element is a block-level element that is often used as a container for other HTML elements?