Understanding Attributes and hyperlinking

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!

HTML Attributes

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: <tagName attribute_name="attribute_value"></tagName>

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 (mailto:your email)
  • Your phone number (tel:your 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 index.html page,
  • an about.html page and
  • a nested directory named blog with three posts named: * post1.html * post2.html * post3.html

In the index.html file of the website directory, we could include an anchor tag to direct to the Contact section: <a href="contact.html">Contact</a>

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: ../index.html.

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.

What? Still finding it boring? Know that to be an expert in web development (and start making money) you have to understand this basics of HTML before going into css or JavaScript (these are what makes your site look beautiful and functional).

You've successfully subscribed to Leewardslope
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.