HTML
There’s a good chance you’ve heard the term HTML before — maybe you’ve even dabbled with the markup language as a means to edit your MySpace profile back in the day. HTML and CSS (Cascading Style Sheets) came on the scene in the late ’90s and are considered the backbone or “power couple” of the internet, because they enable developers to build and structure web content.
When people are just starting out learning how to code, HTML and CSS are typically the first languages that they start with. HTML has a simple, text-based structure that’s easy for beginners to learn and understand. But what does HTML actually mean? HTML is an acronym that stands for HyperText Markup Language. Markup languages are different from programming languages. Whereas programming languages help us modify data, we use markup languages to determine how elements are displayed on a webpage.
Here’s an example:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Content</p>
</body>
</html>
So, what is HTML used for? Web Developers use it to organize, format, and display a web page’s content. Read on to learn more about how HTML works, how HTML5 improved its functionality, and the different careers that use it.
Learn something new for free
How does HTML work?
HTML is usually stored in files that use the .htm or .html extension. A website can include hundreds or even thousands of these HTML files kept in various directories.
When you visit a web page, its server sends its HTML files to your browser. Your browser then reads the HTML in the files and displays it. Some web applications don’t use static HTML but generate it in response to specific actions on their servers. In the free beginner course Learn HTML: Fundamentals , you’ll learn how HTML is used to create the structure and content of a web page and get to know the most important HTML elements.
We can also add other types of content, like CSS and JavaScript files, images, and videos, to add more features to a web page. CSS allows us to add stylistic elements (like colors) to a webpage. JavaScript enables interactivity. Together, these three languages form the foundation of web development .
What are HTML tags and elements?
Think of HTML elements as the building blocks of a web page. Elements are defined by their opening and closing tags and can be nested within other elements. Web developers use elements to structure a web page into sections, headings, and other content blocks. Here’s an example:
<div>
<h1>Heading</h1>
<p>The main content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</div>
In the HTML example above, the first element we see is <div>, which wraps around the other elements. Div is one of the most common HTML elements and is a simple way to separate a page into sections. For example, if you wanted to create two columns on a web page, you could use div elements to define them.
Nested inside the div, we see an <h1> element. H1 elements define the main heading of a web page. The text within a heading will usually be larger and bolder, depending on the styles applied to the page.
The <p> tag creates a paragraph element. There will usually be a margin after the element, again, depending on the styles.
Finally, we see a few sets of nested elements. The <ul> tag creates an unordered list, which does nothing until you nest at least one set of list elements (<li>) within it. A browser would render these elements as something like this:
The HTML elements listed above are some of the most common, but we can use others to add images, tables, and other elements to web pages.
领英推荐
What is HTML5?
HTML5 is the latest version of HTML. The update improved the language’s functionality, enabling the use of features that previously required additional software like browser plugins. It also added the ability to create applications using HTML that function offline. Here are some of the tags that HTML5 added to the language:
The features listed above are only some of the many brought about by HTML5. It was one of the biggest changes in the language’s definition and made way for today’s modern dynamic web pages.
What is HTML used for?
Now that we understand HTML’s tags and elements and the updates brought about by HTML5, let’s take a closer look at what the language can do.
Structuring web pages
With tags and elements, we can define the headings, paragraphs, and other contents of a web page. Browsers come with a built-in stylesheet that visually differentiates these elements. Content surrounded with <h1> tags will have a large, bolded font and its own line. Surrounding text with <h2> tags will make it bold and slightly smaller than the <h1> elements, and so on. Without these tags, the text on the web page would all look the same.
Navigating the internet
Navigating the internet would be much harder without HTML. Imagine having to manually enter the URL of every web page you wanted to visit. This would be our reality without anchor tags. HTML’s anchor tags allow us to link pages to and from each other using the href attribute. Here’s an example:
<a >Google</a>
As you’ve probably guessed, the code snippet above creates a hyperlink to Google. You can also use hyperlinks to link to a specific section of a webpage.
Embedding images and videos
HTML also allows you to not only embed images into a webpage but also adjust their width, height, position, and even the way they’re rendered.
In the past, developers would use Flash to embed videos into a webpage. But, with HTML5’s addition of the <video> tag, that’s no longer necessary.
Along with embedding videos, you can use other HTML attributes to adjust video controls, timestamps, thumbnails, autoplay, and more.
Improving client-side data storage and offline capabilities
HTML5 also improved the language’s offline capabilities. Websites use cookies to store data about users that can be retrieved later when they revisit the site. Cookies work well for small data like authentication tokens and usernames, but HTML5’s addition of localStorage and IndexDB enabled browsers to store more complex data.
Plus, the application cache and cache manifest files you can reference from HTML allow users to browse a website while offline by retaining data on the user’s machine. This allows your web app to continue functioning even if a user’s connection drops.
Game development
While you can’t create video games purely with HTML, the <canvas> element makes it possible to build video games in your browser using CSS and JavaScrip