Submodule 1.4: More elements
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Study / Web Design and Web Development |
| Book: | Submodule 1.4: More elements |
| Printed by: | Guest user |
| Date: | Saturday, 20 April 2024, 3:38 PM |
Description
- div element
- span element
The div element
The <div> tag is used to group large areas of HTML in order to apply them CSS (or JavaScript as we will see later).
In the web page, white space is displayed before and after the div element.
An appropriate usage of the <div> element would be if we wanted to apply the same style to multiple paragraphs of our HTML. For example, if we wanted 10 of our paragraphs to have the same style, we could group them using the <div> element and apply the necessary class only one time instead of 10.
Examples
The following code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.cl1 {background:lightblue}
</style>
</head>
<body>
<p>This is a paragraph before the div</p>
<div>
This is a div with no style
</div>
<p>This is a paragraph in the middle</p>
<div class="cl1">
<p>This is a p in a div with a blue background</p>
</div>
</body>
</html>will create a page displayed as:
The following code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.cl1 {background:yellow; font-size:16pt; font-family:courier}
.cl2 {background:lightblue; font-size:3em; font-family:Arial; width:30%}
</style>
</head>
<body>
<p>This is a paragraph before the div</p>
<div class="cl1">
This is a div with a yellow background
</div>
<p>This is a paragraph in the middle</p>
<div class="cl2">
This is a div with a blue background
</div>
</body>
</html>will create a page displayed as:
The span element
The <span> tag is used to group small part of a text.
Similar to <div>, is used to apply CSS or JavaScript rules.
However, in contrast with <div>, the span is an inline element. This means that it doesn’t add a line break. Thus, it can be used inside any element./
Example
The CSS rules:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#cl1 {background:yellow;}
</style>
</head>
<body>
<p>This is not span text <span>but this is</span> and this isn't</p>
<p>This is not span text <span id ="cl1">but this is</span> and this isn't</p>
</body>
</html>will create a page displayed as:
