NSI Rocks !

DIV and SPAN Tags

Introduction

In website creation, HTML tags play a crucial role in structuring and styling content. Among them, the <div> and <span> tags stand out for their flexibility and versatility, especially when combined with CSS classes. This course will introduce you to the interest of these tags and their use to build modern and adapted sites.

Before detailing the interest of <div> and <span> tags, let's talk about CSS classes, their usefulness, and see an example that we will use below.

CSS Classes and their usefulness

CSS classes are essential for styling <div> and <span> tags. A class is an HTML attribute that serves to identify one or more elements to apply custom styles to them.

Example of CSS declaration:

.header {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.highlight {
    color: red;
    font-weight: bold;
}

Effect of classes:

  • The header class applies a light gray background, padding, and centers the header text.
  • The highlight class makes the text red and bold.

<div> Tag

The <div> tag is a container-type tag that serves to group HTML elements. It is often used to structure sections of a web page.

Main characteristics:

  • Block: The <div> tag occupies all the available width of the page.
  • Organization: It allows creating logical divisions in the content.
  • Usage: It is often used as an application point for CSS styles.

Example:

Welcome to my site Site made by myself!
<div class="header">
    <h1>Welcome to my site</h1>
    <h2>Site made by myself!</h2>
</div>

Here, the header class applied to the <div> allows styling the page header.

<span> Tag

The <span> tag is an inline tag that serves to style a specific portion of text or an HTML element without disrupting the content flow.

Main characteristics:

  • Inline: It does not interrupt the text flow.
  • Flexibility: It is ideal for applying styles to specific words or phrases.

Example:

This site is extraordinary!

<p>This site is <span class="highlight">extraordinary</span>!</p>

In this example, the highlight class applied to the <span> allows highlighting the word "extraordinary".

Comparison between <div> and <span>

Characteristic<div><span>
Element typeBlockInline
Main usageSection organizationText formatting
Layout interruptionYesNo

Practical Workshop

Objective:

Create a simple web page containing a header, a main section and highlighted words.

HTML code to create:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV and SPAN Tags</title>
    <style>
        .header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }

        .highlight {
            color: blue;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Welcome to our site</h1>
    </div>
    <div class="content">
        <p>Learn to use <span class="highlight">HTML</span> tags like a pro.</p>
    </div>
</body>
</html>

Instructions:

  1. Create this code in an HTML file.
  2. Test it in your browser.
  3. Experiment by modifying the CSS styles or adding other <div> and <span>.

Conclusion

The <div> and <span> tags are essential tools for structuring and styling your web pages. By associating them with CSS classes, you can create elegant and functional designs while maintaining a clear organization of your code. Try using them in your own projects to discover their full potential !