An Introduction to Html
Html is the markup language behind almost every website you see online. It's not a programming language, but it forms the structure of a web page — telling browsers what to display, from text to images. You can use Html to structure the content of a web page, including text, images, hyperlinks, forms, and embedded media such as music and video, while appearance and interactivity are handled by CSS and JavaScript.
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.
Elements are enclosed in angle brackets (< >) and typically grouped into blocks that define sections of content, like paragraphs, headings, or links. Elements can also be nested inside one another to create more complex layouts and page structures.
One of the simplest examples of an Html document includes 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 older documents like HTML 4.01 or XHTML may not be parsed the same way by modern browsers. The doctype declaration should appear before the <html> tag to trigger standards mode, which makes sure that the browser renders the page according to the official spec. Without it, the browser may fall back to quirks mode, leading to inconsistent behaviour across browsers.
Although <!DOCTYPE html> is the only declaration required to trigger standards mode, most documents should still include elements like <html>, <head>, and <body> for proper structure. These are technically optional per the spec, but omitting them can lead to unpredictable rendering, especially in complex documents.
The doctype declaration isn't technically an Html tag — it serves as metadata for the browser to determine how to interpret the document.
<html></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></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></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></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 contains the document content that is displayed to 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></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></p>An <p> element represents a block of text that does not necessarily contain headings or subheadings.
A paragraph of text can be enclosed in a <div> element, which is a block-level container, or wrapped alongside other inline content using <span>, but you should not place a <p> element inside a <span>, as this results in invalid Html.
A paragraph may be one long continuous line of text, or it may contain multiple lines with line breaks <br> between them.
It is also worth noting that Html tag names are not case sensitive, so <P> and <p> will behave the same way in standard Html documents. However, using lowercase tags is the recommended convention. In contrast, XHTML is case sensitive and requires all tags to be written in lowercase. If a document is served as XHTML or uses the XHTML doctype, writing <P> instead of <p> would result in a parsing error.
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 markup 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 markup language for building web pages today. HTML5 became a W3C Recommendation (an official standard) on October 28, 2014.
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.
There are many html elements; for a more comprehensive list, visit the HTML Element Reference from W3Schools.
More importantly, if you decide to develop your website to support many browsers, you should know that 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" attribute 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.
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.
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. Here is an example of how to use the "target" attribute to open a link in a new tab or window:
<a href="https://example.com/" target="_blank">Visit Example.com</a>Html offers many more attributes than we can cover here. For a complete overview, see this full reference of html attributes and their compatible elements.
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 markup 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 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 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.
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 note about the filename, the reason we used the filename my-first-webpage.html 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-webpage.html, which as you can see, it quite descriptive and friendly, and pleasing to the eye.
We could have called the file anything we wanted, and it would still render just the same, for example, WOW DUDE this is AN HTML Document.html. 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, the browser may enter quirks mode, potentially rendering the page incorrectly. 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_. _UTF-8_ is a variable-length encoding that uses one byte for characters from 0-127 (the standard ASCII range), and up to four bytes for characters above 127, depending on the character's Unicode code point. _ISO-8859-1_, by contrast, is a single-byte encoding that maps each character to exactly one byte in the range 0-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 to make sure that they are transmitted correctly and safely across the internet.
The most common encoded characters you'll see are %20 (which represents a space) and %2B (which represents the plus '+' sign). These characters have special functions in URLs and can't be used directly without being encoded, otherwise they may be misinterpreted by the browser or server.
For example, the ampersand (&) is used to separate parameters in a URL query string, not as a general "URL separator" — so if you're passing multiple values in a URL like this:
https://example.com/search?query=hello&lang=en…the & separates query=hello and lang=en. If you were to include an ampersand in the actual data, it would need to be encoded as %26 to avoid breaking the structure of the URL.
A space, on the other hand, should be encoded as %20. If someone types %20 into a URL expecting it to represent the percentage symbol, they're going to run into problems — because %25 is the actual code for %.
So just to be clear:
%20= space (%26= ampersand (&)%2B= plus (+)%25= percent (%)%2F= forward slash (/)%3B= semicolon (;)
Mixing these up will likely break the URL or send the wrong data entirely. You can visit the "HTML URL Encoding Reference" to learn more.
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.
You can visit the "HTTP Request Methods" to learn more.
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!
About the Author
Passionate about helping beginners learn to code and sharing practical insights, knowledge, and resources.