I’d like to start with a great quote from an article written a while back.

“I began {learning HTML} by checking out the source code of some basic, simple websites, applications and programs. Learning code is literally learning a new language… you have to know how the language looks, sounds and feels.”

- Via The Industry.

And the best way to take a look at some HTML source code is to open up a simple web page, highlight some text (or the whole thing, if you want), right click on it, then press ‘Inspect Element’. This works on most browsers (so far I’ve tested it on Chrome and Safari). A tab appears at the bottom of the window, displaying lines and lines of seemingly unintelligible text that is the website’s source code.

When I first did this, I was overwhelmed with confusion, staring at text that made no sense to me. Sure, I recognised a few elements, but I had no idea what most of them actually meant. The next step in learning code should be to go in-depth with elements and really get to know everything about them: what the element content usually is, what context it is usually used in, and what attributes are associated with it (if you don’t know what attributes are, it’s fine; that comes later).

Let’s take a look at some elements we already know. Yesterday, we brushed over the element <h1>, but all we really discussed about it was that it was the largest heading. The tags <h2>, <h3>, and so on up to <h6> define other headings, each in descending order of importance, with <h6> being the least important. It should be noted that search engines use these headings to to index a site’s content, so heading tags shouldn’t be used to make text bigger.

Another element you should know is <p>, which defines a paragraph. Web browsers add a space before and after paragraphs, which helps to display content better. The <p> element often contains many nested elements, especially ones that format text. Here are a few:

• <br /> creates a line break.

It is an empty element, meaning it does not have an end tag. It is used like this:

This is a different line <br /> to this line.

The text above, in code, will display on a web browser as:

This a different line
to this line.

• <b> defines bold text.
• <i> defines italicised text.
• <sup> defines superscripted text.
• <sub> defines subscripted text.

When you read or write these elements in source code, they should not be on a separate line, unlike most other elements. They are used like this:

<p>This is <b>bold</b> text, this is <i>italicised</i> text, this is ^{superscripted}text, and this is _subscripted text.

And that displays on a web browser like this:

This is bold text, this is italicised text, this is ^{superscripted} text, and this is _subscripted text.

Which is funny, because my current theme automatically makes that whole paragraph all italicised. Har, har, har…

I think I’ve had enough of elements; we should move on to other aspects of HTML.  So, we’ll discuss ‘attributes’, which I mentioned earlier. But unfortunately, to discuss attributes, we have to briefly discuss elements. 

The <a> element is a great example of attributes. It is used to define links:

<a href=”http://un-nmd.tumblr.com”>The Unnamed<a>

The code above will be displayed as: The Unnamed. Upon closer inspection, you wonder, why is the start tag so long? What is this ‘href’?

That, my dear reader, is an attribute. If we go back to my analogies of elements to sentences, then an attribute would be like a sentence’s adjectives; they give the reader more information about the content. 

By looking at the attribute example, what can we infer about the href attribute?

• The href attribute has a structure: attribute name=”website URL”. 
• The href attribute is in the start tag.
• The href attribute makes the element content into a link.

Why don’t we expand on some of these points?

• Attributes have a fixed structure: attribute name=”value”. The quotation marks enclosing the value are essential; without them the attribute won’t take effect.
• All attributes are located within the start tag.
• Attributes change the element content, they can change it’s color, font, id, format, and more.

There are many, many attributes, and their values are even more numerous. I only use a few, though; the ones I utilize the most are ‘href’, ‘id’, and ‘style’. Of course, you already know ‘href’, but as for the other two… 

They are to do with something called CSS. 

And on that cliffhanger, I think it’s time to end this post! It’s definitely my longest post thus far, so I hope the sequel has lived up to the original. I think we’ll talk about CSS tomorrow.