Tag Attributes

Tag attributes are essentially properties that can be assigned, or attributed to a tag. The way to assign attributes is as follows:

<pairedTag attribute1="value1" attribute2="value2" ...>some content</pairedTag>

<unpairedTag attribute1="value1" attribute2="value2" ...>

Let's enhance our previous index.html file with some more elements and attributes.

Adding some divs

Going back to our index.html file, let's add a 4 divs below the paragraph tag. Copy the following code into the body of your HTML code: (or write your own divs if you want):

<div>This is a div, a generic html element</div>
<div>This is also a generic html div element</div>
<div>Also a div</div>
<div>Still a div</div>

Below these divs, add a line break element, <br>. This will force the next element to go onto a new line, instead of being stacked next to the div. Go the browser and reload the HTML page (or reopen if it you closed it earlier). You should see the above text rendered below the earlier paragraph we wrote, in 4 separate lines (see below).

Adding a `class` attribute

You'll notice how two of the divs above are quite long, while the other two are quite short. Hmmmm.

When writing HTML code there may be certain elements that you may want to format/style similarly because they are intended to have a similar appearance and behaviour. Here, say you want to group the longer divs with each other, and the shorter ones with each other.

This is where the class attribute comes in. Elements are assigned a class based on what you, as the developer, want the element(s) to look/behave like. Elements that look/behave similarly can be given the same class.

Here, assign the longer divs the class "long-div", and the class "short-div" (or any class name of your choice, as long as there are no spaces). It should look like this:

<div class="long-div">This is a div, a generic html element</div>
<div class="long-div">This is also a generic html div element</div>
<div class="short-div">Also a div</div>
<div class="short-div">Still a div</div>

Now, once we add CSS to the page we can use these classes. Reloading the page won't change anything yet though.

Adding some links

Recall that hyperlinks are created using the a tag. Let's add two links to our page: one for the orbital webpage and one for the NUS Hackers webpage. Inside the body, below the divs and the line break, add the following code (note that the anchor tags are nested within paragraph tags):

<p><a>Orbital webpage</a></p>
<p><a>NUS Hackers webpage</a></p>

Lets add another line break using <br> below these links, and a horizontal line using the <hr> unpaired tag.

<p><a>Orbital webpage</a></p>
<p><a>NUS Hackers webpage</a></p>
<br>
<hr>

Now, when you go back and reload the page, you should see the above text rendered in two separate lines. But you'll realise that you haven't really added any hyperlink yet because clicking on the text takes us nowhere. This is where the href attribute comes in.

The `href` attribute

"href" stands for "HyperText Reference" and is used to link to images, links or files on the web (or on your local storage). It can be assigned to the <a> tag (and a few others) to give it a hyperlink. You can give a link to a page as a value to the href attribute to create the hyperlink:

<p><a href="https://orbital.comp.nus.edu.sg/">Orbital webpage</a></p>
<p><a href="https://hckr.cc">NUS Hackers webpage</a></p>

Now if you go back and reload the page, you'll see the links, and you'll see that clicking on them sends you to the respective pages (see below).

Adding a form

Now let's add a form to our page. This form will, eventually allow us to conduct a Google Search query. Below the links we added before, add the following code:

<form>
    <input>
    <button>Submit</button>
</form>

If you reload the page and try to enter something and submit the form, nothing will happen. This is because we haven't defined any attributes for the form yet. We'll do that in the next section, but for now lets add a couple of attributes to the other elements.

The `required` attribute

