Go Back

An Introduction to Html

cover

David Gunner (Jnr)

July 14, 2022

An Introduction to Html

Html is the language behind all the websites you see on the internet, it is the language of design and programming and it’s what allows browsers to display text and images.

You can use html to customise the appearance of a web page, create hyperlinks between web pages, and add interactivity to a website with forms, buttons, and embedded media such as music and video. This blog is designed for the absolute beginner and focuses on basic html elements.

You will gain a basic understanding of web markup and coding techniques. You'll learn how to create and format your very own basic web page.

Just to note that you can use something called Cascading Style Sheets for formatting your html to better present it on a page, but as this article will focus on html, we won't be touching on that. That being said, html is very simple to learn, so let’s jump right in!

What is Html?

Html is an acronym that stands for HyperText Markup Language.

It's the standard markup language for creating web pages and web applications. Html is used to structure the text and elements of a web page and define how each page should look on different devices or browsers.

Html elements tell the browser how the page should look when it renders it on the screen or devices being used. Html documents consist of sections and elements, and elements are organised into blocks, the blocks act as labels for pieces of content such as paragraphs, headings, links, etc.

A Basic Html Example

At its most basic level, html is used to describe the structure and content of web pages using hierarchical labels called elements.

These are enclosed in angle brackets (<>) and grouped in blocks called elements. Elements can be nested inside other each other to create more complex structures or layouts for web pages.

One of the simplest examples of an html document consists of the following elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Some Page Title Here</title>
  </head>
  <body>
    <h1>A H1 Heading</h1>
    <p>A simple paragraph or block of text.</p>
  </body>
</html>

There you have it! A simple html document consisting of a single heading and paragraph of text. So now, let us explain the example in a little more depth.

<!DOCTYPE html>

<!DOCTYPE html> defines that this document is an HTML5 document and that all of the markups in the document should be interpreted as HTML5 markup.

This declaration is necessary because HTML5 is a revision of html and HTML4 documents are not guaranteed to be valid HTML5 documents. The doctype declaration is the very first thing in an HTML5 document and needs to be the very first thing in a document.

The <!DOCTYPE html> declaration is the only required start tag in an HTML5 document, so everything else is an optional tag and need not be opened and closed in a document. The doctype declaration isn't technically an html tag.

It serves as "information" to the browser about the type of content to expect.

<html>

The <html> element, commonly known as the root element, represents the root (top-level element) of an html page.

All other elements must descend from this element. The root element has a start tag and an end tag, and it specifies the entire html page.

<head>

The <head> html element is where you can add metadata about a document’s html elements.

For example, an html document’s title—that is, what people will see in the website’s URL bar—is added here using the <title> element, and a script that defines how a document can look or how a certain document behaves and is added using the <script> element. The <head> element also contains an <link> element that can be used to link all of the website’s external style sheets as well as <meta> elements that contain machine-readable information (metadata) about the document, like its description and any keywords.

<title>

The <title> element controls the content of the browser's tab or title bar, as well as the title of the current document in the browser's history list, and defines a title for the html page (which is shown in the browser's title bar or the page's tab).

<body>

The <body> element is a container for all the visible contents in html (such as headings, paragraphs, images, hyperlinks, tables, lists and form elements).

The <body> element will be the body of the document and where the document content is displayed to the users.

Scrolling down to the bottom of the document will reveal the </body> element and the end of the document. All of the content on the page appears between the <head> and </body> tags.

The body element contains various content blocks that can be displayed or hidden by the user agent (browser or device) based on its settings and/or the user’s preferences.

<h1>

The <h1> element defines a large heading, and it does so by specifying that the heading has a larger font size than any other headings in the rest of the document.

Heading tags should be used instead of <span> elements for headings. <h2> and <h3> tags also exist as block-level headings in html, right up to <h6>.

The <h1> element is used to create an article or blog post title, or the title of the website.

<p>

An <p> element represents a block of text that does not necessarily contain headings or subheadings.

The <p> element can be nested inside a <span> element. A paragraph of text can also be enclosed in a <div> or <span> element, however, doing so will most likely render the paragraph as a block-level element instead of inline-level text.

A paragraph may be one long continuous line of text, or it may contain multiple lines with line breaks between them.

It is also worth noting that html tags are not case sensitive so if you were to do <P> instead of <p>, it would still work in the same way, the official html standard does not enforce the use of lowercase case tags, however, lowercase tags are the recommended syntax and if you were to uses a stricter document type such as XHTML then this would complain if you weren't using the lowercase tags and tell you that you must use them.

