Anyone surfing the web, either they know it or not, is permitted to do it because of HTML. This acronym stands for HyperText Markup Language and it’s the language used to build the structure of a website. You can think about the HTML code a bit like a skeleton for a human body.
This language, invented by Tim Berners-Lee back in 1991, is hence the backbone of a website. This means that the latter couldn’t exist without this language and that therefore the most basic website you might think of is coded using only HTML.
On the code written through HTML other languages are employed to implement the style, the user interaction and all a website has to offer.
But, if you are asking yourself if it is possible to build a website without writing a line of (HTML) code, the answer is anyway Yes: this is allowed through the use of tools like CMSs (Content Management Systems) like WordPress, Joomla, Shopify and Wix (to mention some) or with some WYSIWYG (What You See Is What You Get) software that allows content to be edited in a form that resembles to its appearance when displayed as a finished product.
It’ll be these tools job to convert the result of your work in HTML and in the other languages needed for your website.
Who intends to get into the Web Development, instead, must necessarily learn HTML either to build a website for the ground up or to edit one (made through these means or not) in order to make it just the way is desired in terms of style, functionalities and so on.
Without further ado, let’s find out what the HTML code is compound of!
Basics of HTML
The HTML code is made by several items called HTML elements or in a simpler way elements. HTML elements represents main structural units of a web page. These are defined by HTML tags whilst their properties are defined by the so-called attributes.
HTML tags are used to give instructions to the browser about how to integrate the website content and most part of them comes in pairs, as they are limited by an opening tag and a closing one between which the content related that particular element is placed.
For instance the title for a blog about hiking could have the following HTML code:
<title>Nature and Outdoor Adventures</title>In this case <title> is the opening tag and </title> the closing one.
Note that the HTML standard does not require lowercase tags, but it’s a good practice using them.
For a paragraph we would use a different paired tag:
<p>Web Development is awesome! It allows you to reach out people around the world.</p>Web Development is awesome! It allows you to reach out people around the world.
Let’s suppose now that we want this small paragraph looking a bit different. What about the expression Web Development written in bold and the word awesome underlined?
<p><b>Web Development</b> is <u>awesome</u>! It allows you to reach out people around the world.</p>Web Development is awesome! It allows you to reach out people around the world.
As you can see paired tags can nest other tags. All HTML documents consist of nested HTML elements.
Talking about unpaired (or single) tags, instead, exists for instance that one employed for showing text fields in a form: the input tag. Here an example:
<input type="text" id="first_name" name="first_name" placeholder="First Name">Inside the tag we can see some attributes:
- id – to identify that specific element in the webpage;
- type – to specify the kind of input (ex. text, checkbox, radio, password, button, etc);
- name – to reference elements in a JavaScript or to reference data after the form is submitted.
- placeholder – used for text inputs to tell the user what that field is about.
This is just a quick explanation. We will go into more detail on these topics soon by looking at the most important HTML elements.
Note that single tags can have a / (forward slash) just before the >:
<input type="button" id="send" name="send" value="Send"/>Structure of an HTML Document
It’s correct practice that every HTML document starts with the <!DOCTYPE html> declaration in order that the browser can render the page respecting HTML standards. For each HTML version exists a proper type of <!DOCTYPE>.
All the content of a webpage is placed within the HTML tags where other tags are nested. HTML tags are used to inform the browsers that it is an HTML document.
Within them, among all the possible tags, you always should find the following ones:
- head: containing metadata (data about the HTML document not shown to viewers);
- title: displaying the website title in the browser tab.
- body: including the webpage content (text, images, videos, etc).
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Into the Wild</title>
</head>
<body>
<h1>Nature and Outdoor Adventures</h1>
<p>Welcome to my blog!</p>
<p>Here you can find my outdoor experiences in the nature.</p>
<p>Stay tuned to get tips and tricks for yours.</p>
<h2>My Adventures</h2>
</body>
</html>Result
This was just the beginning. Go ahead with other topics about HTML! You can start with the HTML Elements – Part 1 😉.
