You want to create your dream website, but you don’t want it to look like a cookie-cutter template. Anyone well-versed in web design will tell you that you need to know HTML first. But what is HTML, and how can you learn it?
You want the website you publish to stand out and be original. You want elements and designs that no one else in your industry is using. After all, your website is the first impression that many potential customers get about your business.
But before you can do that, you need to learn a computer language called HTML. Essentially, it’s the language that lays out what a web browser should show to a visitor when they arrive on your website.
In this article, we’re going to explain what HTML is, how it came to be, how it’s used, how it works, and offer you some basic HTML training with advice on how you can learn more.
Are you ready to learn how to code your website without creating a broken page? Let’s jump right in.
What Is HTML?
HTML stands for “hypertext markup language” and is a relatively simple language used to create web pages. Because it doesn’t allow variables or functions, it’s not considered a “programming language,” but rather a “markup language,” a language that uses tags to define elements within a document.
If you ask anyone in the web design world what HTML is, you’re likely to get a long-winded explanation that will leave your head spinning, especially if you’re like most of the world and don’t have the first idea about coding and creating a website from scratch.
So what does “hypertext markup language” mean? Let’s break it down.
Hypertext is text placed in order that connects related items, usually via links (also called hyperlinks). Markup language describes the style and structure of a page to web browsers.
So, HTML is what makes sure text and images show up in the right place, and that users can navigate your website painlessly. Web browsers load this information from your web server to generate the websites you see every day.
If you were to look at HTML in its raw form, you would see a lot of symbols and brackets that seemingly make no sense. However, it all contributes toward the final customer-facing product.
The very structure of websites is created through HTML. This language works alongside CSS (Cascading Style Sheets) and JavaScript to create visually appealing and interactive websites for users to enjoy.
The bottom line here is that HTML is the foundation of a good web page. Without it, you wouldn’t be able to share text with website visitors, much less add your personal flair to the website of your dreams.
The History of HTML
Sir Tim Berners-Lee created HTML in late 1991, but the coding language was not released to the masses until 1993.
That was when HTML1 first came out. Right from the start, it was meant as a means of sharing data via web browsers.
The growth of HTML stalled shortly after it was released because not many developers were creating websites at the time.
HTML2 was released in 1995 with additional features, making it the markup language standard for web design through 1997.
That was when HTML3 was developed by Dave Raggett. It gave webmasters more powerful characteristics to use when designing pages. Unfortunately, it was ahead of its time. The features of HTML3 actually slowed browsers down, as they weren’t equipped to apply them yet.
HTML4.01 was developed in 1999, and it came with support for multimedia options. This upgrade also included style sheets, printing facilities, and additional scripting languages.
More recently, HTML5 was released in 2015. The rollout of HTML5 added more media storage support and specific content elements. Inline doctype, audio, and video embedding were also made much simpler.
The world is working with HTML5.2 in 2022, which improves the content security policy at a time when we need it most.
It also has a strong focus on ecommerce, adding a payment request API to the fold. This upgrade also added accessible-rich internet applications for disabled people.
What Is HTML Used For?
The simple answer to this question is that HTML is used to create websites for personal and business use all around the world.
The actual answer is a lot more detailed than that.
HTML has been the default language used for web-based documents and websites since the 1990s. It works with browsers to help them understand a website’s structure and the style associated with them.
Essentially HTML is a blueprint that tells the web browser how to put your website together for the visitor. When a user types in your URL, the browser assembles the page based on the building blocks established in the HTML code.
This, in turn, helps the page look as intended when viewed by a user when combined with a CSS stylesheet that styles the elements laid out in your HTML document.
The current version of HTML also allows video, audio, spreadsheets, and other apps to run directly on websites. If you’ve ever marveled at these elements on a website before, you have HTML5 to thank.
This markup language also ensures smooth internal navigation of a website, thanks to hyperlinks.
Website designers can also use HTML to create lead generation forms to collect emails and names (provided you power the action with a file coded in another language).
If you use external plugins, you can also use HTML to create reservation systems or search forms within a site, allowing for easier booking and navigation.
HTML is how you include non-dynamic content on a website — content that you want every visitor to see the same way. If you want dynamic content, you need to leverage JavaScript, PHP, or other programming languages as well.
How Does HTML Work?
As of May 2022, there are more than 3.56 billion web pages on the internet. Many of those pages are simple HTML files. (Note, that’s not websites we’re talking about here. It’s web pages.)
Traditionally, if your site had 150 pages, you likely had 150 separate HTML files. But today, things have changed. If you use a Content Management System (CMS), and most people do, this won’t be the case, as it typically dynamically generates pages based on data stored in a database.
These files are also called HTML documents, and they are the building blocks of your website. Each page has various on-page and off-page elements that all have a place in HTML documents. This includes back-end elements like meta tags, title tags, and alt tags, but it also includes physical elements like videos, images, text blocks, and other user-facing features.
What Makes Up an HTML Document?
All HTML documents end with the extension .html or .htm. These documents contain all the text and tags that provide static information to a web browser.
The HTML document is the instruction manual used by the user’s web browser to construct the site. All of the files it refers to (CSS stylesheets, JavaScript files that power dynamic elements, etc.) are read by the browser, which then renders the page accordingly, allowing viewers to see it as intended. The render is the actual construction, and it takes place every time someone navigates to a specific page on your site.
If there are issues with your HTML document or any of the files it includes, the site won’t render correctly. It would be like trying to assemble an IKEA desk without a vital piece or tool.
Modern websites contain various HTML elements made of tags and attributes. These elements create the structure of a page. The tags associated with each element show where they begin and end. Without a tag that closes an element off, the browser will put all following content within that column or row, even if that’s not what you intended.
The attributes associated with each element on a page illustrate the various characteristics that make them up.
All HTML documents begin with a <!DOCTYPE> declaration. This document type definition, also known as DTD, determines the structure and elements of an XML document.
While <div> used to be the primary choice for creating content blocks, in HTML5, you also have specific blocks like <main> that indicate the kind of content that will be in a block to crawlers — in this case, the main blog/article content.
HTML Basics
If you want to become a web designer or at least have a hand in creating your company’s website, you have to learn HTML. Like just about everything there is to learn in this world, you have to start with the basics to have a strong understanding of more advanced elements to come.
You could, of course, use a free HTML editor or Sublime Text, but having a strong understanding of how HTML works will help you with enhanced personalization of the websites you build.
We’re going to break down some HTML basics in the sections below to get you started down the road toward HTML fluency.
Elements of HTML
All HTML elements, regardless of what they’re creating, have the same three components. You have an opening tag, the content itself, and a closing tag.
Your opening tags show the web browser where the elements of your page begin. For instance, it could show where a video player or text paragraph starts on the page. All opening tags use opening and closing angle brackets to mark themselves. For example, the opening tag <em> places emphasis on content, like italics. You would place this tag before the text that you want to emphasize.
The content itself is the actual information that the user sees. This can be written copy, like a blog post. It could also be an image or an embed code for a video. When placed after the opening tag, the content will begin where designated.
The closing tag is the same as the opening tag, but it adds a forward slash before the element’s name. To return to our emphasis tag example from before, you would place the tag </em> at the end of the text you’re trying to emphasize.
So, for example, if you want to italicize the word “exactly,” you’d code it like this:
<em>Exactly.</em>
On the actual user-facing page, it would look like this:
Exactly.
HTML elements also include attributes, which contain a name and attribute value. The attribute’s name shows what the user is adding, while the value provides additional information.
For image tags, you obviously need to specify which image you want to show, so that looks like this:
<img src=”img_girl.jpg”>
If you want to make a paragraph on your page red while using the Arial font, you could use the style attribute:
<p style=”color:red;font-family:arial”>
In this example, we’re using the opening tag <p> for a new paragraph. With these attributes attached, everything in that paragraph would be red in the Arial font, right up until the closing tag </p>.
But in modern web development, it’s standard practice to not use the HTML style attribute to adjust the design of individual elements, but rather to stylize the whole page with a separate CSS stylesheet.
HTML class and ID are two attributes of an HTML element that “names them” and help you target these elements with CSS or JavaScript later. This helps with development and makes it more effective. By using an element’s ID or class, you can insert style information into elements like background color, borders, font color, and more.
For example, instead of styling the text to red inside the HTML document, you could do this:
<p class=”redtext”>
And in the CSS stylesheet, target the class like this:
.redtext {
color:red;
font-family:arial;
}>/code>Most Used HTML Tags and HTML Elements
There are 142 different HTML tags that let you create elements. These are composed of both block-level and inline elements.
Block-level elements span the whole width of a page, starting a new line within a document.
Here are a few common block-level tags that you might use on your website:
- <head> This tag is for listing meta-information, like the page’s title.
- <html> This is a root element. It appears at the beginning and defines the HTML document.
- <body> The body tag identifies the content of a page.
- <h1> to <h6> These six different tags identify the various headers you can use.
- <p> This is the paragraph tag, dictating the start of a new paragraph in your content.
- <ol> This tag creates an ordered list.
- <ul> The ul tag created unordered lists.
- <li> This is the list item tag. It is enclosed within ordered or unordered list tags for each item in the list.
- <div> This is a block element tag that creates a “section” you can fill with content (and then stylize later with CSS. Most sites and templates rely heavily on these to structure their content.
- <header> This is a block element tag specifically for header content.
- <main> This is a block tag specifically for the main blog content.
- <footer> This block tag is for your footer information, like copyright, links, etc.
Inline elements are what format the content within your block-level elements. This can include emphasized copy, like bold and italic fonts. Inline content can also be links, both to internal and external content.
Inline links format text without breaking any content flow.
There are some common inline tags that you might use on your website. Here are some of them, in no particular order:
- <strong> This is what you’d use to create bold text.
- <em> The em tag, which we used in an example earlier, shows italics.
- <a> This is the hyperlink tag. It would also need an href attribute to show where the link is pointing (just like img tags need a src attribute).
HTML, CSS, and JavaScript
We briefly mentioned CSS and JavaScript earlier in this article. They tend to go hand in hand with HTML to create advanced modern websites with a personalized flair. But what are CSS and JavaScript? And how are they different from HTML?
As we know by this point, HTML is used to create structure and add elements to your pages. But, as you also know, that’s not everything that goes into a solid website design. This is where CSS and JavaScript come into play.
CSS stands for Cascading Style Sheets. It’s the language and files modern web developers use to design the backgrounds, colors, spacing, layouts, and animations viewed on a website. Essentially, CSS describes the presentation of an HTML document, giving the web designer more flexibility and control.
It can also help you apply the same formatting to multiple web pages through .css files. These stylesheets ensure that you won’t have to redo your formatting for every page. Additionally, the .css file can be cached, reducing load speeds between pages that share the same format.
Then there’s Javascript. Javascript creates dynamic functions, including photo galleries, pop-ups, and sliders. It’s a popular programming language used by 97% of websites worldwide. Dedicated Javascript engines are included with all major web browsers, making the implementation of these functions easier and more effective.
Together, Javascript, CSS, and HTML work together to create what we see every day as a complete, well-designed, interactive web page on both desktop and mobile platforms.
How to Learn HTML
We’ve gone through what HTML is and some of the basics associated with it. Now, it’s time to talk about the process of actually learning to use HTML and how it can help your future and career aspirations.
HTML is more than just a popular programming language. It’s the language of the internet, and that’s not going to change anytime soon. It works hand in hand with popular services like WordPress, and you can use HTML to alter many WordPress templates to turn them into something uniquely yours.
So, let’s start with why someone would want to learn about WordPress in the first place.
Why Learn HTML?
Learning HTML is important for anyone looking to have a career in web development. Talented web developers are always in demand, whether they work for agencies or independently, and learning HTML is the foundation of that skill set.
Not only is there a lot of demand for this position, but web developers can easily earn salaries into six figures. The average web developer salary is $98,565 in 2022.
A strong understanding of HTML is an essential skill recruiters look for when hiring web developers.
If you’re not a web developer but you’re looking to hire one, a rudimentary understanding of HTML, CSS, and JS and how they interact will help you when interviewing candidates. You’ll be able to know which questions to ask and easily weed out those who don’t know what they’re talking about.
Learning Resources
Several free learning resources are available for those looking to further their HTML education. We will walk you through a few of the best right now.
Codecademy
Codecademy is a service that provides courses on an introductory level at no cost. It includes interactive tutorials and utilizes a split-screen that shows the results of your HTML coding as you go along.
You can access exclusive content through the program for $19.99 per month.
Coursera
Coursera includes several courses that go in-depth on HTML while providing examples from the real world. This service does come at the cost of $49 per month with a free week-long trial.
W3Schools
W3Schools is another free service that teaches basic HTML. It uses examples, exercises, and various resources to achieve this.
You can also pay $95 for a self-paced official course that comes with a certificate at the end.
General Assembly Dash
General Assembly Dash is an HTML educational resource that provides projects for beginners looking to wade into the waters of web design. This program works off a goal-based approach and helps you understand the real-world applications of what you learn. You get to build a website instead of just completing modules.
Once you’ve finished these projects, you can take an online mentorship course that grants you a certificate upon completion. Full tuition costs $3,950, but there are flexible financing options and installment plans.
Summary
HTML will continue to be the backbone of web design well into the foreseeable future. A strong understanding of these concepts can even help you create your own WordPress website from HTML.
When it’s time to embark on creating a new website, you’re going to need robust website hosting. If you’re thinking about starting a WordPress site, contact Kinsta today to schedule a demo and find out why more than 24,000 businesses have entrusted their online presence to our premium managed hosting service.