Skip to content

H010 Getting Started with HTML

The goal of this simple task is to create a basic HTML document using Visual Studio Code, preview it with Live Server, include basic markup, SEO optimization, attributes, comments, and linting.

Step-by-Step Guide

Setting up VS Code

  • Download and install Visual Studio Code.
  • Open VS Code. Go to Extensions (or press Ctrl+Shift+X).
  • Search for “Live Server” and install this extension.
  • Search for “HTMLHint” and install this extension.
  • Search for “Minify” and install this extension.
  • Search for “Prettier” and install this extension.
  • Search for “W3C Offline HTML Validator” and install this extension.
    • You might want to disable the warning messages in the settings - search for htmlValidator.showWarningMessages.

Creating the HTML Document

  • Create an empty folder on your disk, e.g., c:\temp or c:\code.
  • Open the folder in Code (File -> Open Folder).
  • Create a new file in VS Code by pressing Ctrl+N.
  • Save the file with the .html extension, e.g., mypage.html.

Adding HTML Structure with Comments and Attributes

<!DOCTYPE html>
<!-- The document type declares that this is an HTML5 page -->
<!-- This is an HTML comment. It will not be displayed in the browser. -->
<html lang="en">
  <!-- The 'lang' attribute specifies the language code -->

  <head>
    <meta charset="UTF-8" />
    <!-- Character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Makes the page mobile-friendly -->
    <meta
      name="description"
      content="This is a description of my page for SEO"
    />
    <!-- Simple SEO optimization -->
    <title>My Simple HTML Document</title>
    <!-- Title displayed in the browser tab -->
  </head>

  <body>
    <h1>Welcome to my page!</h1>

    <!-- Hyperlink with 'href' attribute and 'target' attribute -->
    <a href="https://www.w3.org" target="_blank">Visit W3C's website</a>

    <!-- Paragraph with 'title' attribute functioning as a tooltip -->
    <p title="Tooltip text here">Hover over me to see a tooltip!</p>
  </body>
</html>

Using Live Server

  • With the mypage.html file open, right-click anywhere in the editor and select “Open with Live Server,” or click “Go Live” at the bottom of VS Code.

Using HTMLHint (Linter)

  • With HTMLHint installed, it will automatically check your HTML code for issues.
  • Any warnings or errors will be highlighted directly in your code with squiggly lines and displayed in the “Problems” panel (access this with Ctrl+Shift+M).

Formatting

  • Press F1 and type “Format Document,” then press Enter.
  • It may show multiple formatting options.
    • Choose “Configure” and select Prettier.
  • Try F1 and “Format Document” again—it should now format the code.
  • Many people prefer formatting on save:
  • File -> Preferences -> Settings
    • Search for “Save.”
    • Check “Format on Save.”
    • Close settings.
  • Try adding spaces or line breaks and save. The code should now format automatically.

Validation

  • Use the W3C Offline HTML Validator extension to validate your HTML.

or

  • Copy the content of your HTML file.
  • Go to W3C’s Markup Validation Service.
  • Paste your code into the text box and click “Check.”
  • Fix any errors or warnings that appear.

Minification

  • Press F1 and type “Minify” in the menu. This will generate a minified version of your markup.
  • Alternatively, you can configure the extension to automatically minify your files when saved.

With this guide, you should be able to create a simple, validated HTML page.