Week 2: Formatting Text and Creating Links

Learn how to style text semantically and connect pages together.

Explore Chapter 2

Chapter 2: Styling Text and Building Connections

Text Formatting Elements

HTML provides various tags to format text, giving it semantic meaning or visual style. While CSS is preferred for purely visual styling, these HTML tags add meaning to the content.

 and : Both typically render text as bold. Use to indicate strong importance, seriousness, or urgency. Use for stylistically offset text without added importance (like keywords).
```
This text is normal.
This text is important!
Use the Save button to save your changes.
```
 and : Both typically render text as italicized. Use to indicate emphasis. Use for text in an alternate voice or mood, technical terms, thoughts, etc.
```
You must complete the assignment.
The term hypertext is key here.
```
: Represents text with an unarticulated, non-textual annotation (like marking a misspelling). Avoid using it purely for underlining; use CSS instead.
<s>: Renders text with a strikethrough, indicating content that is no longer relevant or accurate.
: Defines subscript text (appears slightly below the normal line).
: Defines superscript text (appears slightly above the normal line).

<p>Water is H<sub>2</sub>O.</p>
<p>E = mc<sup>2</sup>.</p>
<p><s>Old Price: $50</s> New Price: $40</p>

Phrase Tags for Semantic Meaning

Phrase tags provide specific semantic context for the enclosed text, which can be useful for browsers, screen readers, and search engines.

<code>: Indicates a fragment of computer code.

<p>Use the <code>console.log()</code> function.</p>

<var>: Represents a variable in a mathematical expression or programming context.
```
The equation is <var>x</var> + <var>y</var> = 10.
```

<kbd>: Indicates user keyboard input.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<samp>: Represents sample or quoted output from a computer program.
```
The program outputted: <samp>File not found.</samp>
```
: Represents text marked or highlighted for reference or notation purposes.
```
The important part is this section.
```
: Represents side comments or small print (like copyright).
<time>: Represents a specific period in time (can include `datetime` attribute for machine-readable format).
<abbr>: Represents an abbreviation or acronym (use `title` attribute for expansion).

<p>Learn <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Using these tags appropriately improves the semantics and accessibility of your web pages.

Creating Hyperlinks (<a>)

The anchor tag <a> is used to create hyperlinks, allowing users to navigate between pages or resources.

Basic Link Structure

<a href="url">Link Text</a>

href Attribute: Specifies the destination URL (Uniform Resource Locator) of the link. This is the most important attribute.
Link Text: The visible part of the link that users click on.

Linking to External Pages

<a href="https://www.google.com">Visit Google</a>

Linking to Internal Pages (within your site)

Use relative paths (explained in the next section).

<a href="about.html">About Us</a>
<a href="contact.html">Contact Page</a>

Linking to Sections on the Same Page

Use the # symbol followed by the id attribute of the target element.

<!-- Link -->
<a href="#section2">Go to Section 2</a>

<!-- Target Element -->
<h2 id="section2">Section 2</h2>

Linking to Email Addresses

Use `mailto:` within the `href` attribute.

<a href="mailto:info@example.com">Email Us</a>

The `target` Attribute

Specifies where to open the linked document.

_self: (Default) Opens in the same window/tab.
_blank: Opens in a new window or tab.
_parent: Opens in the parent frame.
_top: Opens in the full body of the window.

<!-- Opens Google in a new tab -->
<a href="https://www.google.com" target="_blank">Google (New Tab)</a>

Absolute vs. Relative Paths

When linking to resources (other HTML pages, images, CSS files), you need to specify the path correctly.

Absolute Paths

An absolute path specifies the full URL, including the protocol (http/https) and domain name. It points to a specific location on the web, regardless of the current page's location.

<!-- Absolute path to an external website -->
<a href="https://developer.mozilla.org/">MDN Web Docs</a>

<!-- Absolute path to an image on another server -->
<img src="https://placehold.co/100x50/EEE/333?text=Abs+Image" alt="Absolute Path Image">

Relative Paths

A relative path specifies the location of a file relative to the current page's location. They are used for linking files within the same website.

Assume the following folder structure:


my-website/
├── index.html
├── about.html
├── contact.html
└── images/
    └── logo.png
└── css/
    └── style.css

Linking to a file in the same directory: (From `index.html` to `about.html`)
```
<a href="about.html">About</a>
```
Linking to a file in a subdirectory: (From `index.html` to `logo.png`)
```
<img src="images/logo.png" alt="Logo">
```

Linking to a file in a parent directory: (Imagine being inside the `images` folder and linking back to `index.html`)

<!-- If current page was images/somepage.html -->
<a href="../index.html">Back to Home</a> <!-- ../ goes up one directory -->

Using relative paths is generally preferred for internal links within a website, as it makes the site more portable (you can move the entire folder without breaking links).