Creating an HTML Page

  • Last updated Apr 25, 2024

In this tutorial, we will walk through the essential steps to create an HTML page that not only meets coding standards but also boosts your content's visibility on search engines.

Follow these steps to create an HTML page:

Open a Text Editor

Begin by opening a simple text editor like Notepad (Windows) or TextEdit (Mac). You can also use more advanced code editors like Visual Studio Code or Sublime Text.

Add HTML Code

Every HTML page starts with a basic structure. Type the following code to set up your document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
    <h1>Your Main Heading</h1>
    <p>Your introductory paragraph.</p>
    <h2>Subheading 1</h2>
    <p>Your content for subheading 1.</p>
    <img src="path/to/your/image.jpg" alt="Description of your image">
    <a href="https://yourlink.com">Visit our website</a>
</body>
</html>

Here's a break down of the above code:

  • <!DOCTYPE html>: This declaration tells the browser that it is an HTML5 document. 
  • <html lang="en">: This is the root element. The lang="en" attribute specifies the language for this document, which is English in this case.
  • <head></head>: This contains metadata such as the character set, viewport settings, page title, and other information about the document.
  • <meta charset="UTF-8">: This is declared within the <head></head> tag and specifies the character encoding for the document. UTF-8 is a widely used character encoding that supports various characters from different languages.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This is declared within the <head></head> tag and it configures the viewport for responsive design. It ensures that the width is equal to the device width and sets the initial zoom level to 1.0.
  • <title>Your Page Title</title>: This is declared within the <head></head> tag and it sets the title for the HTML document, which appears in the browser's title bar or tab.
  • <body></body>: This is the main tag where the actual content of the HTML document is declared.
  • <h1>Your Main Heading</h1>: This defines the main heading of the document.
  • <p>Your introductory paragraph.</p>: This is a paragraph element that represents a paragraph of text.
  • <h2>Subheading 1</h2>: This element defines a subheading.
  • <p>Your content for subheading 1.</p>: This represents another paragraph of text.
  • <img src="path/to/your/image.jpg" alt="Description of your image">: This element is used to embed an image with a specified source (replace "path/to/your/image.jpg" with the actual path). The alt attribute provides alternative text for accessibility and SEO purposes. The <img> tag does not have a closing tag.
  • <a href="https://your-link.com">Visit our website</a>: This tag creates a hyperlink and when it is clicked, it navigates to the specified URL. Replace "https://your-link.com" with the actual URL.
  • </html>: This is an HTML closing tag that closes the HTML document.
Save the File

Save the file with a .html extension (For example, index.html). An HTML file typically has either a .html or .htm extension:

Here's an example of saving the file on Windows:

Test the File

Open the file in a browser to view the webpage for your HTML document.