To begin with, it is a fact that without HTML, the web as we know it wouldn’t exist. This system creates structure on the whole web, from page layouts and paragraphs to links, tags, and attributes. Then, every time we’re surfing online, whether we know it or not, HTML is most likely present. But that is not all you should know, so please read on!
What is HTML?
HTML is a standardized system for tagging text files that, basically, creates the structure for every page that we find and use on the web. Then, it is in charge of adding in page breaks, paragraphs, bold lettering, italics, and more by using tags that tell browsers what to do with text.
For instance, to make a word appear bold, we use to put it between the following tags: <strong>bold</strong>. So, the first tag indicates the start of the word(s) that we want to bold, and the closing tag(/) indicates where we want the bold to stop. At a glance, it seems easy, but this is just the basis for pretty much every page on the web, and if you’re learning to code, this is a good place to start.
What does HTML stand for?
It means Hypertext Markup Language, but let’s try to break it down. First of all, a hypertext is a sort of metatext that is used to reference other pieces of text. While the Markup Language element provides a series of markings that instruct a web browser on what it should do with those pieces of text.
What is HTML used for?
Well, HTML is technically the skeleton of just about any website. Hence, it provides the “bones” that underpin everything else on the site. But in a nutshell, we’ll tell you which are the most common elements used to define HTML:
- Paragraphs: One of the most common elements in HTML and, as you might have guessed, it defines a paragraph.
- Line Breaks: This is a line that represents a division just as with print media, a paragraph creates a line break below it to visually separate it from other paragraphs. Thus, it is used to emphasize a semantic separation of content. The same structure is used in a novel or a magazine.
- Block Elements: Elements that create the spacing below themselves on a page are called block elements. These objects used to appear vertically down the left-hand side of a page at least until they are styled by CSS. Examples of block elements are <div>, <article>, <table>, and many more. This feature allows HTML to start separating a webpage into different sections
- Headings: These and the paragraphs work in concert to create the majority of the text content of a web page and its structure. Usually, HTML has six heading elements, which are numbered 1 through 6. h1 is the most significant and usually contains the title of the content – Not to be confused with the title that appears in the browser tab. h2 represents a subsection, h3 and so on represent identifiers of further subjects in subsections until we get to h6.
Okay, aiming to give a clearer understanding of how HTML works to create the final version of a webpage, if HTML is our skeleton, CSS (Cascading Style Sheets) would be what gives us our features (like the color of our eyes, skin, and hair). JavaScript would be to do with our movements and how we interact with people (like when we reciprocate a handshake, wink, laugh or ask a question).
How HTML works?: HTML tags
As we mentioned before, HTML works by using several tags to inform a browser what it should be doing with text on page and where it should be loading further resources from. There are over 100 HTML tags currently available to use, but most sites will only need a handful of these to work efficiently.
There are three HTML tags that are necessary for each page: <html>, <head>, and <body>. Then, let’s check them out. First of all, we have the <head> tag, whose purpose is to indicate to a webpage that you are using HTML and that each page will open with <html> and close with </html>. Next, we have the <head> tag that contains metadata not visible on-page but important for functionality, and finally, we have the <body> tag that denotes where the body content of a page resides.
Generally, each of these necessary elements can only be used once per page. The basic structure of common HTML tags is detailed below:
<!DOCTYPE html>
<html>
<head>
<title>Title that appears on browser tab</title>
</head>
<body>
<p>Here is a sentence with <strong>some words</strong> using <strong>bold.</strong></p>
</body>
</html>
Common HTML Elements
There are other non-essential HTML elements that can be used to improve or define the structure of the pages or emphasize certain sections of text. Below, you’ll find a list of them:
- <em> to add italics/emphasis
- <head> meta text not visible on the webpage
- <header> defines the header of a page or section in a web page
- <body> body of page
- <br> to insert a line break
- <audio> embedding sound content
- <video> embedding video content
- <button> for using clickable buttons
- <div> to define/divide a section
- <img> for inserting images
- <li> to represent a list
- <ol> to define an ordered list
- <ul> to define an unordered list
- <u> to underline text
But these are not the only ones you can find, since there exists another common feature of HTML such as embedding CSS, Javascript or PHP files within it. These files build dynamic web pages that add flare and interactivity to the base HTML skeleton.
HTML5
This is the most recent version of HTML, and as usual, with the latest versions come new abilities. Then, HTML5 offers more functionality than previous iterations of the language. For example;
- It can support audio and video using the relevant tags, <audio> & <video>.
- It is supported by all browsers including Chrome, Safari, Mozilla, and more.
- It is easier to use than older versions.
- It works better on mobile devices.
How do I view a page’s HTML?
Well, this is a very simple process, even if it is not your site. For example, we’ll use Google Chrome to show you the procedure here (although it’s just as simple with other browsers too). To view a page’s HTML, right-click on the page and click on “view page source”. You can also use the keyboard shortcut CTRL + U on Windows, or Option + Command + U on iOS.
Why is it useful to know HTML?
If you’re in constant interaction with code, websites, or apps built in your job or day-to-day life, it is important that you take a look at this language. And if you want to see how vital HTML and technology are, take your smartphone out of your pocket and ask yourself; how many apps do you have? How often do you use the browser? Do you use it for shopping or making purchases? Does it control things like the temperature of your home? Do you use it to book hotels, flights, haircuts, or anything else? Do you use it to order food or to listen to or watch something online? All of this relies on HTML.
Still not enough? There are currently hundreds of thousands of job roles throughout Europe that require HTML skills. And now that the world is going through the era of new technologies, it is a fact that software developer salaries are always increasing. So, whether you are already working in technology or are looking for a career change, learning HTML can be extremely useful for you.