How to create html file

HtmlHow-ToBeginner · 3 min read

How to Create an HTML File: Simple Steps for Beginners

To create an HTML file, open a text editor and save a file with the .html extension. Write your HTML code inside this file using basic tags like <!DOCTYPE html>, <html>, <head>, and <body>. Then open the file in a web browser to see the result.

📐

Syntax

An HTML file starts with <!DOCTYPE html> to tell the browser it is an HTML5 document. The <html> tag wraps all content. Inside it, the <head> contains meta information like title, and the <body> contains the visible page content.

<!DOCTYPE html>: Declares HTML version
<html>: Root element
<head>: Metadata and title
<title>: Page title shown in browser tab
<body>: Content shown on the page

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Page content goes here -->
</body>
</html>

💻

Example

This example shows a simple HTML file with a heading and a paragraph. Save it as index.html and open it in a browser to see the text displayed.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML File</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first HTML file.</p>
</body>
</html>

Output

Welcome to My Website This is my first HTML file.

⚠️

Common Pitfalls

Beginners often forget to save the file with the .html extension, so the browser does not recognize it as a webpage. Another common mistake is missing the <!DOCTYPE html> declaration, which can cause inconsistent display in browsers. Also, forgetting to close tags like <html> or <body> can break the page layout.

html

<!-- Wrong: Missing DOCTYPE and extension -->
<html>
<head>
  <title>Test</title>
</head>
<body>
  <h1>Oops!</h1>
</body>
</html>

<!-- Right: Proper DOCTYPE and file saved as .html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
</head>
<body>
  <h1>Fixed!</h1>
</body>
</html>

📊

Quick Reference

Remember these tips when creating an HTML file:

Always start with <!DOCTYPE html>.
Save the file with a .html extension.
Use semantic tags like <h1> for headings and <p> for paragraphs.
Open the file in any modern browser to view your page.

✅

Key Takeaways

Save your file with a .html extension to create a valid HTML file.

Start your HTML file with the declaration for proper browser rendering.

Use , , and tags to structure your HTML document.

Open the saved HTML file in a web browser to see your webpage.

Avoid missing closing tags and always include meta tags for best practice.