Chapter 1.3.5 - Advanced HTML Formatting

Advanced HTML Formatting

In Chapter 1.2.4, you learned about the HTML document and its tag-based syntax. In this chapter, you will explore more advanced HTML tags that will help you format your code for ease of readability and illustration.

Tags

There are a few key tags that are incredibly useful to know, let's walk you through them.

Links

A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.

We can specify a link in HTML by using the <a> tag. This could be a word, group of words, or even an image.

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

In the example above, we generated this Link text.

The href attrilbute specifes the target of the link and its value can be an absolute or relative URL.

Set Targets for Links

You can add a target attribut to your <a> tags to specify to the browser how it should open a linked document.

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

The above example generates this link: Google.

Create Bookmark Anchors

You can create bookmark anchors to allow users to jump to specific sections of a web page. These are useful for very long web pages.

This is a two step process:

1. Add the id attribute on the element where you want to jump.
2. Use the id attribute value preceded by the has sign (#) as the value of the href attribute of the <a> tag.

<a href="#sectionX">Jump to Section X</a>
<h2 id="sectionX">Section X</h2>

The above example creates this link: Jump to Section X

...which jumps to here:

Section X

Text Formatting

HTML provides you with several tags that can be used to make text on your web site appear different from normal text.

<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>

In the above example, you can see the most commonly used formatting tags. This is how they would appear:

This is bold text.

This is strongly important text.

This is italic text.

This is emphasized text.

This is highlighted text.

This is computer code.

This is smaller text.

This is _subscript and ^superscript text.

This is deleted text.

This is inserted text.

Quotations

To format quotation blocks from other sources, you should use the blockquote tag.

<blockquote>
    <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
    <cite>— Albert Einstein</cite>
</blockquote>

The above example showcases the blockquote tag in action. The cite tag is used to describe a reference to a creative work. This is how it appears:

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

— Albert Einstein

For short inline quoatations, you use the HTML <q> tag.

<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>

According to the World Health Organization (WHO): Health is a state of complete physical, mental, and social well-being.

To display an address, use the <address> tag.

<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>

The above example would appear as follows:

Mozilla Foundation
331 E. Evelyn Avenue
Mountain View, CA 94041, USA

Images

You can add images to your site by using the <img> tag. This tag contains attributes only.

<img src="https://api.time.com/wp-content/uploads/2019/12/ducks-walk-on-glass-roof-video.jpg" alt="duckss">

The above image displays ducks:

The src attribute tells the browser where to find the image. The alt tag provides an alternative text for the image.

You can set the width of an image using the width and height attributes.

<img src="https://api.time.com/wp-content/uploads/2019/12/ducks-walk-on-glass-roof-video.jpg" alt="ducks" width="200px" height="100px">

The above code produces the following image:

Below is a list of all of the currently available and useful HTML5 tags. You may try them out by navigating to this website, copy/pasting the html snippet at the bottom of this page, and running the project. You may also modify your index.html file in your project repossitory.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A quote</title>
    </head>

   <body>
        <h1>This is a header element.</h1>

        <blockquote>
            <p>This is a paragraph element. It is inside a blockquote element.</p>
        </blockquote>

        
    </body>
</html>