HTML (HyperText Markup Language) is the foundation of the internet. It is the standard language used to structure web pages, telling your browser where to put text, images, and links. Over 95% of all websites use HTML, making it the most essential skill for any aspiring web developer.
Every webpage follows a specific "skeleton." Think of these tags as the containers that hold your content.
| Tag | Description |
|---|---|
<html> |
The "Root" element. Everything on the page lives inside this tag. |
<head> |
The "Brain." Contains info not seen by users, like the page title and settings. |
<title> |
Sets the name that appears on the browser tab. |
<body> |
The "Content." Everything visible (text, images, videos) goes here. |
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Page</title>
</head>
<body>
<p>Welcome to the world of web development!</p>
</body>
</html>
<h1> to <h6>)Headings create a hierarchy. Use <h1> for your main title and <h2> through <h6> for sub-sections.
<h1>: Most important (Largest)<h6>: Least important (Smallest)<p>: Defines a block of text. Browsers automatically add space before and after a paragraph.<br>: Inserts a single line break. It is an empty tag, meaning it doesn't need a closing tag.<hr>)Use the <hr> tag to create a thin horizontal line across the page. This is perfect for separating different topics or sections.
<img>)To show an image, you use the src (source) attribute to tell the browser where the file is located.
<img src="image-name.jpg" alt="Image description">
Comments are notes for yourself or other developers. Browsers ignore them, so they won't show up on the website.
<!-- Write your comment here -->
You can learn a lot by looking at how professional websites are built!
Ctrl + U (Windows) or Cmd + Option + U (Mac) to see the entire HTML file.Most HTML tags can be enhanced with Attributes. Attributes provide extra information about elements and are always specified in the starting tag. They usually come in name/value pairs like name="value".
class and id: Used to identify elements so you can style them with CSS or manipulate them with JavaScript. (e.g., <p class="warning">)href: Used in <a> (anchor) tags to specify the URL the link goes to. (e.g., <a href="https://google.com">Google</a>)alt: Used in <img> tags to provide alternative text for screen readers (crucial for accessibility) or if the image fails to load.</div> or </p> can break your entire layout.class="btn" instead of class=btn. While browsers are forgiving, missing quotes can lead to unpredictable bugs later on.
In the early days of the web, developers built entire layouts using hundreds of <div> tags. Today, modern web development relies on Semantic HTML.
Semantic tags clearly describe their meaning to both the browser and the developer. This is incredibly important for Search Engine Optimization (SEO) and Accessibility (helping screen readers understand your page for visually impaired users).
<header>: Represents introductory content or a set of navigational links.<nav>: Defines a section containing navigation links (your main menu).<main>: Specifies the main, dominant content of the document.<article>: Represents a self-contained composition that could theoretically be distributed independently (like a blog post or news story).<footer>: Defines the footer for a document or section, usually containing author info, copyright, or contact links.By using these tags instead of generic <div> elements, you instantly make your code cleaner, more professional, and easier for Google Search bots to read—which is a huge plus when trying to rank in search results!
<!DOCTYPE html>?<p> followed by </p>)?<h1> for my main page title?<body> tag?Which HTML element acts as the container for all visible content on a webpage?
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to the world of web development!</p>
</body>
</html>
ev: introduction
xt: elements
mmary: "**HTML (HyperText Markup Language)** is the foundation of the internet. It is the standard language used to structure web pages, telling your browser where to put text, images, and links. Over **95% of all websites** use HTML, making it the most essential skill for any aspiring web developer."