Amina
Amina's Blog

lorem ipsum

Jun 12, 2024 4 minute read

HTML Intro

Table of Contents

  1. What is HTML?
  2. What is an Element?
  3. Basic Structure of an HTML Document
  4. Displaying an HTML Page
  5. Commonly Used HTML Tags
  6. Example of a Simple Webpage
  7. Useful Links

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It consists of a series of elements, which tell the browser how to display the content.

What is an Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1> <p>My first paragraph.</p>

Basic Structure of an HTML Document

An HTML document typically follows this structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Displaying an HTML page

To display an HTML page, you need a browser. The purpose of a web browser, like Chrome, Firefox or Safari, is to read HTML documents and to display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

How To Create and View a Website on Your Computer | W3Schools

As you can see, an HTML page on its own is plain and unstyled.

To make the webpage visually appealing, you use CSS (Cascading Style Sheets). CSS allows you to apply styles to your HTML elements, such as colors, fonts, spacing, and layout.

Commonly Used HTML Tags

Here are some of the most commonly used HTML tags:

Document Structure Tags:

  • <!DOCTYPE html>: Defines the document type and version of HTML.
  • <html>: The root element of an HTML document.
  • <head>: Contains meta-information about the document.
  • <title>: Sets the title of the document, which appears in the browser's title bar or tab.
  • <body>: Defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Text Formatting Tags:

  • <h1> to <h6>: Define HTML headings. H1 is the highest level heading, and H6 is the lowest.
  • <p>: Defines a paragraph.
  • <br>: Inserts a line break.
  • <strong>: Defines important text (typically rendered in bold).
  • <em>: Defines emphasized text (typically rendered in italics).
  • <a>: Defines a hyperlink.
  • <ul>, <ol>, <li>: Define lists (unordered and ordered lists, and list items).

    • List example:

      <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Media Tags:

  • <img>: Embeds an image.
  • <video>: Embeds a video.
  • <audio>: Embeds an audio file.

Form Tags:

  • <form>: Defines an HTML form for user input.
  • <input>: Defines an input control.
  • <textarea>: Defines a multi-line text input control.
  • <button>: Defines a clickable button.
  • <label>: Defines a label for an input element.

Example of a Simple Webpage

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Webpage</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>About Me</h2>
            <p>Hi, I'm a web developer!</p>
            <img src="myphoto.jpg" alt="My Photo">
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My First Webpage</p>
    </footer>
</body>
</html>
Amina