Welcome to Lesson 1 of FullStack Lessons! In this lesson, we will start with the foundation of web development: HTML, which stands for HyperText Markup Language. HTML is not a programming language; it is a markup language used to define the structure of web pages. Understanding HTML is essential before moving on to styling with CSS or adding interactivity with JavaScript. By mastering HTML, you will be able to create well-structured, semantic web pages that are accessible, readable, and compatible across different browsers.

HTML documents are made up of elements, which are the building blocks of a web page. An element usually consists of an opening tag, content, and a closing tag. For example, a paragraph element looks like this:

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

The <p> tag denotes a paragraph, and the content “This is a paragraph” appears on the web page. Properly using elements ensures that your content is both structured and semantic, which is important for search engine optimization (SEO) and accessibility.

HTML also uses attributes to provide additional information about elements. Attributes are written inside the opening tag and usually have a name and a value. For example, a link uses the href attribute to define the destination URL:

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

In this example, the text “Visit Example” will appear as a clickable link that navigates to https://www.example.com when clicked. Links are fundamental to the web, allowing users to navigate between pages, sections, or even different websites.

Images are another common HTML element. They use the <img> tag, which is self-closing and requires the src (source) and alt (alternative text) attributes:

<img src="image.png" alt="Description of the image">

The src attribute points to the image file, while the alt attribute provides a text description that is displayed if the image cannot be loaded and is also used by screen readers for accessibility.

Every HTML document begins with a <!DOCTYPE html> declaration, which tells the browser that the document is an HTML5 file. A basic HTML page structure looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

The <html> tag wraps the entire content of the page. Inside it, the <head> contains meta-information such as the page title, character encoding, and viewport settings for responsive design. The <body> contains the visible content, including headings, paragraphs, images, links, lists, and more.

Headings are used to create a hierarchical structure in your content. There are six levels of headings, from <h1> to <h6>. <h1> is the most important heading, typically used for the main page title, while <h2> to <h6> are used for subheadings and sections. Proper use of headings improves readability and SEO.

Lists are another fundamental component of HTML. Unordered lists (<ul>) are for items without a specific order, while ordered lists (<ol>) are for items with a sequence. List items are wrapped in <li> tags. For example:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Forms allow you to collect user input. A form is created with the <form> tag, and inputs are defined using the <input> element. Forms are crucial for interactive websites, including login pages, search bars, and surveys. A simple form example is:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Semantic tags provide meaning to the content. Tags like <header>, <footer>, <section>, and <article> help browsers, search engines, and assistive technologies understand your page structure. Using semantic HTML improves accessibility and maintainability.

HTML also supports multimedia content such as videos and audio. The <video> and <audio> tags allow you to embed media directly into a page. Example:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Comments in HTML are written like this: <!-- This is a comment -->. Comments are not displayed on the page but are useful for leaving notes in the code.

It is good practice to validate your HTML using the W3C validator. Validation ensures that your HTML follows proper syntax, reducing browser inconsistencies and improving accessibility.

Practice is crucial when learning HTML. Start by creating simple pages: a homepage, a personal bio page, or a small portfolio. Experiment with headings, paragraphs, lists, links, and images. As you progress, try nesting elements, using semantic tags, and building multi-section pages. This foundation will prepare you for styling with CSS and adding interactivity with JavaScript.

By the end of this lesson, you should be comfortable with:

  • Creating a basic HTML page with <!DOCTYPE html>, <html>, <head>, and <body>
  • Using headings, paragraphs, lists, links, and images
  • Applying attributes such as href, src, and alt
  • Understanding semantic HTML and accessibility considerations
  • Creating forms for user input
  • Embedding audio and video content
  • Writing comments and validating HTML for best practices

Start experimenting today by building small HTML projects. Once you are confident, move on to Lesson 2: CSS Basics, where you will learn how to style these HTML elements to make your pages visually appealing and professional.

Next Lesson: CSS Basics →