In the exictement of explaining and sharing what I’ve learnt during my journey, I have missed something really important and that is explaining most basic component of a website. Hypertext Markup Language or most commonly known as “HTML” is a language used by programmers to build up text in a website. It is the first building block of a website of which it is build upon but other languages and features such as Cascading Style Sheets (CSS), JavaScript(JS) and Bootstrap but that will be discussed in future posts. For now we will discuss the basics structure of HTML, the lines of codes that is commonly used and some fun and interesting features that you have seen or used everyday.
Buzz words
let us start by clearing a buzz word first. Front-end or Back-end is a term that you have heard if you would want to know about a little about coding. In the easiest sense Front-end programming is related to the presentation albeit the colours, layout and the ease of use of the website(aka User Interface[UI] and User Experience[UX]). Comparing it to the Back-end of which there are languages that communicates to servers and calls certain information that is needed at that point of time.An example of Front-end and Back-end that can be used in a daily context is of food.How the food looks, smells and presented on the plate is considered Front-end; How it is harvested, bought and transported is a Back-end process.Hence by definition HTML is a Front-end programming language and neither Front-end or Back-end is superior over one another. It is how these two work with one another is what matters in the end of the day.
Basic Structure of HTML
In HTML, lines of code are starts “<>” and ends with “</>” hence looking like this (<h1> Hello world </h1>) ; these are call tags and in every HTML page meta-tags are the bare necessities needed to ensure that a HTML file can run. These are the meta-tags that I mentioned.
Above, there are tags that I would draw some attention. mainly the <head></head> meta tags and the <body></body> meta-tags. For now just think of these meta-tags as 2 containers.
In the head meta-tag, important information is which is needed to be preloaded before the webpage is being displayed, it will be placed here. External links for styling (CSS) or Javascript(JS)
In the body meta-tag, this is where your writer content will be done. Your headers, paragraphs, buttons, image and other content are placed here.
These tags are then wrapped in <html></html> tag to complete the structure of the html file.
Commonly used tags in HTML
In html there are tags that are used more commonly that others and these are numerous. Going through via text will be very difficult, hence I will show a screenshot of where each of these tags goes with their functionalities written on the side. Remember just look out for the letter/word within <> and your good to go.
within the nav tag you’ll see <a></a>(anchoring tag) and the <ul><li></li></ul>(a list within an unordered list). The anchoring tag allows the linking of other html files when the link is clicked. The ul/li tag arranges the links in a very cleanly within the website. Cant visualise this? Here have a look! and yes I know it not much but this will be built up later on
within the section tag you’ll see the <h1></h1>(header tag) and the <p></p>(paragraph tag) these are tags that are used to display text based content within the website. the <br>(break tag) inserts a single line break within the block of text. The footer tag is self explanatory once you’ve read the header tag.Still cant visualise? Yeah I know it’s difficult at first but here you go!
Oh gosh that was a lot to take in innit? and yes it take a lot of work to put up a website however through the year web developers have found numerous shortcut to increase the speed in which website are designed. This will be discussed later on in my blog. If you’ve reach this far I thank you and I hope you’ve learnt something today =]
A Mechanical Engineer’s journey through Software Engineering field 
One thought on “The Beginning, HTML: Hypertext Markup Language”