You can imagine having a form where some or all of the fields are necessary (i.e. you don't want the form to get submitted if they are empty). How do you control this? Simple: add the attribute required to the input field.

In the html file, add the required attribute to the <input> tag:

<input required>

The required attribute takes in either "true" or "false" (as strings), but such attributes (called boolean attributes) can instead be omitted to set their value to "false", or place without assignment to set their value to "true".

Another example of a boolean attribute is the hidden attribute that can be added to any content-defining tag (paragraphs, buttons, forms, input fields, divs, tables etc.) to specify whether it should be hidden or not (big surprise there).

The `type` attribute

Generally, input fields take in only text. But what if you want to specify the kind of input it takes? That's where the type attribute comes into play. The <input> tag can take on a type attribute to define what type it is. The values could be one of the following:

"text" - this is the default value, no need to define a type attribute in this case
"email" - this checks for a valid email format (sometext@somedomain.com)
"password" - masks the input so the user cannot see what they are typing (now you know how to get those black dots in a password field)
"number" - only allows numbers
"checkbox" - makes the input a checkbox that can be checked/unchecked. Multiple checkboxes can be checked at once.
"radio" - makes the input a radio option (like checkboxes, but only one radio option can be selected at a time, and cannot be unselected once clicked)
"file" - allows the user to upload a file

In our case, we do not need a type attribute for the <input> tag since it is already of type "text". But the type attribute can assigned to the button instead, with the value "submit". This means that, when the button is clicked, the form gets submitted. Go ahead and add the type attribute to the button:

<button type="submit">Submit</button>

The `placeholder` attribute

The placeholder attribute can be added to the <input> tag to define some placeholder text. Let's add some:

<input placeholder="query" required>

Now if you reload the page, you'll see "query" in greyed out text inside the input field. This placeholder will disppear immediately once you start typing. If you try to submit the form without any input, you will get a small message from the browser requesting you to fill in the input field, thanks to the required attribute.

Adding a (useless) button

Below the form, add a line break and a button below the break. This is done using the paired <button> tag:

<button>This button does nothing</button>

Now this button is unique: unlike the previous one, which submits the form, this one does nothing. It's useless. Hence, it is unique on our page. We can use the id attribute to denote this uniqueness:

<button id="useless-button">This button does nothing</button>

Like the class attribute, the id attribute has no visible effect on the page. However, it denotes that the element is unique on the page, and hence you can later add special, unique behaviour and styling to the element.

Despite its name, the id attribute of multiple elements can be assigned the same value without an error. However, this defeates the purpose of using id to denote uniqueness, and it is better to use the class attribute in this case.

Adding an image

Feel free to add line breaks to pad out elements as you wish

Finally, let's add an image to our page. Since we're learning HTML, why not an HTML logo? Visit this link and download the file. Then move the file to the same folder as your index.html file. Feel free to get your own HTML logo from elsewhere, but this is the same logo used in the sample code for this guide, and its background color becomes relevant later.

The image should be present alongside index.html in the same folder, and should have the name html-logo.png.

Now let's add it to our page. Use the <img> tag for this, along with the src attribute (src stands for source):

<img id="html-logo" src="html-logo.png">
<!-- i also gave it an id since it is again a unique element and i want it to have some unique styling later -->

You should now see the image on the page once you reload it. If you don't, check for spelling mistakes ("scr" instead of "src", or "hmtl-logo", etc.), or it may be in a different folder than the index.html file.

Adding an alt

In case the image doesn't load, you would see a small icon in place of the image. Instead of this icon, you can display some text using the alt attribute:

<img id="html-logo" src="html-logo.png" alt="html logo">

This means that if the image doesn't load for whatever reason, the text "html logo" will be displayed instead. Try this out by purposely mispelling the filename and reloading the page.

Adding mouseover text

Some webpages have feature called mouseover text, which is small text that appears when a user hovers their cursor above an element on the page for a few seconds. This is defined using the title attribute, and can be used to either give users a little more information about the element, or in a more creative way.

Add some mouseover text using the title attribute to the picture:

<img id="html-logo" src="./html-logo.png" alt="html logo" title="html logo">

Now you'll see "html logo" when you hover your cursor over the image:

Putting it all together

At the end of all this, your page should render like this in the browser:

The body of your html file should look something like this: (final code available here):

<h1>Welcome</h1>
<p>This is my first page</p>

<div class="long-div">This is a div, a generic html element</div>
<div class="long-div">This is also a generic html div element</div>
<div class="short-div">Also a div</div>
<div class="short-div">Still a div</div>
<br>

<br>
<p><a href="https://orbital.comp.nus.edu.sg/">Orbital webpage</a></p>
<p><a href="https://hckr.cc">NUS Hackers webpage</a></p>
<br>
<hr>

<form>
    <input placeholder="query" required>
    <button type="submit">Submit</button>
</form>

<br>
<button id="useless-button">This button does nothing</button>
<br><br>
<img id="html-logo" src="./html-logo.png" alt="html logo" title="html logo">