Seeing as this is my first technical blog post ever, please do let me know what you thought of it 🤗
What is HTML?
HTML stands for Hypertext Markup Language and its primary function is to specify the webpage structure - you can think of it as the skeleton of the webpage.
HTML syntax
The building blocks of HTML are called elements. The anatomy of a HTML element is as follows: an opening tag, followed by content, and finally a matching closing tag.
Tags are presented using the angled open <> and closed </> brackets. Note that closed brackets typically contain a backslash. When you open a tag, you must always close it. Important: some tags such as <img> are self-closing as they have no content therefore don't require a closing tag.
HTML tags can be extended using HTML attributes. Attributes provide additional information that affects how the browser interprets the element. Attributes are typically written in the name="value" form.
Tags and Attributes
There are countless amounts of tags and attributes than you need to remember, but if you're interested you can refer to the links below.
Tags reference list: https://www.w3schools.com/tags/ref_byfunc.asp
Attributes reference list: https://www.w3schools.com/tags/ref_attributes.asp
Nevertheless, there are a few commonly used tags you should familiarise yourself with. These include:
<html></html>
<head></head>
<body></body>
<h1></h1>
<img>
<header></header>
<div></div>
<li></li>
<ol></ol>
<ul></ul>
Similarly, there are a few commonly used attributes you should also familiarise yourself with:
class
id
href
src
height
width
Now, we've covered some of the basics of HTML, let's look at how you would construct an element using <p> (paragraph) tag and a class attribute:
<p class="nice"> Hello World! </p>
So, in order for you to see this code being rendered on the webpage, there is one more thing you need to do. You need to place it inside a HTML boilerplate (basic template).
HTML5 Boilerplate - the bigger picture
Here is a HTML5 boilerplate. This is a basic template you would need in an editor like VS Code in order to execute and render HTML on a webpage.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>My First Line of Code</title>
</head>
<body>
<p class="nice"> Hello World! </p>
</body>
</html>
<!DOCTYPE HTML> tells the browser/parser what type of document it is looking at - in this case HTML.
<HTML> all the HTML we want the browser to pick should be within these tags.
<head> is where all the metadata is kept. You can also add titles that will appear on the tab of your browser.
<body> is where all the content goes, for example the <p> tag.
Top tip: ensure to save your HTML code in this format nameOfFile.html.
Note: in case you're confused about HTML5, it is just the latest version of HTML.
Now you have a good foundational knowledge of HTML, go and practice!
Top comments (0)