HTML 1-06

ID and Classes

id and class are HTML attributes used to identify elements. They are mostly used to pick an element for styling or perform JavaScript operations.

`id`

From the last class, we covered anchor tags and how we can use them to navigate from one page to another. Here, we will take a look at how to navigate between elements on the same page.

To do this, you need to give the element you want to navigate to a unique id attribute. We use id to uniquely identify elements and it is strongly recommended to never repeat an id.

<!-- HTML Element -->
<element id="some-id">HTML Element</element>

<!-- Anchor tag to navigate to the element -->
<a href="#some-id">Take me to the element</a>

Project so far…

File Tree

Directoryhtml_basics
- Directoryimg
  - dog1.jpg
  - dog2.jpg
- chapter.html
- contact.html
- index.html
- survey.html

<body>
  <!--This is a comment -->
  <!-- Introduction section - A bit about myself -->
  <!-- CTRL + / is the shortcut for adding or removing comments -->
  <h1>About Me</h1>
  <!-- Unique id attribute -->
  <h2 id="intro">Introduction</h2>
  <p>
    Hi, I'm Erron Black, a passionate web developer. I love creating websites
    that are both functional and aesthetically pleasing.
  </p>
  <p>
    I've been coding for over 5 years, and I've worked with a variety of
    languages, but my favorite by far is HTML because it is the foundation of
    the web.
  </p>
  <h2>My Philosophy</h2>
  <blockquote>
    "The best way to predict the future is to invent it." - Alan Kay
  </blockquote>
  <h2>My Articles</h2>
  <!-- ul>li*4 -->
  <ul>
    <li>How to create a signup form</li>
    <li>Simple recipe page</li>
    <li>State and capitale in Nigeria</li>
    <li>Travel Destination</li>
    <li>
      <a href="chapter.html" target="_top">Book Chapter</a>
    </li>
  </ul>
  <!-- HTML Links -->
  <h2>HTML Links</h2>
  <p>
    <a href="https://google.com"
      >This entire text will take you to the Google homepage</a
    >
  </p>
  <p>This <a href="https://wikipedia.com">link</a> takes you to wikipedia.</p>
  <h2>Random Images of Puppies</h2>
  <img src="./img/dog1.jpg" alt="An image of a puppy" />
  <img
    src="https://images.dog.ceo/breeds/ovcharka-caucasian/IMG_20191125_161809.jpg"
    alt="An image of a dog"
  />
  <img src="#" alt="Unrendered picture" />
  <!-- Anchor tag links to the h2 element -->
  <p>This <a href="#intro">link</a> takes you to the Introduction section</p>
</body>

Output

About Me

Introduction

Hi, I’m Erron Black, a passionate web developer. I love creating websites that are both functional and aesthetically pleasing.

I’ve been coding for over 5 years, and I’ve worked with a variety of languages, but my favorite by far is HTML because it is the foundation of the web.

My Philosophy

“The best way to predict the future is to invent it.” - Alan Kay

My Articles

How to create a signup form
Simple recipe page
State and capitale in Nigeria
Travel Destination
Google Homepage

HTML Links

This entire text will take you to the Google homepage

This link takes you to wikipedia.

Random Images of Puppies

This link takes you to the Introduction section

`class`

We use classes to identify multiple one or multiple elements. Unlike id, we can apply a single class to multiple elements. We will delve more into this when we start styling our elements.

<div class="container">
  <h2>Section Title</h2>
  <p>This is a paragraph inside a div with the "container" class.</p>
</div>

Divs and Span

div (division): A block-level element used to group or section off larger chunks of content, such as paragraphs, images, or other block elements. It typically creates a line break before and after it, occupying the full width available by default.

Div example

<div style="background-color: lightblue; padding: 10px;">
  <h1>This is a Heading inside a div</h1>
  <p>This is a paragraph inside a div.</p>
</div>

Output

This is a Heading inside a div

This is a paragraph inside a div.

span: An inline element used to wrap small portions of text or inline content within a larger element, such as within a paragraph. It doesn’t cause a line break and only takes up as much width as its content.

Span example

<p>
  This is a normal paragraph with
  <span style="color: red;">some red text</span> inside it.
</p>

Output

This is a normal paragraph with some red text inside it.