What is HTML?
HyperText Markup Language (HTML) is the standard scripting language for documents designed to be displayed on the web. It essentially tells web browsers how to understand the structure and style of a page, and even allows your web pages to contain forms, host audio, video, and much more.
If you’d like to learn more about web development, or are interested in taking a peek under the hood of how websites work, this article is for you!
Firstly, some definitions:
Hypertext is the method by which internet users navigate the web. By clicking on special text called hyperlinks, users are brought to new pages.
A markup language is a system made up of tags that define the elements within a document. Markup files are designed to be human-readable, containing standard words rather than a more complicated programming syntax.
- So how does HTML work?
- What does basic HTML look like?
- Does HTML ever change and evolve?
- Want to learn more?
So how does HTML work?
A typical website consists of a number of HTML pages, such as a home page, an about page, and a contact page. Each of these pages are HTML documents saved with an .html or .htm extension, that the browser is designed to interpret and display to viewers.
These pages are made up of a number of HTML tags and elements, which serve as the building blocks of the page. Let’s see an example to bring this concept together:
<p>This is a paragraph.</p>
This is an example of an HTML element, it’s enclosed in a tag (e.g. the <p> tag), which defines where the element begins and ends. Another way to think of elements is as the content of a tag.
Let’s now look at how tags and elements combine to form a complete HTML page.
What does basic HTML look like?
As you can see, an HTML document consists of a number of elements that define the structure of the page:
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>
In this example:
- <!DOCTYPE html> tells the browser that it’s dealing with an HTML document
- <html> is the root element that defines the whole document
- <head> contains meta-information about the page, such as <title>
- <title> contains the title to show in the browser window's title bar and tab name
- <body> defines the documents’ body, it’s essentially a container for all the visible elements such as headings, paragraphs, images, links, etc.
- <h1> creates a heading; tags ranging from <h1> (largest) to <h6> (smallest) can be used as desired
- <p> creates a paragraph
- <img> used to insert an image; the source can be a URL or a path to a file on your server
- <a> creates a hyperlink to a URL defined by the href attribute
This HTML code will render in your browser like so:
As you can see, the browser doesn't display the tags but rather interprets them in order to render and display your page correctly to the end user.
Does HTML ever change and evolve?
Yes! HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially at the time. HTML 2.0 was published in 1995 and has undergone several major revisions since, with each new version bringing in new tags and attributes.
Today we are at HTML 5.0 which introduced native support for audio and video, as well as semantic markup; including dedicated tags for navigation elements, articles, sections, headers, and footers.
Cascading Style Sheets (CSS) are responsible for styling HTML elements, such as colors, backgrounds, fonts, animations, and layout.
Together, these three technologies form the backbone of modern front-end web development. When combined, having the power to build just about anything, is your reward!
Want to learn more?
If you’d like to take a deeper dive, there really has been no better time to learn! There are a ton of free courses online that can teach you everything you’d ever need to know.
Check out the following resources:
- FreeCodeCamp: With over 7000 free tutorials, you can learn by completing quizzes, building projects, and even earn certifications when you complete a course.
- Codecademy: Has fantastic introductory courses offered for free with interactive tutorials for visual learners. A Pro plan is available for $19.99 per month with exclusive member content.
- W3Schools: Has a free HTML tutorial series, which includes an interactive “Try it Yourself” editor, allowing you to experiment with code in the browser. The course is also available in video format for $9.99.
Other recommended articles, perfect for beginners in tech:
Also on the WHC Blog
Are these common practices damaging your website's SEO?
SEO has become a huge industry, worth approximately $80 billion, and for good reason. The vast majority of website visits come from search engines like Google, Bing, and Yahoo. Companies go through great lengths to invest...Read full article
5 FREE tools to help your small biz
Starting a new business can seem overwhelming and expensive, but with the right tools and strategy, you can get up and running (and making sales) in little time and with minimal investment! We’ll go over 5 free tools...Read full article
How can we help?
WHC Live Chat
As the number of communications has significantly increased due to the August 28 incident, response time is impacted. We have prepared an FAQ where you can find most answers on the situation and how-tos on restoration.See the FAQ I'm patient, chat now Follow the evolution of the situation
How can we help?Our experts are available 24/7
Our friendly customer service team is available right now.