More about XHTML can be learned on the official documentation website here. Just to reiterate, just from looking at this document, the browser can understand the structure of the document and know how to display it on the screen.

A Little Html History

Html was once the most extensively used hypertext mark-up language, introduced by Tim Berners-Lee in 1993.

Html 4.01 was the most widely used version of html during the 2000s, and it achieved official status in December 1999. XHTML was an attempt to reformulate html into an XML language. Some other mark-up languages that employ XML are Geography Mark-up Language (GML), MathML, MusicML, and Really Simple Syndication (RSS).

Because these languages were originally created in a common language, they can be shared between apps easily. XML is a powerful alternative to html and XHTML is an official World Wide Web Consortium standard (W3C).

Markup languages such as XHTML are similar to html and other web languages, but XHTML has more constraints because, without strict limitations in all XML languages, interoperability between applications would be impossible. Semantic html is html that uses tags to describe the content of the page rather than using tags for design purposes.

The W3C and the (WHATWG) World Wide Online Working Group - say semantic html is the standard mark-up language for building web pages today. html5 is currently a draught proposal and not an established standard as of 2011.

Regardless, it is widely accepted as the way of the future.

What is an Html Element?

In a nutshell, an html element is the starting tag, the closing tag and everything in between the two.

A simple example would be something like this paragraph:

<p>This is some text.</p>

The opening and closing tags are called "start" and "end" tags respectively, elements consist of some content and optional attributes which tell the browser how to render the element and the content it contains, attributes are contained inside the tags of an element.

Html elements can also be nested, which simply implies that one element can be enclosed within another, and in fact, we have already seen an example of this above in the "Basic Html Example". For your convenience, here it is again:

<!DOCTYPE html>
<html>
    <head>
        <title>Some Page Title Here</title>
    </head>
    <body>
        <h1>A H1 Heading</h1>
        <p>A simple paragraph or block of text.</p>
</body>
</html>

As you can see, the "html" tags are the outermost, and nested inside of those are the "head" and "body" tags, nested inside of the "head" tags we have the "title" tag, and inside of the "body" tags, we have nested an "h1" and a "paragraph" (<p>) tag.

Note: There are many html elements; for a more comprehensive list, visit this HTML Element Reference link from W3Schools.

More importantly, if you decide to develop your website to support many browsers, not all html elements work in every browser, see this full comprehensive list to see what is supported in each browser.

What is an Html Attribute?

Attributes

Attributes are properties of elements which convey important information and are used to improve the look of the page. Some examples of attribute use are to change the colour and size. They consist of a name and a value separated by a colon and enclosed in quotation marks.

For example:

<p align="center">This is some text.</p>

The "align" attribute specifies the text alignment, "center".

Let's look at another quick example to demonstrate the use of an attribute, if we were to create a text link (hyperlink) that we wanted to point to some web page, we would use the "anchor tag" like so:

<a href="https://example.com/">Visit Example.com</a>

The defined "href" element in the anchor tag above is a crucial attribute of the anchor tag since it defines the link's destination and instructs the browser how the link should look when it's shown on the screen or device; without it, the link would be meaningless. We can now click on this text on our webpage and it would load the page that we specified under the "href" attribute.

Note: Unless custom styling has been set, links in the browser will be shown as follows: active links are underlined and highlighted in red, visited links are underlined and highlighted in purple, and links that have not been visited are underlined and highlighted in blue.

**Extra Note: **If we didn't want the browser to navigate away from our current page when clicking a link, then we could also use the "target" attribute. One such property of the "target" attribute is "_blank" if we used this, then we would be notifying the browser that when we click a link, we want the behaviour to open that link in a "blank" browser tab.

Code example from above with the "target" attribute added:

<a href="https://example.com/" target="_blank">Visit Example.com</a>

There are too many html attributes to go into detail about them all here, but you can view a list of them all and what elements they can be used with here.

Global Attributes

Conventional attributes can only be used to specific html elements, but global attributes can be applied to any html element.

Specific items may or may not be affected by global characteristics. Although HTML5 permits standard elements to have attribute characteristics specific to the global attribute's namespace, this renders the content non-compliant.

Even though "my-custom-tag" is not a legitimate html element, any HTML5-compliant browser will hide the text if you define the attribute "hidden" on your own html element. Here's an example to show what I'm talking about:

