Day 32: Introduction to HTML

HTML, short for HyperText Markup Language, is the standard markup language used to create web pages. It provides the structure and content of a webpage and allows you to specify how that content should be displayed in a web browser. In this lesson, we will cover the basics of HTML, including its syntax, structure, and tags.

HTML Basics

HTML uses a specific syntax, which consists of tags that are enclosed in angle brackets (< and >). A tag is a piece of code that indicates the start and end of an HTML element. HTML elements are the building blocks of a webpage and define different parts of the content, such as headings, paragraphs, images, links, and more.

Here’s an example of a basic HTML document:

phpCopy code<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my Webpage!</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Let’s break it down:

  • The <!DOCTYPE html> declaration at the beginning specifies the HTML version.
  • The <html> element is the root element of an HTML document and contains all the other elements.
  • The <head> element contains meta information about the document, such as the title of the page.
  • The <title> element specifies the title of the document, which appears in the browser’s title bar.
  • The <body> element contains the visible page content.
  • The <h1> element defines a heading, and the <p> element defines a paragraph.

Common HTML Tags

Here are some of the most commonly used HTML tags:

  • <html>: Defines the root of an HTML document
  • <head>: Defines information about the document
  • <title>: Defines the title of the document
  • <body>: Defines the body of the document
  • <header>: Defines a header for a document or section
  • <footer>: Defines a footer for a document or section
  • <nav>: Defines a navigation menu
  • <article>: Defines an article
  • <section>: Defines a section
  • <div>: Defines a division or section of a document

Attributes in HTML

HTML attributes provide additional information about HTML elements. They are always specified in the start tag, and their values are enclosed in quotes. Some common attributes include:

  • id: Specifies a unique identifier for an element
  • class: Specifies a class name for an element
  • href: Specifies the URL of a link
  • src: Specifies the URL of an image or other media file

Semantic HTML

Semantic HTML is the practice of using HTML tags for their intended meaning. For example, using a <h1> tag for the main heading of a page, rather than just making the text big and bold with CSS. Using semantic HTML makes your code more accessible and easier to understand, both for humans and machines.

That’s it for this lesson on Introduction to HTML. In the next lesson, we’ll cover the basics of CSS, which is used to style HTML documents.