Div and Span Tags Samir Rana Div tags and span tags are very common HTML elements that are growing in popularity due to their flexibility. HTML div tags are more specific for organizational tasks like setting up the layout of your page, which are preferred over tables because of their fluid like nature. Span tags are used more to permit customization of text and are often used inside other HTML elements to customize a certain piece of content from the rest. Div and Span Tags The div element is a block level element, much like the paragraph tag. However, like I mentioned above, the div is more for creating internal structures in your document. HTML Div Element <!DOCTYPE html> <html> <body> <p>This is some text.</p> <div style="background-color:lightblue;height:200px;width:300px;"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <p>This is some text.</p> </body> </html> Example: The HTML span element is an inline element, which means that it can be used inside a block element and not create a new line. If you ever want to highlight some text inside a paragraph, wrap that text in a span tag and give it a class. Span tags are often used to incorporate a specific CSS style to differentiate certain parts of content. HTML Span Element Example: <p> Something here is <span style="color:red;"> special</span> , but which one?</p> Result: Something here is special, but which one? The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). Syntax z-index: number|auto|inherit|initial; Possible values number: It means that the element's stack level is set to the given value. It allows negative values. auto: It means that the order of the stack is equivalent to the parent, i.e., default. CSS z-index Thank you
