REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

Hello World!

AI & DATA SCIENCE // helloworld

The minimal HTML document a browser needs to render a page: a doctype, an <html> root, and visible text in the <body>.

Syntax

<!DOCTYPE html>
<html>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Deep Dive Course

Every HTML document starts the same way: **`<!DOCTYPE html>`** tells the browser to render in standards mode (not quirks mode, a legacy compatibility mode from the 1990s). The **`<html>`** element is the root of the whole document. Inside it, **`<head>`** holds metadata (title, links, scripts) that isn't shown directly, and **`<body>`** holds everything the user actually sees.

1Understanding Hello World!

Every HTML document starts the same way: `<!DOCTYPE html>` tells the browser to render in standards mode (not quirks mode, a legacy compatibility mode from the 1990s). The `<html>` element is the root of the whole document. Inside it, `<head>` holds metadata (title, links, scripts) that isn't shown directly, and `<body>` holds everything the user actually sees.

💡

You almost never need to write <!DOCTYPE html> by hand today — every code editor and framework scaffolds it for you — but knowing what it does explains why old sites sometimes render in a broken 'quirks mode' layout.

editor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

localhost:3000

2Practical Example

Here is a real-world application of Hello World! showing how it is used in production HTML.

editor.html

<!-- Without a doctype, old browsers can fall back to 'quirks mode' -->
<!-- Always declare it explicitly: -->
<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
</html>

localhost:3000

3Best Practices

Follow these guidelines when working with Hello World!:

1. Always start a document with <!DOCTYPE html>

2. Set the language with <html lang="en"> for accessibility and SEO

3. Keep the <body> focused on content — metadata belongs in <head>

⚠️

Tip: You almost never need to write <!DOCTYPE html> by hand today — every code editor and framework scaffolds it for you — but knowing what it does explains why old sites sometimes render in a broken 'quirks mode' layout.

editor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

localhost:3000

Examples

Example 01Basic Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Example 02Advanced Example

<!-- Without a doctype, old browsers can fall back to 'quirks mode' -->
<!-- Always declare it explicitly: -->
<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
</html>

Best Practices

Always start a document with
Set the language with for accessibility and SEO
Keep the focused on content — metadata belongs in

Interview Question

What does <!DOCTYPE html> actually do?▼

Hint: It's not an HTML tag — it's a directive to the browser's parser.

<!DOCTYPE html> is a declaration (not an element) that tells the browser to parse and render the page in 'standards mode', following the modern HTML5 spec. Omitting it, or using an old DOCTYPE, can trigger 'quirks mode', where browsers emulate old, inconsistent rendering behavior (e.g. different box-model math) for backward compatibility with pre-2000 websites.

Exercises

EasyPractice using Hello World! in a real scenario.

View Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Frequently Asked Questions

What does <!DOCTYPE html> actually do?▼

is a declaration (not an element) that tells the browser to parse and render the page in 'standards mode', following the modern HTML5 spec. Omitting it, or using an old DOCTYPE, can trigger 'quirks mode', where browsers emulate old, inconsistent rendering behavior (e.g. different box-model math) for backward compatibility with pre-2000 websites.

Related Functions

html-taghead-tagbody-tagCommentsHTML