Introduction to HTML

Learn about the basics of HTML, its history, and its role in web development. Understand the structure of an HTML document.

⬅ Previous Next ➡

HTML Fundamentals: Document Structure

The DOCTYPE Declaration

The <!DOCTYPE html> declaration is the very first thing in your HTML document. It tells the browser which version of HTML the page is written in. For HTML5, we use the simple <!DOCTYPE html>. It's crucial for proper rendering of your webpage. It should always be the first line of your HTML.

<!DOCTYPE html>

The <html> Element

The <html> element is the root element of an HTML page. It encapsulates all other HTML elements. It's important to include the lang attribute to declare the language of the page (e.g., lang="en" for English). This helps browsers and search engines interpret the content correctly.

<html lang="en">
  <!-- Content of the HTML document goes here -->
</html>

The <head> Element

The <head> element contains meta-information about the HTML document, such as the character set, viewport settings, page title, links to CSS stylesheets, and more. This information is not displayed directly on the page but is crucial for the browser and search engines.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css"> <!-- Optional: Link to a CSS file -->
</head>

<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 is the most common).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design. This is important for mobile devices.
<title>Page Title</title>: Sets the title of the page, which appears in the browser tab or window title bar.
<link rel="stylesheet" href="style.css">: Links an external CSS stylesheet to the HTML document. This allows you to separate the presentation (styling) from the content (HTML).

The <body> Element

The <body> element contains the visible page content. This includes headings, paragraphs, images, links, lists, forms, and all other elements that users will see and interact with. It's where you structure your content using various HTML tags.

<body>
  <h1>Welcome to my webpage!</h1>
  <p>This is some content.</p>
</body>

⬅ Previous Next ➡