HTML Basic – Fundamentals
HTML (HyperText Markup Language) is the markup language that forms the foundation of websites. In this material, you’ll learn about the fundamental concepts of HTML, its structure, and the most important elements that enable you to start building your own websites. This page will cover the structure of HTML documents, basic elements, and a few simple code snippets to lay the groundwork for more detailed learning.
HTML Basics
HTML documents are plain text files saved with a .html or .htm extension. Every HTML page begins with a declaration that tells the browser we are using HTML5.
For example, a very basic HTML page looks like this:
The Most Important Parts
Let’s review the key elements that make up an HTML document:
- <!DOCTYPE html>: The first line of every HTML page that indicates we are using HTML5.
- <html>: The root element of the document that contains the entire page.
- <head>: The section where we provide background information—such as character encoding, page title, and links to external style sheets.
- <title>: The title of the page, which appears on the browser’s tab.
- <body>: The section containing the actual content: texts, images, links, lists, and other elements.
Headings, Paragraphs, and Links
Headings on the page are usually defined using the <h1>–<h6> tags, which help establish a hierarchy. The <p> tags define paragraphs, and the <a> tag represents hyperlinks.
For example, the main title:
And a paragraph:
A simple hyperlink:
Images and Lists
Images are inserted using the <img> tag. You specify its source with the src attribute, while the alt attribute contains the image description. Lists allow us to display data in either an ordered or unordered manner.
Here is an example of an unordered list:
Code Details
<!-- Unordered list --> <ul> <li>First element</li> <li>Second element</li> <li>Third element</li> </ul>
Preview
- First element
- Second element
- Third element
And an ordered list:
Code Details
<!-- Ordered list --> <ol> <li>Step one</li> <li>Step two</li> <li>Step three</li> </ol>
Preview
- Step one
- Step two
- Step three
Horizontal Line and Line Break
The <hr> tag creates a horizontal divider often used to separate sections of content, while the <br> tag inserts a line break.
Self-closing Elements and Comments
Certain HTML elements do not require a separate closing tag – these are known as self-closing elements, such as <img>, <br>, or <hr>. Additionally, you can include comments in your code, which are invisible to the browser.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
