Introduction - Role of HTML in Web Development

Hello, future coder! Let's start our Front-End Engineering exploration journey. Believe me - it will be a lot of fun!

Today, we'll dive into HTML, the blueprint of every webpage. HTML is like a layout plan for a house, defining the structure of a web page — from the headings at the top down to the text within the paragraphs.

Introduction to DOCTYPE

Imagine an architect labeling his blueprints to specify the architectural style used. Similarly, HTML starts with <!DOCTYPE html> to indicate we're using HTML5 — simple, straightforward, with no need for uppercase characters or quotations.

<!DOCTYPE html>

With this line, we tell web browsers to expect a modern HTML structure.

Anatomy of an HTML Tag

Tags are the central units of HTML. They designate different types of content, such as paragraphs, headings, and links. A tag usually comprises an opening and closing tag, with content placed in between. For instance, consider a paragraph tag:

<p>This is a paragraph.</p>

Here, <p> and </p> represent the opening and closing tags, respectively, while the text in the middle is the content. Note that the opening and closing tags are represented with angle brackets <>, and the closing tag has an extra forward slash / in front of the tag name.

Understanding Minimal HTML Structure

Just as a house needs a foundation, walls, and a roof, an HTML page requires proper structure. Each tag plays a unique role:

  • <!DOCTYPE html>: Specifies HTML version.
  • <html>: The root of an HTML document.
  • <head>: Contains essential metadata.
  • <body>: Houses visible content.
  • <title>: Displays the page's title on the browser tab.

Together, they form the skeleton of an HTML page:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

Even though it's blank, our blueprint now constitutes a valid HTML structure!

Deep Dive Into Essential HTML Tags

Now, let's examine each of these simple tags:

  • <html>: Wraps all webpage content within it.
  • <head>: Acts much like an attic, storing useful information for the browser but not visible to users.
  • <body>: The living room of our webpage house, where all the dynamic action happens. It contains visible webpage content, such as text and images.
  • <title>: Functions as the nameplate or the address of our house, displayed in the browser tab.

Keep in mind, all these tags (except <!DOCTYPE html>) require a pairing opening and closing tag!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal