Skip to main content

HTML Syntax

External Resource

📖 Introduction to HTML - W3Schools provides an excellent introduction to HTML. Read through this to understand "What is HTML?" and the HTML document structure.

Page Structure​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My web page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

VSCode Shortcut

You can quickly create this html document structure by typing ! in an empty .html file in VSCode. You will get a pop-up labelled "emmet abbreviation" which you can accept by clicking on it or pressing Tab.

Let's look at the elements in this starter template:

  • The <!DOCTYPE html> declaration at the top tells browsers this is an HTML5 document
  • The <html> element is the root element that wraps all content
  • The <head> section contains metadata about the document:
    • <meta charset="UTF-8"> specifies the character encoding
    • <meta name="viewport"> helps with mobile responsive display
    • <title> sets the page title shown in browser tabs
  • The <body> element is where visible page content will go

Headings and Text​

The main content of web pages consists of headings, paragraphs, and other text elements. HTML provides heading elements from <h1> (most important) through <h6> (least important).

Paragraphs are created with the <p> tag.

<!DOCTYPE html>
<html>
  <head>
      <title>Headings Demo</title>
  </head>
  <body>
      <h1>Main Heading</h1>
      <h2>Subheading</h2>
      <p>This is a paragraph of text. HTML will automatically wrap text within paragraph tags.</p>
      <h3>Smaller Heading</h3>
      <p>Another paragraph showing different heading levels.</p>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

Spacing - Horizontal Rules and Line Breaks​

The <hr> tag creates a horizontal line to separate content sections. It is a self-closing tag and does not require a closing tag. This is because it does not take any text content.

The <br> tag inserts a line break within text, allowing for single-line spacing without starting a new paragraph. It is also a self-closing tag. HTML does not translate multiple spaces in your code to multiple spaces on the webpage (It condensed any whitespace to one space). If you want to add text on a new line, you can use the <br> tag.

<!DOCTYPE html>
<html>
  <head>
      <title>HR and BR Demo</title>
  </head>
  <body>
      <h1>Heading Above the Line</h1>
      <hr>
      <p>This is a paragraph of text above the horizontal line.</p>
      <p>This is another line of text.<br>This text is after a line break.</p>
  </body>
</html>
Open on CodeSandboxOpen Sandbox