DONATE  
MENU
JAVASCRIPT
JSON
AJAX
CSS
HTML
PHP
MYSQL

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Tags/elements » HTML Links
Share Tweet WhatsApp

HTML Links

Links in HTML are very important as they help link up the multiple webpages and files of your website together for accessibility. An example is a index.html page that has a link to navigate to login.html page, link to about_us.html, to register.html. To create hyperlinks in HTML, we use the <a> tag or anchor tag, whose content is what to show e.g Click Here To Login and which must also be closed else all other contents in the webpage become part of the link element. Links created with the <a> tag are inline elements meaning they can accommodate other contents beside them.
<a>Click Here To Login</a>

Copy PRACTICE IT

For the link to be active, we need to use the href attribute to specify where it should take a user to when clicked upon. The value of the href attribute may be the absolute or relative path of a file on the internet or your computer. The value can also be empty to redirect to the same webpage or a slash to redirect to the root of your website when clicked upon.
<a href="">Click Me To Go Nowhere</a>
<br/>
<a href="/">Click Me To Go Homepage</a>

Copy PRACTICE IT

EXAMPLE Our HTML login page
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>LOGIN</h1>
<div>
<p><span>Username:</span>
<input type='text' placeholder='Enter Username'/></p>
<p><span>Password:</span>
<input type='text' placeholder='Enter Password'/></p>
<p><button>SUBMIT</button></p>
</div>
</body>
</html>

Copy PRACTICE IT

Our HTML webpage with link to login
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Webpage</title>
</head>
<body>
<h1>Welcome To My Webpage</h1>
<a href='login.html_20210107013748.html'>Click to login</a>
</body>
</html>

Copy PRACTICE IT

From the above, you can see a link on our webpage which redirects a user to our login page. HTML links can also be used in linking up or redirecting a user to practically any kind of file including images, videos, audios and etcetera. If a browser can interpret the file on it own, it interprets else it prompt the user to download such files to their local computer.
<a href='../media/html_logo.png'>View Image</a>

Copy PRACTICE IT

Links Can Be Use To Navigate Inside A Webpage. You can also use links to navigate from one section or part of a webpage to another. For example, from the top of a webpage to the bottom or vice versa and just any part. HOW TO 1. Create an element which the link will navigate to.
<span></span>
2. Assign a unique id in the webpage to that element using the id attribute.
<span id='section1'></a>
3. Create the hyperlink to navigate to that element. The value of the href attribute will then be #id_of_the_element_to_go_to.
<a href="#section1">Go To Section 1</a>
EXAMPLE
<h1 id='top'>Getting Started</h1>
<a href='#down'>Go Down</a>
<div style='white-space:pre-line;'>
To get started with writing and interpreting your own HTML webpages, you don't necessarily need any form of installation rather you need:

1. A simple text editor

2. A web browser

An editor is simply any application that enables you compose whatever form of text in a document and allows you save same with whatever name and extension.

There are also text editors dedicated to the writing of just HTML documents and yes, there are a lot of text editors out there on various application stores both for mobile and desktop devices.

A web browser is an application that helps interpret web documents received from a server or computer.

So, basically, you need just a text editor to define your various HTML markups in a document and have it saved with the .html and then, a web browser to have it interpreted just as you visit various website like stackbeginner.com with your website to have their web documents interpreted for you.

You must also remember that before your HTML document can be recognized and interpreted by browsers, they must be saved with a .html extension. An extension is basically the ending path of a file name that helps computer devices and even humans to recognize what kind of file it is. For example, when you see a file in directory named beauty.jpg, you will be able to deduce immediately that it is an image file. So do browsers recognize and interpret files ending with .html as HTML documents.
</div>
<a href='#top'>Go Up</a>
<h1 id='down'>Best Of Luck</h1>

Copy PRACTICE IT

SUMMARY
  1. HTML links are also known as hyperlinks.
  2. They help us link webpages together including webpages of other websites.
  3. Links are created with the <a> tag and a href attribute whose value is where the link should go or lead to.
  4. Links can be built to lead to just any file including websites/webpages, images, videos, audios.
  5. Links can also be built to navigate a user from one part of the website to the other quickly.
Take a short quiz on HTML Links.
Ask a question or tell us if HTML Links is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode