What is HTML?

An Introduction to the Language of the Web

HTML is the standard markup language for creating websites and applications. Used everywhere on the web, most websites are constructed using HTML, and browsers know how to read and display it correctly.

Whether you're online shopping, reading the news, or checking social media, HTML plays a vital role in the structure and layout of all websites.

But what exactly is HTML?

What is HTML?

HTML is used to format a web document so a web browser knows how to correctly display it. It is a fundamental building block of a website or application.

It is the standard language used to create and design web pages. HTML allows developers to structure the content, add headings, text, images, and create link's between pages.

HTML Building Blocks

HTML is made up of elements. A common example is the p (paragraph) element, used to display text:

<p>Hyper Text Markup Language.</p>

Elements are commonly (not always) made from a pair of tags:

• <p>: The opening tag, the beginning of the element.
• "Hyper Text Markup Language": The text between the tags displays in the browser.
• </p>: The closing tag, the end of the element.

These tags describe how the content inside should be formatted, i.e. how the browser should display it. The p element is formatted to display on it's own line, rather than be alongside other content. For an important heading, we could use a h1 (heading level 1) element:

<h1>Hyper Text Markup Language.</h1>

This will tell the browser the text contained between the tags is an important heading. Headings are available from h1 through to h6, most to least important, and are useful for accessibility. The browser will format this on it's own line, and generally a larger font size will be used.

Example HTML Elements

There are many HTML elements, we will cover lots during this course, here are some common ones:

Images: The <img> element is used to display images. Here is is a basic example:

<img src="image.jpg" alt="woman riding a bicycle">

You may notice this img element has no closing tag. This does not need one as there is no content to place between the tags (i.e. text). Instead, we add attributes inside the opening tag:

• src: The file path/url of the image.
• alt: Alternate text to display if the image can not be displayed. Used for accessibility and screen readers.

Links: We use the <a> (anchor) tag to link one webpage to another:

<a href="https://learn-webdevelopment.com">Go to home page</a>

This uses an opening and closing tag to contain the text to click on (hypertext).

When clicked on, the user will be redirected to the url inside the href attribute. Links can be internal (another page on the current website), or, external (another website). They can even link to a different part of the current page.

Lists: Lists are a common HTML element:

<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>

The above example is an unordered list using the <ul> element. This means the items in the list are not numbered. Default styling will use a bullet point for each item in the list. Ordered (numbered) lists are created with the <ol> element.

Inside of these elements contain the list items (li). These are the items/tasks etc which make up our list. Although a typical use could be a shopping or to-do list, they can be very versatile. And often have a range of uses such as a navigation menu, and often combined with the <a> element to create a list of links.

HyperText Markup Language

Taking a step back, the idea behind HTML was to create a way for researchers to send and receive documents to each other electronically. With what we have covered above, the HTML acronym should make more sense:

• HyperText: A fundamental part of HTML. Using the <a> element, we create "hypertext" links to click on, this links us to other pages/documents.
• Markup Language: We “markup” the content by surrounding it in tags. For example, we markup a heading using <h1>Text to be marked up...</h1>. Resulting in a way to describe what the text will look like to the document reader, such as a web browser.

HTML in Web Development

HTML is an important part of web development, providing the content and structure of a web document. And often used alongside other technologies/languages such as:

• CSS (Cascading Style Sheets): CSS is used to provide styling and layout for our HTML content. Examples include font size, color, spacing between elements, layout, and animations.
• JavaScript: JavaScript makes our web pages more dynamic and interactive. Examples include fetching data from outside our app, a popup when clicking on an element, changing a color when the mouse moves over an element, and providing content updates without the user reloading the page.

HTML5

The web is constantily evolving and updating. We are currently on version 5 of HTML and like all new versions, features get added or removed.

When a new version is released, which is not that often, it is not something to worry about. Everything we already know usually still applies, it is often just a case of improvements and new features as technology moves on.

HTML5 was introduced in 2014, resulting in some new features, such as:

• Semantic elements: Semantic (descriptive) elements were introduced to further describe the HTML content. Some elements include <header>, <footer>, <section>, <article>, <nav>.
• Native multimedia: HTML5 introduced native multimedia support with the <audio> and <video> elements.
• Canvas: The <canvas> element was introduced to allow support for drawing and graphics without the need for third-party plugins.

Conclusion

HTML provides the content and structure for any website, learning HTML will give you an essential platform to build on. Other web technologies/languages are often used alongside HTML, such as CSS and JavaScript.

For those looking to start their journey into web development, learning HTML is the first step toward building engaging and functional websites.