HTML Tutorial

What is HTML?

HTML is actually shorthand for Hypertext Markup Language. It is the language of Web pages that tells a browser how to display certain elements, such as text and images through the use of codes and symbols.

HTML is the standard when it comes to creating Web pages. The World Wide Web Consortium, or W3C recommends it. Being such, most browsers implement HTML to help display Web pages more or less uniformly.

HTML is the combination of HyperText and Markup Language. HyperText defines the internal links between webpages while Markup language defines the layout and presentation of text and media.

This language annotates text so that machines can understand and manipulate it accordingly. HTML is human-readable and uses tags to define what manipulation has to be done on the text.

Use of HTML

  • Structuring web pages
  • Navigating the internet
  • Embedding images and videos
  • Improving client-side data storage and offline capabilities
  • Game development
  • Interacting with native APIs

HTML Basic Structure

The basic structure of an HTML document consists of specific tags that define the framework of a webpage. Here's the structure with explanations:

An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:
  <!DOCTYPE html>
  <html>
    <head>
      <title>Page title</title>
    </head>
    <body>
      <h1>Welcome to topfreecourse.com</h1>
      <p>This is a basic HTML structure.</p>
    </body>
  </html>
            

Explanation of the Structure:

  • <!DOCTYPE html>

    • Declares the document type and version of HTML. This ensures the browser renders the page correctly.
    • Modern webpages use HTML5, so the declaration is simply <!DOCTYPE html>.
  • <html>

    • The root element of the HTML document.
    • Encloses all the content on the webpage.
  • <head>

    • Contains metadata and links to external resources such as stylesheets and scripts.
    • Typical contents include:
      • <title> Sets the title of the page shown on the browser tab.
      • <meta> Provides metadata like character encoding, viewport settings, etc.
      • <link> Links external CSS files.
      • <script> Includes or links external JavaScript.
  • <body>

    • Contains all the visible content of the webpage, such as text, images, links, forms, etc.
    • Examples of content:
      • <h1>: Defines the main heading.
      • <p>: Adds paragraphs.
      • Other elements like <div>, <img>, <ul>, and <a> can also be included.
Next