Be able to use the
tag including to apply styles and classes

Resources | Subject Notes | Information Communication Technology ICT

21 Website Authoring: Using the
Tag with Styles and Classes

The

tag is a fundamental element in HTML used to group other HTML elements together. It provides a generic container for content and is often used in conjunction with CSS to apply styles and classes, enabling structured and visually appealing website layouts.

Understanding the
Tag

The

tag is a block-level element, meaning it starts on a new line and takes up the full width available to it. It does not have any inherent visual styling.

Syntax: <div class="class-name" id="element-id"> <content> </div>

Applying Classes

Classes allow you to apply the same set of styles to multiple elements. You define a class in the <style> section or in an external CSS file, and then apply it to HTML elements using the class attribute.

Example:

<div class="container"> <h2>Welcome</h2> <p>This is some text within a container.</p> </div>

Applying Styles

Styles can be applied to elements in several ways: inline styles (directly within the HTML tag), internal styles (within the <style> tag in the <head> section), or external stylesheets (linked using the <link> tag).

Example of an internal style:

<style>
  .container {
    border: 1px solid black;
    padding: 10px;
    background-color: #f0f0f0;
  }
  h2 {
    color: blue;
  }
</style>

Using
for Layout

The

tag is commonly used to create sections or blocks within a webpage. You can apply different classes to these
elements to control their appearance and layout.

Example of a simple layout:

Suggested diagram: A webpage with a header (div), main content (div), and a footer (div).
Section Description
Header The top section of the webpage.
Main Content The primary content of the webpage.
Footer The bottom section of the webpage, often containing copyright information.

Example HTML

<!DOCTYPE html>
<html>
<head>
  <title>Div Tag Example</title>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
    .important {
      color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>My Website</h1>
    <div class="highlight">
      <p>This is a highlighted paragraph.</p>
    </div>
    <div class="important">
      <p>This is an important paragraph.</p>
    </div>
    <ul>
      <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
      </ol>
    </ul>
  </div>
</body>
</html>