<my-custom-tag hidden>...</my-custom-tag>

You can learn more about the global attributes here.

Event Attributes

Html event attributes consist of global events, window events, form events, keyboard and mouse events, dragging and clipboard events, media events and more.

They are implemented through JavaScript and can be used to provide a richer and more dynamic interaction between a web page and the user. Begin and end events are essentially used to define that an element should be triggered at some point during its lifecycle.

This can be done using the "on" event or "onsubmit" event. You can find more information about event attributes here.

What is Html Canvas?

Canvas is a two-dimensional drawing area in the HTML5 specification; the canvas mark-up element is also defined in HTML5. Canvas enables an application to draw shapes and images whenever it's in use.

It's similar to the now deprecated Adobe Flash and allows developers to produce complex animation and interactive graphics. Canvas offers support for both vector graphics and raster graphics through JavaScript and CSS.

Canvas can be used by developers to produce animated images, banners, games and many other types of graphics that can be displayed on the web page.

Here is a very simple canvas example that, like other programming examples, creates a typical "Hello World" example:

Html:

<canvas id="canvas" width=600 height=300 style="background-color:#fff;"></canvas>

Javascript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "24px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillStyle = "#000";
ctx.fillText("Hello World",300,150);

If you would like to see this example basque in all of its glory, I have taken the liberty of creating a JSFiddle for you to see it in action here. You can also learn more about canvas in general on the MDN web docs.

What are Html Audio and Video Elements?

The html audio and video tags are used to add video and audio content to a web page.

They take the content and display it in an embedded code very similar to a YouTube video box. The audio and video tags can also be used to embed third-party services such as SoundCloud or Vimeo or even custom uploaded files on your server; these services can be integrated into your site or application through the use of JavaScript.

The <audio> and <video> elements have methods, attributes, and events in the HTML5 DOM.

If you would like to see a full list of the methods, properties, and events, then please visit this HTML Audio and Video DOM Reference on W3Schools.

What is a Web Browser

A web browser is a software application used to access the web.

It allows you to browse the web and view web pages. There are many different types of web browsers available, including Google Chrome, Mozilla Firefox, Opera, and Safari.

Each one is a little different and has a slightly different look and feel to it, but they all essentially do the same thing; they allow you to access websites on the internet and display them in a nice neat little package called "The Internet." Let's have a look at some of the most commonly used web browsers available out there today. The most popular web browser in the world is Google Chrome; according to research from a global market share, it has over 64% of users worldwide at the time of writing this article.

Safari came in second with 17.59% and firefox third, with just 4.12%. Browsers have come a long way in a short period, and they are becoming far more advanced with each passing year; they allow us to access information from around the world in just a matter of seconds!

How Does Html Work With a Web Browser

Because we couldn't see anything on the web without a web browser, html and web browsers go hand in hand. Using a browser, you can navigate the internet anywhere.

On your computer or mobile device, it displays data that is retrieved from other websites. The "Hypertext Transfer Protocol", which explains how text, pictures, and video are shared on the internet, is used to transfer the content.

For anyone using any browser, anywhere on Earth, to view the information, it must be dispersed and presented consistently. A rendering engine is a piece of software that transforms the server's data into text and graphics when a web browser requests data from an internet server.

The pictures, sounds, and experiences that make up the internet are created by web browsers through the interpretation of the Hypertext Markup Language (html) code present in this data. Through hyperlinks, users can visit other websites or online pages.

Each image, video, and webpage has its own unique Uniform Resource Locator (URL), sometimes known as a web address. Each time a browser requests data from a server, the web address tells the browser where to look for the items indicated in the html and where they should display on the web page.

A Little About Html Editors

There are many editors than can be used to edit or create an html document, the simplest being notepad which comes with Windows, but there are also many dedicated editors like Notepad++ or Dreamweaver that are easy to use and very powerful.

There is also VS Code which is a free text editor that I love and use frequently, I have found it to be very powerful, especially with the extensions that can be added to speed up the workflow when programming or coding, and best of all its completely FREE. Html editors allow us to create and edit documents that are readable by browsers and other software that can interpret them.

They allow us to make changes to the code on the fly and make corrections quickly without having to retype the whole document again from scratch. Using an editor can help make the process of building a website easier as it can save a lot of time when creating a site; for example, we can use the editor to add new pages to our site, insert images, and modify existing content all within the same editor window.

