Inline and Block Elements part 1

HTML Fundamentals
HTML Basics
Inline and Block Elements
84
1/2
     

Types of Elements



In HTML, most elements are defined as block level or inline elements.
Block level elements start from a new line. 
For example: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.

Inline elements are normally displayed without line breaks. 
For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.

The <div> element is a block-level element that is often used as a container for other HTML elements.
When used together with some CSS styling, the <div> element can be used to style blocks of content:
<html>
<body>
<h1>Headline</h1>
<div style="background-color:green; color:white; padding:20px;">
<p>Some paragraph text goes here.</p>
<p>Another paragraph goes here.</p>
</div>
</body>
</html>Try It Yourself


Similarly, the <span> element is an inline element that is often used as a container for some text.
When used together with CSS, the <span> element can be used to style parts of the text:
<html>
<body>
<h2>Some
<span style="color:red">Important</span> Message</h2>
</body>
</html>Try It Yourself


Summary
The <div> element defines a block-levelsection in a document.
The <span> element defines an inline section in a document.

Comments

Post a Comment

Popular posts from this blog

SVG Animations & Paths part 2

Image
Paths The  <path>  element is used to define a path. The following commands are available for path data: M : moveto L : lineto H : horizontal lineto V:  vertical lineto C : curveto S : smooth curveto Q : quadratic Bézier curve T : smooth quadratic Bézier curveto A:  elliptical Arc Z : closepath Define a path using the  d  attribute: <svg width="500" height="500"> < path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" /> </svg> Try It Yourself M places our "virtual pen" down at the position 0, 0. It then moves 200px down and to the right, then moves up to the position 200, 0. The Z command closes the shape, which results in a hypotenuse: All of the above commands can also be expressed with lower case letters. When capital letters are used, it indicates absolute position; lower case indicates relative position.
Read more

header, nav & footer part 1

Image
The <header> Element In HTML4, we would define a header like this: <div id="header"> In HTML5, a simple  <header>  tag is used, instead. The  <header>  element is appropriate for use inside the body tag. <!DOCTYPE html> <html> <head> </head> <body> <header> <h1> Most important heading </h1> <h3> Less important heading </h3> </header> </body> </html> Try It Yourself Note that the  <header>  is completely different from the  <head>  tag
Read more