path: root/files/pt-pt/learn/html/introducao_ao_html/criar_hiperligacoes/index.html

---
title: Criar hiperligações
slug: Learn/HTML/Introducao_ao_HTML/Criar_hiperligacoes
tags:
  - Aprender
  - Guía
  - HTML
  - HTTP
  - Hiperligações
  - Principiante
  - URL
  - título
translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Hyperlinks are really important — they are what makes the Web <em>a web</em>. This article shows the syntax required to make a link, and discusses link best practices.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>To learn how to implement a hyperlink effectively, and link multiple files together.</td>
  </tr>
 </tbody>
</table>

<h2 id="What_is_a_hyperlink">What is a hyperlink?</h2>

<p>Hyperlinks are one of the most exciting innovations the Web has to offer. Well, they've been a feature of the Web since the very beginning, but they are what makes the Web <em>a Web</em> — they allow us to link our documents to any other document (or other resource) we want to, we can also link to specific parts of documents, and we can make apps available at a simple web address (contrast this to native apps, which have to be installed and all that business.) Just about any web content can be converted to a link, so that when clicked (or otherwise activated) it will make the web browser go to another web address ({{glossary("URL")}}).</p>

<div class="note">
<p><strong>Note</strong>: A URL can point to HTML files, text files, images, text documents, video and audio files, and anything else that can live on the Web. If the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on.)</p>
</div>

<p>The BBC homepage, for example, contains a large number of links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.</p>

<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Anatomy_of_a_link">Anatomy of a link</h2>

<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p>

<pre class="brush: html">&lt;p&gt;I'm creating a link to
&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>This gives us the following result:</p>

<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>

<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3>

<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p>

<pre class="brush: html">&lt;p&gt;I'm creating a link to
&lt;a href="https://www.mozilla.org/en-US/"
   title="The best place to find more information about Mozilla's
          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p>

<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>

<div class="note">
<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p>
</div>

<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3>

<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p>

<ul>
 <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li>
 <li>Turn some of the content into links.</li>
 <li>Include title attributes.</li>
</ul>

<h3 id="Block_level_links">Block level links</h3>

<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code>&lt;a&gt;&lt;/a&gt;</code> tags.</p>

<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
&lt;/a&gt;</pre>

<div class="note">
<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p>
</div>

<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2>

<p>To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.</p>

<p>A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. For example Mozilla's English homepage is located at <code>https://www.mozilla.org/en-US/</code>.</p>

<p>URLs use paths to find files. Paths specify where in the filesystem the file you are interested in is located. Let's look at a simple example of a directory structure (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p>

<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>

<p>The <strong>root</strong> of this directory structure is called <code>creating-hyperlinks</code>. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an <code>index.html</code> file and a <code>contacts.html</code>. In a real website, <code>index.html</code> would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).</p>

<p>There are also two directories inside our root — <code>pdfs</code> and <code>projects</code>. These each have a single file inside them — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p>

<ul>
 <li>
  <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p>

  <pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p>

  <pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p>

  <pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
</ul>

<div class="note">
<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p>
</div>

<h3 id="Document_fragments">Document fragments</h3>

<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p>

<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>

<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p>

<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>

<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p>

<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>

<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3>

<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p>

<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p>

<p>An absolute URL will always point to the same location, no matter where it is used.</p>

<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>

<p>A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>

<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p>

<h2 id="Link_best_practices">Link best practices</h2>

<p>There are some best practices to follow when writing links. Let's look at these now.</p>

<ul>
</ul>

<h3 id="Use_clear_link_wording">Use clear link wording</h3>

<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p>

<ul>
 <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li>
 <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li>
 <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li>
</ul>

<p>Let's look at a specific example:</p>

<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p>

<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Download Firefox
&lt;/a&gt;&lt;/p&gt;</pre>

<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>

<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Click here
&lt;/a&gt;
to download Firefox&lt;/p&gt;
</pre>

<p>Other tips:</p>

<ul>
 <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li>
 <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li>
 <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li>
 <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li>
</ul>

<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3>

<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p>

<ul>
 <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li>
 <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li>
</ul>

<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3>

<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p>

<ul>
 <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li>
 <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li>
</ul>

<p>Let's look at some examples, to see what kind of text can be used here:</p>

<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
  Download the sales report (PDF, 10MB)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/video-stream/" target="_blank"&gt;
  Watch the video (stream opens in separate tab, HD quality)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
  Play the car game (requires Flash)
&lt;/a&gt;&lt;/p&gt;</pre>

<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3>

<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p>

<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=en-US"
   download="firefox-latest-64bit-installer.exe"&gt;
  Download Latest Firefox for Windows (64-bit) (English, US)
&lt;/a&gt;</pre>

<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2>

<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p>

<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p>

<ul>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
</ul>

<p>You should:</p>

<ol>
 <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li>
 <li>Turn each page name into a link to that page.</li>
 <li>Copy the navigation menu across to each page.</li>
 <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li>
</ol>

<p>The finished example should end up looking something like this:</p>

<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>

<div class="note">
<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p>
</div>

<h2 id="E-mail_links">E-mail links</h2>

<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p>

<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p>

<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
</pre>

<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>

<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p>

<h3 id="Specifying_details">Specifying details</h3>

<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>

<p>Here's an example that includes a cc, bcc, subject and body:</p>

<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
  Send mail with cc, bcc, subject and body
&lt;/a&gt;</pre>

<div class="note">
<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&amp;) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p>
</div>

<p>Here are a few other sample <code>mailto</code> URLs:</p>

<ul>
 <li><a href="mailto:">mailto:</a></li>
 <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
</ul>

<h2 id="Summary">Summary</h2>

<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>