StepByStack Docs

Appearance

Getting Started ​

Now that you know what HTML is, let's dive into how to actually create and view an HTML document. This section covers the basic structure of every HTML page and the simple tools you need to begin.

Basic Structure of an HTML Page ​

Every HTML document follows a fundamental structure. Think of it as the mandatory boilerplate required for the browser to understand your page correctly. Here's a minimal example:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>
</html>

Let's break down these essential components:

  1. <!DOCTYPE html>: This is the Document Type Declaration (often called Doctype). It's not technically an HTML tag, but an instruction to the web browser about what version of HTML the page is written in. <!DOCTYPE html> specifically tells the browser that the page uses the modern HTML5 standard. It should always be the very first line in your HTML file.
  2. <html> Element: This is the root element of the HTML page. All other elements (except <!DOCTYPE>) must be descendants of this element. It essentially wraps the entire document content. The lang attribute (e.g., <html lang="en">) is often included to declare the primary language of the page content, which is good for accessibility and search engines.
  3. <head> Element: This element acts as a container for metadata (data about the HTML document) and links to external resources. Content inside the <head> is not displayed directly on the web page itself (except for the <title>). Common items found in the <head> include:
  • <meta charset="UTF-8">: Specifies the character encoding for the document, typically UTF-8, which supports a vast range of characters from different languages. This should usually be the first element inside the <head>.
  • <title>: Defines the title that appears in the browser's title bar or tab. This is a required element in HTML.
  • <link>: Used to link external resources, most commonly CSS stylesheets.
  • <style>: Used to embed CSS styles directly within the HTML (less common for larger projects).
  • <script>: Used to link external JavaScript files or embed JavaScript code.
  • <meta>: Used for other metadata like viewport settings, page description, keywords, author, etc. (We'll cover important <meta> tags later).
  1. <body> Element: This element contains all the visible content of the web page – the text, headings, paragraphs, images, links, tables, lists, etc., that the user actually sees in their browser window. Everything you want to display on the page goes inside the <body> tags.

HTML Elements, Tags, and Attributes (Syntax Overview) ​

HTML documents are built using elements. Elements usually consist of:

  • Opening Tag: Marks the beginning of an element (e.g., <p>).
  • Content: The actual text or other elements nested inside (e.g., My first paragraph.).
  • Closing Tag: Marks the end of an element (e.g., </p>). Note the forward slash (/) before the tag name.
html
<tagname>Content goes here...</tagname>

For example, <p>This is a paragraph.</p> represents a paragraph element.

Some elements are empty or void elements, meaning they don't have content or a closing tag. They are typically used to insert something into the document, like an image or a line break. Examples include <br> (line break), <hr> (horizontal rule), and <img> (image). They might look like <tagname> or <tagname /> (the slash is optional in HTML5 but common).

Elements can also have attributes, which provide additional information about the element or modify its behavior. Attributes are always specified in the opening tag and usually come in name/value pairs like name="value":

html
<a href="https://www.stepbystack.com">Visit StepByStack</a>

In this example:

  • <a> is the opening tag for an anchor (link) element.
  • href is the attribute name.
  • "https://www.stepbystack.com" is the attribute value (the URL to link to).
  • Visit StepByStack is the content of the link (the clickable text).
  • </a> is the closing tag.

We will explore specific elements, tags, and their attributes in detail throughout this documentation.

Setting up Your Development Environment ​

The good news is you don't need fancy or expensive software to write HTML! HTML files are just plain text files. You can get started with:

  • Basic Text Editors: Every operating system comes with one.
    • Windows: Notepad
    • macOS: TextEdit (ensure it's set to "Plain Text" mode)
    • Linux: gedit, nano, etc.
  • Code Editors (Recommended): For a much better experience with features like syntax highlighting (making code easier to read), autocompletion, and file management, consider using a free code editor such as:
    • Visual Studio Code (VS Code)
    • Sublime Text
    • Atom
    • Brackets

For learning purposes, a basic text editor is perfectly fine.

Creating Your First HTML Page ​

Let's create a simple HTML file:

  1. Open your text/code editor.
  2. Type (or copy and paste) the basic HTML structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my very first web page created with HTML.</p>
</body>
</html>
  1. Save the file:
  • Go to File > Save As...
  • Choose a location on your computer.
  • Enter a filename. Crucially, the filename must end with .html (or .htm). For example, name it index.html or hello.html.
  • In the "Save as type" or "Format" dropdown (especially in basic editors like Notepad), make sure to select "All Files" or "Plain Text" to prevent the editor from adding a .txt extension automatically (e.g., saving as index.html.txt).

You've just created your first web page!

Viewing HTML Files in a Browser ​

Web browsers (like Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) are designed to read HTML files and render them as visual web pages.

To view the page you just saved:

  1. Open your computer's file explorer (Windows Explorer, macOS Finder, etc.).
  2. Navigate to the folder where you saved your .html file.
  3. Double-click the file icon.

Alternatively, you can usually right-click on the file and select Open with > [Your Preferred Web Browser].

Your default web browser should open and display the content from within the <body> tags – in our example, you'll see the "Hello, World!" heading and the paragraph below it. The text from the <title> tag ("My First Web Page") will appear in the browser tab.

Copyright © 2025 StepByStack
Buy Me a Coffee - StepBytStack