Sometimes it may even allow you to use templates which can make the whole process a lot quicker. There are many benefits to using a text editor to write your code, and I would highly suggest finding one you like and then using it for your projects.

Write Your First Html Page

We have already seen plenty of examples of a basic html page above, but now has come the time you have been waiting for, you finally get to make your own basic html webpage and render an html document to the screen.

In sticking with tradition, we are just going to make a simple "Hello, World!" example, that is to say, our simple html document will render the string "Hello, World!" to the screen. I know what you are thinking, it doesn't sound very exciting, and you are right, it isn't jaw-dropping, but this is aimed at beginners who know nothing about html or the web, and so we all have to start somewhere right, the idea of this blog was to go into a lot of depth about html and how it works with the web, having that deeper understanding means that something as trivial as a simple "Hello, World!" example will be a piece of cake, but the idea is that you will feel knowledgeable enough to go away feeling comfortable enough to try other things in the document on your own.

So with that said, let's create our first html document web page:

Create and Save the Page as an Html File Extension

Step 1: Open a text editor of your choice, I will be using VS Code. Once you have opened the text editor of choice we are going to create a new file and save it with a name that makes sense to you; for example "my-first-webpage", you can then save the document locally to your computer.

Notes:

If you are using VS Code alongside me you can simply click the icon in the sidebar that is the picture of a little document with the corner folded and a + symbol on it, this will automatically jump your cursor inside of an empty textbox in the sidebar ready for you to enter the name you wish to call your document, so enter the name but be sure to finish it with the ".html" file extension, e.g. - "my-first-webpage.html", this will now open the newly created html document ready for you to start entering your code.

If you are on Windows using Notepad, simply create a new text file, and give it a name, but make sure to remove the ".txt" extension from the end and add the ".html" extension instead, this will ask you to confirm that you wish to save with a new file extension, click yes, then right click the document and click edit so the file is opened in notepad ready for you to enter your html code.

A small note about the filename, the reason we used the filename "my-first-webpage" was to stick with the web standard of having a friendly SEO URL (search engine optimisation URL), if we were to publish this to a live server on our domain it would then look something like "https://example.com/my-first-wepage/", which as you can see, it quite descriptive and friendly, and pleasing to the eye.

We could have called the file anything we wanted, for example, "WOW DUDE this is AN HTML Document.html", and it would still render just the same we could even upload it to our server and view it on our domain, and nothing would break! So, "What's the problem then", I hear you ask?

The trouble with this is that if a user tried to manually type this web address into a browser, the chances are unless they can copy it exactly, they are going to be presented with an error page, specifically a "404 - Page Not Found" error. As you can see it isn't a very friendly URL, and it doesn't allow the user to navigate there very quickly or very easily, if, by some miracle they did manage to get your webpage to display, they would be presented with a URL that looked something like this:

