HTML Basics

All HTML documents share a common basic structure. Understanding this structure is the first step in learning HTML. Let's look at a simple HTML document example.

A Basic HTML Document

html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

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

</body>
</html>

Now, let's break down this structure line by line:

1. The `<!DOCTYPE html>` Declaration

Purpose: <!DOCTYPE html> is a Document Type Declaration that tells the browser this page is written using the HTML5 standard.
Position: It must be the first line of the HTML document, before the <html> tag.
Note: This is not an HTML tag, but a directive. It is case-insensitive, but the uppercase form <!DOCTYPE html> is generally recommended.

2. The `<html>` Element

Purpose: The <html> element is the root element of the entire HTML page. All other elements must be nested between the <html> and </html> tags.
lang Attribute: It's common to add a lang attribute to the <html> tag to declare the primary language of the page, e.g., <html lang="en"> for English, <html lang="zh-CN"> for Simplified Chinese. This helps with SEO and assistive technologies like screen readers.

3. The `<head>` Element

Purpose: The <head> element contains the page's metadata. This information is not directly displayed in the browser's main window but defines various properties and information about the document.
Contents: The <head> element typically includes:
- <title>: Defines the title displayed in the browser tab or window title bar. This is the only required element within <head>.
- <meta>: Provides metadata about the HTML document, such as character set declaration (<meta charset="UTF-8">), page description, keywords, etc.
- <link>: Used to link external resources, most commonly external CSS stylesheets.
- <style>: Used to define internal CSS styles.
- <script>: Used to link or write JavaScript code.

4. The `<body>` Element

Purpose: The <body> element defines the main content of the HTML document. All content you want users to see in the browser should be placed between the <body> and </body> tags.
Contents: This includes text, headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), lists, tables, etc., forming the visible part of the web page.

Nesting Tags

HTML builds structure through nesting tags. An element can contain other elements, like Russian nesting dolls. Proper nesting is crucial.

html

<!-- Correct nesting -->
<p>This is an <strong>important</strong> paragraph.</p>

<!-- Incorrect nesting -->
<p>This is an <strong>important</p></strong> paragraph.

On top of this basic structure, we build rich web content by adding more HTML elements to the <body>.

HTML Basics ​

A Basic HTML Document ​

1. The <!DOCTYPE html> Declaration ​

2. The <html> Element ​

3. The <head> Element ​

4. The <body> Element ​