Introduction to HTML: Structure and Syntax

24 May, 2023

Contributors

Shruti Balasa

@shrutibalasa

In this series, we will discuss basic HTML concepts and the most frequently used HTML tags and elements. The aim is not to cover the entire set of HTML tags but to provide you with a guide to get started easily.

First, let’s get introduced to the basic structure of HTML and its syntax. With no more delay, open the editor you just installed (like VS Code) and create a new file. Save this file with a .html extension. For example, you can name your "First Web Page" file as first.html Always make sure to use the .html extension when saving your HTML files.

DOCTYPE

Before we start writing any HTML, we need to declare the document type. It's like telling the browser, "Hey, I'm writing HTML, so please treat this as an HTML file." To do this, we use the <!DOCTYPE html> declaration at the very beginning of the new file.

<!DOCTYPE html>

The HTML Element

The root element of an HTML document is the <html> element. It's the main container - everything else goes inside of it. Your HTML file should look like this, to begin with:

<!DOCTYPE html>
<html>
</html>

HTML Structure with Head and Body

Inside the <html> element, we have two main elements - <head> and <body>. The <head> contains metadata and other information about the document, while the <body> holds the content displayed on the web page. So here's what every HTML skeleton looks like:

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

If you add this to your first.html and preview this using “Live Server”, you’ll still see a blank page because we haven’t added any content yet.

Elements and Tags

HTML is full of elements that form the structure and define the content of the web page. Elements are represented by tags. Each tag has an opening and closing part, with content written between them. Here's a simple example. Add this element within the <body> tag and preview the file in browser.

<h1>This is the main heading of a page</h1>

In this example, <h1> is the opening tag, </h1> is the closing tag. And "This is the main heading of a page" is the content displayed on the web page. You must have seen that the browser does not display <h1> and </h1> tags. It uses these tags to understand what kind of an element it is and displays only the content accordingly.

Some elements, called "void elements," don't need a closing tag. Examples include <img> for images and <br> for line breaks.

Then, there are attributes. Attributes are additional information that you can attach to an element. For example, the href attribute tells the browser where to redirect when you click on an <a> element:

<a href="<https://www.showwcase.com/>">Join Showwcase now</a>

The DOM Tree

The browser reads your HTML file and creates a tree-like structure called the Document Object Model (DOM). The DOM represents the structure of your web page and allows browsers, scripts, and other tools to interact with the content.

Each element in your HTML document becomes a node in the DOM tree. The <html> element is the root node, and the <head> and <body> elements are its children. And then the <p> or <h1> elements become their children and so on.

Conclusion

You've just learned the basics of HTML structure and syntax. In the upcoming articles, we'll dive deeper into specific HTML elements and how to use them. It only gets more exciting from here.