You need to understand the context in which HTML is used before we can get into the details, so if you are yet to understand them, you can always check my previous article. Let get going!
Attributes are properties of an HTML element and provide additional information about it. An element may have a single attribute, more than one attribute, or no attributes at all. Here is an example heading with a title attribute:
<h2 title="This is a subheading">Hello and Welcome!</h2>
When an attribute is defined, it is placed in the opening tag, after the declaration of the element (or another attribute, if there are multiples). The format is as follows:
Attribute names are always preceded by an equal sign (
=), and attribute values are always enclosed in quotation marks. There is no space between the attribute name, equal sign (
=), and attribute value.
The Anchor elements / hyperlinking
Linking to other parts of the web is one of the most important aspects of the World Wide Web. Without the ability to redirect our HTML pages to other web addresses, there would be no world wide web at all! ( Or don't you feel stressed when you keep typing web url everytime)
A hyperlink can be created by using the anchor tag to connect a HTML page to another web page, as shown below:
<a href="http://app.leewardslope.com">Leewardslope community</a>
Hypertext Reference (
href) consists of a Uniform Resource Locator (URL), which is a fancy way of referring to a web address, or where a link points to. You can also use the
href attribute to refer things like ;
- Your email address (
- Your phone number (
- Files/Documents (instead of a web address, put the URL of the file)
- Another location on the same web page the browser is currently viewing
Relative and absolute URL paths
Understanding file paths is crucial to understanding how your hyperlinks would function when you start coding.
Absolute URLs point to a single address that allows the page to be redirected no matter where the source comes from. They look like this:
http://www.github.com/leewardslope There are three main components to an absolute URL path:
- The Protocol: What you usually see as http:// or https:// when you browse websites, but can also be other things, such as file:// or ftp://
- The Domain: The page's address (i.e., www.github.com)
- The Path: The directory (or folder) we want to access. This field is optional but can be highly useful (e.g., Google's profile on Github).
When an absolute URL is used on multiple devices/browsers, the destination won't change. An absolute URL provides all the information required for a browser to reach the desired address.
The relative URL provides less information than the absolute URL and is used when you have more than one web page on your website and wish to navigate between them.
Here is an example of a directory named website that includes:
- a main
- a nested directory named
blogwith three posts named: *
index.html file of the website directory, we could include an anchor tag to direct to the Contact section:
If we wanted to navigate to a post within our blog folder, we would include this folder name in the relative URL path:
blog/post2.html. The complete anchor element would then look like this:
<a href="blog/post2.html">Post 2</a>
If we are in the
blog directory, how can we access the
index.html page if we are there? We can do this by pointing a direct path to the file:
Let's learn how to add headings and list to the HTML page in the next post now that you know about attributes and hyperlinking.