HTML Fundamentals

Understand what HTML is, how documents are structured, and how browsers interpret HTML.

What Is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of content on the web. HTML is not a programming language because it does not provide general-purpose control flow or algorithms. Instead, it uses elements and attributes to describe content. A browser parses HTML and builds a document tree called the DOM (Document Object Model).

HTML Provides Structure

HTML defines what content is and how it is structured. CSS controls presentation, while JavaScript controls behavior.

A Minimal HTML Document

<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <title>Hello HTML</title>\n  </head>\n  <body>\n    <h1>Hello World</h1>\n    <p>My first HTML page.</p>\n  </body>\n</html>

💡 The document type declaration enables standards mode. The html element contains the document, head contains metadata, and body contains visible content.

Key Takeaways

HTML describes document structure and semantics.
Browsers convert HTML into a DOM tree.

Knowledge Check

What does HTML primarily provide?

Elements, Tags, and Attributes

An HTML element usually consists of an opening tag, content, and a closing tag. Attributes provide additional information about an element. For example, <a href="/about">About</a> contains an anchor element with an href attribute. Some elements are void elements, meaning they do not have closing tags, such as <img>, <br>, <hr>, <input>, and <meta>.

Elements and Attributes

<a href="https://example.com" target="_blank">Visit Example</a>\n<img src="profile.jpg" alt="Profile photo">

💡 The anchor uses href and target attributes. The image uses src to identify its resource and alt to provide alternative text.

Key Takeaways

Tags are syntax used to create HTML elements.
Attributes configure or provide metadata for elements.

Knowledge Check

Which is a void HTML element?

HTML Document Structure

A well-formed HTML document generally contains <!doctype html>, an <html> root element, a <head> containing metadata, and a <body> containing document content. The lang attribute on <html> should identify the primary language of the document.

Document Skeleton

<!doctype html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>My Page</title>\n</head>\n<body>\n  <h1>Welcome</h1>\n</body>\n</html>

💡 This structure gives browsers the required document context and includes important metadata for encoding, responsive rendering, and the page title.

Key Takeaways

The html element is the document root.
The head contains metadata while body contains page content.

Knowledge Check

Where should visible page content normally be placed?

DOCTYPE and Standards Mode

The <!doctype html> declaration tells the browser to use modern standards mode. It is not an HTML element. Omitting the declaration can cause browsers to enter quirks mode, where historical rendering behavior may affect layout and CSS.

Always Include DOCTYPE

Start modern HTML documents with <!doctype html> to avoid accidental quirks-mode rendering.

Key Takeaways

DOCTYPE is a declaration, not an HTML element.
Modern documents should use <!doctype html>.

Knowledge Check

What is the purpose of <!doctype html>?

What Is HTML?

Elements, Tags, and Attributes

HTML Document Structure

DOCTYPE and Standards Mode

STAY UPDATED WITH BYTES!