FullStackCamp | Lesson 3: Elements, Attributes, and Document Structure

In this lesson, we will cover the basics of HTML, focusing on elements, attributes, and document structure. The topics we will cover include:

Table of Contents

Understanding HTML elements

HTML elements are the building blocks of a webpage. They define the structure and content of the page. An HTML element typically consists of an opening tag, content, and a closing tag. For example:

<p>This is a paragraph.</p>

Some common HTML elements include:

<h1> to <h6>: Heading elements that define the headings of various levels
<p>: Paragraph element for defining paragraphs
<a>: Anchor element for creating hyperlinks
<img>: Image element for displaying images
<ul> and <ol>: Unordered and ordered list elements for creating lists
<li>: List item element for defining items within a list

Using HTML attributes

Attributes provide additional information about an HTML element. They are added to the opening tag of an element and consist of a name-value pair. For example:

<a href="<https://www.example.com>">Visit our website</a>

In this example, the href attribute is used with the anchor element to specify the URL of the linked page.

Some common HTML attributes include:

href: Specifies the URL of a linked page (used with <a>)
src: Specifies the URL of an image file (used with <img>)
alt: Specifies alternative text for an image (used with <img>)
id: Specifies a unique identifier for an element
class: Specifies a class name for an element, which can be used for styling and scripting

Basic document structure

An HTML document has a specific structure, which includes the following elements:

<!DOCTYPE>: Defines the document type and version of HTML being used
<html>: The root element of the page
<head>: Contains meta information about the document, such as its title and links to external resources
<body>: Contains the actual content of the page

A basic HTML document structure looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Actionable Work

Create a new HTML file and practice writing some basic HTML elements, such as headings, paragraphs, and lists.
Add attributes to your elements, such as href for links and src and alt for images.
Set up a basic HTML document structure with a <!DOCTYPE>, <html>, <head>, and <body> elements.
Experiment with using id and class attributes to identify and group elements.
Review your work in a web browser to see how your HTML elements and attributes are rendered.