HTML Basic Tags
beginnerPart of Getting Started with HTML
Theory
HTML provides a core set of tags that form the building blocks of every web page. Mastering these basic tags is essential before moving on to more complex structures.
The DOCTYPE Declaration
<!DOCTYPE html> is the very first line of any HTML5 document. It tells the browser to render the page in standards mode rather than quirks mode, ensuring consistent behavior across browsers. This declaration is not an HTML tag — it is an instruction to the web browser.
The <html> Element
The <html> element wraps all content on the page. The lang attribute should specify the page's language for accessibility and search engines:
<html lang="en">The <head> and <body> Elements
<head>contains metadata — the page title, character encoding, linked stylesheets, and scripts. Content in<head>is not displayed on the page.<body>contains all visible content — headings, paragraphs, images, links, and everything the user sees.
Headings: <h1> to <h6>
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):
<h1>— used once per page for the main title<h2>— major section headings<h3>— subsection headings<h4>through<h6>— deeper nesting levels
Search engines use headings to understand page structure. Always maintain a logical hierarchy — never skip levels (e.g., going from <h1> to <h3>).
Paragraphs: <p>
The <p> element defines a paragraph. Browsers automatically add space before and after paragraphs. Paragraphs are block-level elements, meaning they start on a new line.
Line Breaks: <br> and Horizontal Rules: <hr>
<br>inserts a single line break within text. It is a void element (no closing tag).<hr>creates a thematic break or horizontal rule, often used to separate sections.
Links: <a>
The anchor tag <a> creates hyperlinks. The href attribute specifies the URL:
<a href="https://example.com">Visit Example</a>Key attributes:
href— the link destinationtarget="_blank"— opens in a new tabrel="noopener noreferrer"— security best practice when usingtarget="_blank"
Images: <img>
The <img> element embeds images. It is a void element with required attributes:
<img src="path/to/image.jpg" alt="Description of image">src— the image file path or URLalt— alternative text for accessibility and when the image fails to loadwidthandheight— dimensions (avoid layout shifts)
The <pre> Element
The <pre> element displays preformatted text, preserving both spaces and line breaks. It is commonly used for code blocks:
<pre>
function hello() {
console.log("Hello!");
}
</pre>HTML Comments
Comments are not displayed in the browser. Use them to document your code:
<!-- This is a comment. It is only visible in the source code. -->Comments can span multiple lines and are invaluable for debugging and collaboration.
Practical Examples
Exercises
Create a Page with Headings and Links
Create an HTML page titled 'My Favorite Things'. Use an h1 for the main title, h2 for three categories (e.g., Foods, Books, Movies), and paragraphs under each category. Add at least two links to external websites.
Expected Output:
A well-structured page with a main heading, three subsections, descriptive paragraphs, and clickable links to external sites.Build an Image Gallery with Descriptions
Create a page that displays three images. Each image must have a caption below it (use regular paragraphs), an alt attribute, and a link to the source of the image. Separate the images with horizontal rules.
Expected Output:
A gallery page with three images, each followed by a caption and a source link, separated by horizontal rules.Mini Quiz
Mini Quiz
Mini Project
Mini Project: Personal Profile Page
Create a personal profile page that introduces you. Use all the basic tags you have learned: headings, paragraphs, links, images, line breaks, horizontal rules, and comments.
Requirements:
Bonus Challenge
Add a 'Contact Me' section with a simulated email link using mailto: in the href attribute.