HTML for Beginners: Exploring Elements and Attributes
Brendan Glover
A quick disclaimer: I am new to coding. I am only a few days into learning HTML & CSS (Check the course out here), and the motivation behind starting this blog was to track my progress, share my wins and losses and hopefully help the next person who might also be needing some assistance on their journey into code.
Having said that, a few days ago, I was faced with this task:
I was asked to link the styles.css file I had created in a previous section. It was at this point where I realized that to answer this section, I needed a better understanding of what an element and an attribute truly was before I could understand what I needed to do to progress. I realised that just ploughing through the course to “get it done” was me doing a great disservice to myself since I didn’t actually know why I was doing what the task was asking me to do.
I hope the information below can clarify this, it really helped me a lot. AI (imo) should be used as a tool and not a crutch. I started this project to learn about HTML and CSS, not how to prompt a chatbot. Gemini helped to add some additional context, which in turn helped me understand what I needed to do and why.
Elements vs. Attributes in HTML
Elements:
Elements are the fundamental building blocks of an HTML document. They define the structure and content of a web page.
An element typically consists of a start tag, content, and an end tag (though some elements, like
<br>or<link>, are self-closing or "void").Examples:
<h1>,<p>,<div>,<a>,<img>.Think of elements as containers or instructions for the browser on how to display content. For example, the
<h1>element tells the browser to display the enclosed text as a top-level heading.
Attributes:
Attributes provide additional information about an element. They modify or enhance the element's behavior or appearance.
Attributes are always specified within the start tag of an element.
Attributes consist of a name and a value, separated by an equals sign (
=). The value is usually enclosed in quotation marks.Examples:
href,src,class,id,style,rel.Think of attributes as modifiers that give elements specific characteristics. For instance, the
hrefattribute of an<a>element specifies the URL that the link should point to.
In simpler terms:
The element is the what (what kind of content or structure).
The attribute is the how (how that content or structure should behave or appear).
Implementing the Code
Here's how to add the link element to your HTML's <head> section:
<head>
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
Explanation of the link element and its attributes:
<link>: This element establishes a relationship between the current document and an external resource.rel="stylesheet": This attribute specifies the relationship as a stylesheet, indicating that the linked resource contains CSS rules for styling the HTML document.href="styles.css": This attribute provides the URL (in this case, the relative path) to the external CSS file named "styles.css".
Void Element
The <link> element is a void element (also called a self-closing element). This means it doesn't have a closing tag (</link>). It contains all the necessary information within its start tag. Other void elements include <br>, <img>, and <hr>.
Here is how I completed this part of the task:
Thank you for reading, good luck and happy coding.
Subscribe to my newsletter
Read articles from Brendan Glover directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by