HTML

HTML, or HyperText Markup Language, is the fundamental language used to create and structure web pages. It provides the basic building blocks for a webpage, such as headings, paragraphs, links, images, and other content. Originally designed for organizing and presenting documents, HTML has evolved and is now extensively used in web development to create both simple and complex applications. It works in conjunction with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, enabling developers to build rich, interactive web experiences.

Your First Web Page

Open Terminal, create a folder and start up VS code:

mkdir html
cd html
code .

In VS Code Press Command+Shift+X to enter Extension view and install the "Live Server" extension.

Then Press Command+Shift+E to open File Explorer and create a new html file index.html, paste the folowing code into the file:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>h for header</h1>
  <p>p for paragraph</p>
</body>
</html>

Then right-click on your HTML file and click "Open with Live Server". It will start a local server and automatically open your default browser.

VS Code is highly recommand here, but there are many other options to serve static content, such as using Python's built-in HTTP server. Simply run the following command to start the server in the current directory:

python3 -m http.server 8000

Then, visit http://localhost:8000 to view the webpage.

HTML Elments

Let's take a closer look at the code:

  • <!DOCTYPE html>: Declares the document type as HTML5(don't bother with previous versions).
  • <html>: The root element of an HTML document, which has a tree like structure.
  • <head>: Contains metadata about the webpage, such as the title and stylesheets.
  • <title>: Sets the title of the webpage, displayed in the browser's tab.
  • <body>: Contains the visible content of the webpage.
  • <h1>: Defines the most important heading on the page, there are also h2, h3 till h6.
  • <p>: Defines a paragraph of text.

Basic Structure of an Element

    start tag                        end tag
        |                               |
.-------+-------.                     .-+-.
|               |                     |   |
"<p class='demo'>This is a paragraph.</p>"
    |          | |                   | 
    '-----+----' '----------+--------'
          |                 |
      attribute          content

An element consists of a start tag, content, and an end tag. The start tag specifies the element's name and contains attributes. The end tag contains a / before the element name. The content can be text or other elements.

Some elements are self-closing and do not require an end tag or content:

<img src="image.jpg" alt="A beautiful image">

<div>

The <div> tag, short for "division", does not convey any semantic meaning about the content it wraps; it is essentially a "block-level" element used to group other elements together for styling with CSS or for scripting with JavaScript. It is highly versatile and is frequently used to create layout structures or sections within a webpage. However, for better accessibility and SEO, it's recommended to use semantic HTML tags (like <header>, <footer>, <article>, and <section>) where appropriate, as they provide more meaningful context about the content.