HTML5: HyperText Markup Language
HTML5 is the layout standard used to tell web browsers exactly how content should be structured on a screen.
Core Structuring Tags
Every HTML element uses "tags" enclosed in angle brackets (<tag>content</tag>). Here is what they mean:
<body>: The core wrapper holding every visible element of your website.<h1>through<h6>: Structural headings.<h1>is the largest/most important heading on the page, working its way down sequentially to<h6>.<div>: Short for "division". These act as invisible boxes or containers to group other elements together and break your web layouts into clean, styleable sections.<section>: Used to logically group thematic content together across your page.<p>: Standard paragraph tags for clean, readable blocks of body text.
Text Formatting Variations
To change how text emphasis feels directly inside your paragraph copy, you can wrap words in these formatting tags:
* <i>: Standard Italic styling.
* <em>: Emphasized text, which structurally indicates stress but displays visually as italics.
* <strong>: Flags highly important text, rendering it bolder to the eye.
* <b>: Simple visual Bold presentation without adding extra structural importance.
Hyperlinks & Global Navigation
To attach internal or external links, we use the Anchor (<a>) tag. In VS Code, you can quickly generate this by typing a and hitting Tab.
External vs. Internal Linking
-
External Links: Links that take users to an outside domain entirely.
html <a href="[https://amazon.com](https://amazon.com)">Go shopping</a> -
Internal Links: Connects to other pages matching files sitting right inside your local project folder:
<a href="about.html">About</a>
The Navigation Bar Master Template
By utilizing the
Important Pro-Tip: Paste this identical block across every single internal page (index.html, about.html, contact.html) so users can move effortlessly around your site:
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Working with Images
Images can be added to your site using two distinct methods via the tag:
- Local Saved Images: Download an image, save it directly inside your project folder with a short name, and reference it locally:
<img src="Clouds1.jpg" alt="clouds">
- Web URL Images: Paste a live image url address inside the source quotes:
```HTMLhttps://example.com/image.jpg" alt="Description">
* *Golden Rules for Images:*The alt Attribute: Always write descriptive text here. It is critical for SEO (Search Engine Optimization) and screen readers for visually impaired users.
* *Sizing:* You can explicitly set custom visual constraints using pixel widths and heights (width="200px").
* *Clickable Image Links:* To turn an image into a clickable button link, simply wrap the entire <img> element inside an anchor tag:
```HTML
<a href="[https://bing.com](https://bing.com)">
<img src="Clouds1.jpg" alt="clouds">
</a>