0

HTML Tutorial: A Complete Guide for Beginners

October 21, 2024
Posted in HTML, Web Development
21 Oct 2024
HTML, Web Development
October 21, 2024 Lazarin Kroni

HTML, which stands for HyperText Markup Language, is the standard language for creating web pages. It is used to structure web content by defining elements such as headings, paragraphs, images, links, and much more. Invented by Tim Berners-Lee in 1991, HTML is now the foundation of any web project. Understanding the basics of HTML is essential for anyone who wants to pursue a career in web development.

Basic Structure of an HTML Document

A typical HTML document starts with the <!DOCTYPE html> declaration, which specifies the HTML version used. The main elements of an HTML document include:

  • <html>: The main container for all the content.
  • <head>: Contains meta-information and links to external files (e.g., CSS).
  • <title>: The page title, which appears in the browser tab.
  • <body>: Holds the visible content of the web page, such as text, images, and links.

Here’s an example of a basic HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a simple example of an HTML page.</p>
</body>
</html>

HTML Tags and Elements

HTML elements are enclosed within opening and closing tags, such as <p> for paragraphs and <h1> for headings. Some tags, like <img>, are self-contained and do not require a closing tag.

Creating Your First Web Page

  1. Create a file with a .html extension using a text editor (like Notepad or VS Code).
  2. Insert the HTML code from the example above.
  3. Open the file in a browser to view your first web page.

HTML Editors

Text editors like Visual Studio Code, Sublime Text, or Notepad++ are great tools for writing HTML code. Advanced editors provide additional features such as code autocompletion and integration with development tools.

Syntax and Conventions

Writing HTML code in a clean and consistent manner improves readability. Some best practices include:

  • Consistent indentation for nested tags.
  • Using lowercase letters for tag and attribute names.
  • HTML comments (<!-- Comment -->) to explain parts of the code.

HTML vs. XHTML

XHTML is a stricter version of HTML, with more rigid syntax rules. While HTML allows for greater flexibility, XHTML requires proper closing of all tags and lowercase tag names.

Conclusion and Additional Resources

For further learning, here are some helpful resources:

Lazarin Kroni