_"`https://example.com/WOW%20DUDE%20this%20is%20AN%20HTML%20Document.html/`"_`

As you can see, it isn't very friendly or pretty looking at all, and if for example, you were trying to sell products online and you shared a link like that to your social media account, it's highly unlikely anybody would be willing to click it!

URL encoding is a little out of the scope of this article, but a quick Google search will give you a vast array of knowledge on this subject, so I urge you to explore it. You can also see the below section on "URL Encoding" for a more in-depth explanation.

Write Our First Html Document

Step 2: Once you have saved the file locally on your computer you will need to open it up in your text editor of choice; once the document is open you can start to type in your html code. Now as I mentioned earlier we are going to be making a very simple page so we can just write out the basic "Hello, World!" example from below into the file we just created:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Congratulations, you are now a web developer and you have just created your very first html document and webpage.

However, we are quite finished yet, where would be the fun if we don't view our creation in a web browser.

Finally, View Your Html Page in Your Web Browser

Step 3: Make sure you have saved the file after making the changes, and navigate to where it is located on your computer, if it already shows with an icon that looks like your web browser of choice, just simply double click it and it will open in your default web browser, you should be presented with a page that simply says "Hello, World!".

If your file doesn't show the browser icon, just simply right-click it, and choose "open with", from the caret menu that appears choose your default web browser, if that doesn't show in the list then select "choose another app" and navigate to your default web browser, this should then open your html file in your browser. That's it, you've started your journey as a web developer and you should be proud of yourself, I urge you to now go off and explore and try adding styles, changing text colour, adding images and just play around and have fun, don't worry if you break something, it's all the process of learning.

Just remember to back up the original copies first, then at least if you break it and can't remember how to change it back, you can just revert to an earlier working copy.

Extras (Advanced Topics):

These are more advanced, but still worth mentioning so you can have a very brief idea of what they are and what they do, I urge you to research this as you grow more confident and progress as a web developer.

HTTP Status Codes and Messages

HTTP Status Codes tell web servers how to respond to HTTP requests.

They allow web servers to communicate errors to the clients that request them. Each HTTP status code has a corresponding message that explains the error in detail.

For example, the HTTP status code 404 indicates that the requested page or resource could not be found. Likewise, the HTTP status code 500 indicates that the server encountered an unexpected error.

However, not all status codes indicate errors. For example, the HTTP status code 201 indicates that the server successfully created the requested resource or page.

This status code 200 indicates that the request was successful. HTTP status codes are grouped into 4 categories: success, redirection, client error, and server error.

For more see this URL - "HTTP Status Messages"

Html ISO Country Codes and Html ISO Language Codes

The Html ISO country codes provide a list of countries with their two-letter codes in alphabetical order. For example, the code for the English language but America as the country is <html lang="en-US">.

The Html ISO language codes provide a list of languages with their two-letter codes in alphabetical order. For example, the code for Spanish is <html lang="es"> and the code for English is <html lang="en">.

For a more in-depth look visit - "HTML ISO Country Codes Reference" and "HTML Language Code Reference"

What Exactly Is the Html Document Type?

A <!DOCTYPE> declaration must appear at the top of every HTML document.

There is no html tag in the declaration. It "informs" the browser as to the type of document to anticipate.

The browser then knows how to render the page. If you neglect to include a <!DOCTYPE> declaration then the html parser will ignore the rest of your code and just assume that it is plain text.

In other words - html without a declaration is not well-formed.

You can learn more about document types on the W3Schools reference page for "<!DOCTYPE>".

Html Character Sets

Html uses several different character encodings.

The most common ones are "UTF-8" and "ISO-8859-1". Both of these are multi-byte encodings, meaning that each character is represented by more than one byte. "UTF-8" uses one byte for characters from 128-255 (including non-printing characters) and two bytes for characters from 0-127. However, "ISO-8859-1" uses one byte for characters from 0-127 and two bytes for characters from 128-255. "UTF-8" is more common nowadays because it's backwards compatible with ASCII, and it allows characters to be used that aren't included in "ISO-8859-1". Therefore," UTF-8" is recommended for most web pages and looks like the following:

<meta charset="UTF-8">

The browser must be aware of the proper character set (encoding) to employ to display an html page correctly.

For further learning visit this web page - "HTML Character Sets".

Html URL Encoding

Certain characters are encoded in URLs for security reasons.

The most common ones are %20 and %2B. These characters have special meaning in the URL of a website.

For example, the ampersand is a URL separator, and a space is used to signify the end of a URL. However, these characters can be misinterpreted when typed into a browser.

For example, if a user types %20 instead of %25, the website thinks it is entering a space. To avoid this problem, these characters need to be encoded into their codes: %20 becomes %2f and %2B becomes %3b.

There are different ways to encode these characters, but the most common ones are %20 and %26.

Learn more about the "HTML URL Encoding Reference" here.

HTTP Request Methods

HTTP Request Methods are one of the pillars of the World Wide Web.

They are used to communicate between clients and servers to request resources, such as web pages and images. HTTP Request Methods have many different purposes, such as keeping clients informed about the status of a request and transferring files between a client and the server.

The most common HTTP Request Methods are GET, POST, HEAD, DELETE, PUT, and TRACE. GET is used to request a web page or other resource.

POST is used to request data from a server, such as uploading files to a server or sending data from a form. HEAD is used to request headers only, without sending the body of the request.

DELETE is used to delete a file or directory from the server. PUT is used to upload a file or directory, and TRACE is used to trace the request from the client to the server's log file.

Learn more about "HTTP Request Methods" here.

Conclusion - Congratulations You Are Now a Web Developer!

Congratulations!

You have just completed the tutorial and learned all about what html is and what html does. You have learned a lot of new skills and gained valuable experience.

You are now ready to start exploring more about websites and begin your journey into building websites. You should feel proud of yourself for completing this challenge.

Remember the skills you have learned. You are now on your way to becoming a web developer! Now go create a website!