Loading…
Welcome back! In the previous lesson, we established the foundations of HTML structure. Now, we are going to refine that knowledge. A Senior Developer doesn't just write tags; they write code that is search-engine friendly, architecturally sound, and easy to navigate.
In this section, we tackle the invisible but crucial parts of a webpage (Meta Tags), solve the most common confusion in semantic HTML (Section vs. Article), and look at how to handle graphics and file linking. These concepts are vital for SEO, accessibility, and building robust applications.
Meta tags provide "metadata" about the HTML document. Metadata is data about data. These tags live inside the <head> element and are not displayed on the page itself, but they are readable by browsers, search engines (Google), and screen readers.
Analogy: The Shipping Label
If your website is a package delivered to a user, the content (body) is the item inside. The meta tags are the shipping label on the outside. They tell the courier (browser/Google) what language it is in, who sent it, and a summary of what's inside.
Three critical meta tags you must know for an interview:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn Python and React for free at StackScholar.">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>In HTML, most elements have a start tag and an end tag (like <p>...</p>) because they wrap content. However, some elements are void elements-they cannot hold content or child elements. These are known as self-closing tags.
Common examples include:
<img> (Image)<br> (Line break)<hr> (Horizontal rule/line)<input> (Form input)<meta> (Metadata)Note on Syntax: In HTML5, the trailing slash is optional. Writing <br> is valid. However, in frameworks like React (JSX), you must include the slash: <br />. Most modern developers use the slash out of habit to keep code consistent.
<img src="logo.png" alt="Logo">
<br>
<input type="text">
<img src="logo.png" alt="Logo" />
<br />
<input type="text" />This is the ultimate semantic HTML question. Beginners use <div> for everything. Experts know exactly when to use specific containers to help SEO and screen readers understand the page structure.
| Tag | Purpose | Key Characteristic |
|---|---|---|
| <div> | Generic container. | Has no semantic meaning. Use only for styling/layout wrappers. |
| <main> | The dominant content. | Should be used once per page. Excludes header/footer/sidebar. |
| <section> | Thematic grouping. | Groups related content. Usually has a heading inside. |
| <article> | Independent content. | Self-contained. Makes sense if you syndicated it (RSS) or printed it alone. |
Rule of Thumb:
- Is it a blog post, a comment, or a product card? Use <article>.
- Is it the "About Us" part of the page? Use <section>.
- Do you just need to group elements to make them flex/grid? Use <div>.
Both are used for graphics, but they work in fundamentally different ways.
1. SVG (Scalable Vector Graphics):
- Vector-based: Made of lines, curves, and shapes defined by math (XML).
- Scalable: Never pixelates, no matter how much you zoom in.
- DOM: Each shape is an element in the DOM. You can attach click listeners to a specific circle or path.
- Best for: Logos, icons, simple charts.
2. Canvas:
- Raster-based: A grid of pixels, like a PNG or JPEG.
- Scripted: You draw on it using JavaScript (`ctx.fillRect(...)`).
- Performance: Very fast for rendering many moving objects because it doesn't update the DOM.
- Best for: Games, complex data visualizations, particle effects.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>When you link to an image or another page (href or src), you need to provide a path.
https://www.google.com/logo.png (External link)./images/logo.png (Starts from the root folder of your website). This is very common in web apps.logo.png or ./logo.png: Look in the same folder.../logo.png: Go up one folder, then look.Scenario: You are editing /pages/about.html. You want to show an image located at /images/team.jpg.
<img src="/images/team.jpg">
<img src="../images/team.jpg">
3 questions · no sign-up, nothing stored
Progress is stored in this browser only - no sign-up, nothing sent anywhere.