Total newbie?
I like to think of coding as the recipe for baking a cake.
You add all of the fundamental ingredients, add flavour and colour, pop it in the oven and you’ve got yourself a cake!
…But the cake is a fancy website or app, the ingredients are all the different pieces of content and the flavour and colour are the different types of code, making it pretty and functional.
But what’s HTML?
The abbreviation stands for Hypertext Markup Language. It is the easiest, most intuitive language in my opinion as a training developer. Let’s deconstruct what it means:
Hypertext – any text containing links to other text, or documents.
Markup – the various codes inserted into the document to instruct the browser how to interpret and display the information. We’ll discuss these later when looking at tags and attributes.
The long and short of it is, that this language simply formats the content on the page whether it be titles, paragraphs, images and links, or even embedding various types of media.
But did you know? Many programmers argue that HTML is not a coding language because it is declarative, not computational. All this means is that it declares what should exist on a webpage, rather than creating functionality. Although, I’d argue the two are not mutually exclusive!
94% of modern sites use HTML, building a foundation for functionality to be developed with other advanced languages.
It’s structural, not functional.
Here’s where tags and attributes come in. Essentially, these give the browser strict instructions on how to present and structure the information you’ve input, in a semantic and methodical way. Although, it won’t make it look pretty!
Let’s take a deeper look…
Tags
These elements label the content on the page in a way that the browser can identify its purpose. Practically all tags must wrap content inside of them with a start and an end, however, some tags are exempt from needing a closing tag.
<h1> This is the main title.</h1>
<p> This is a paragraph.</p>
<a> This is a link.</a>
<ul> <li>This is a bulleted (and unordered) list.</li> <li>ul identifies an unordered list will exist.</li> <li>li identifies a list item (a bullet point)</li> </ul>
<br> This adds a line break on a page and does not require a close tag, since it sits between content.
Attributes
Elements can have attributes to express additional special information about them.
<a href=”www.anexamplesite.com”> This ‘a’ shows there is a link, and the href attribute holds the URL it should link to.
Classes and IDs are a unique type of attribute which point to a particular class name in the stylesheet or CSS file. These are not predefined, they are dictated by you and should be labelled intuitively so as not to muddle up your classes!
<p class=”highlightedText”> This might point to styling in your CSS file that highlights the text in a different colour and will essentially become the ‘selector’.
Let’s see how this translates to CSS:
.highlightedText { background-color: yellow; }
While the formatting is completely different to HTML, it’s clear that the class has been identified and you’re adding a colour to it.
It’s all semantics!
When teaching yourself to code, it can be easy to pick up bad habits, so make sure to identify best practices from the get-go. The most important practice with HTML is to code semantically, meaning both yourself and the browser understand the meaning behind each piece of code, rather than simply instructing it.
HTML documents have a regular structure. Top-level items stay relatively similar in each document, but once inside the <body> tag, the more variation occurs, depending on the content.
Here’s an example, fancy trying to figure out why this code isn’t semantic?
<p class=”headerTitle”> This is a title </p>
Worked it out yet? It’s because the information is wrapped in a paragraph tag, with a defined class that allows styling of the text in CSS to make it look like a title. The user will notice it’s a title when looking at the site, but the browser won’t! This is also pants for SEO!
Image credit: https://www.geeksforgeeks.org/html/
Other semantic tags
Character entity codes were used to display characters or icons in a way that the browser can understand, equally you could type them into your text, but that wouldn’t be as semantic.
Arguably, these are now slightly redundant in HTML5 due to clever browsers understanding written characters. These codes are more so used in programming languages where a written character may cause confusion. But, it can’t hurt to get familiar with them!
Accessibility for all
Did you know that websites have to be accessible? This means that they’re designed and developed so that people with disabilities can interact with and contribute to the Web. I bet you don’t realise the number of disabilities affecting access to the web! They include visual, auditory, speech, cognitive, neurological and even physical, so your website needs to take all of these into consideration.
There are benefits for people without disabilities too, such as visiting a website on different devices like a tablet or in environments where people may not be able to use audio, or the room is too bright to see properly.
There are certain web accessibility standards that are internationally recognised to make things easier for building your website in an accessible way.
Examples of accessibility include:
- Colour contrast – A certain level of contrast should be met for people with colour blindness. Level AAA is the highest standard and suggests there is a contrast ratio of 7:1 for normal sized text. There are tools online enabling you to test different colour combinations.
- Navigation – A site should be able to be navigated by a keyboard for people with reduced mobility, so skip links should be utilised throughout the site.
- Screen readers – For people who are blind, enough context should be provided throughout the site for the screen reader to describe what is showing on the screen. Alt tags are very easy to implement for this reason, after embedding an image, use an alt tag to describe in approximately 10 words what is happening in the picture.
It is best practice to build your websites in an accessible manner, but while you’re learning it’s not expected. Organisations and developers however, are held far more accountable in ensuring inclusivity.
Ready to dive in?
Now you’re ready to start messing around with some code and try out all the cool tricks you’ve learned. Your best bet is to download Visual Studio Code for free, an industry grade code editor that we even use here at Pixel Kicks!
Prefer learning through quizzes? The Mimo app is a Duolingo-style software for learning to code. I absolutely love this for keeping up-to-date with coding, even on the go.
Once you’ve gotten to grips with HTML, next up is CSS and JavaScript, then you’ll be able to build small websites like there’s no tomorrow! Udemy and LinkedIn Learning have great courses on these languages, and you’ll even come out with a certificate after completing them.
I’m regularly posting to my LinkedIn about my favourite coding courses or what I’m studying at the moment, so feel free to come and join me!
Happy Coding!
MORE LIKE THIS
VIEW ALL
