Introduction to HTML
HyperText Markup Language, or HTML, is the first language of the web and was created in 1990 by Sir Tim Berners-Lee. The inventor of the World Wide Web.
HTML is one of the core languages of the web, and we use it to structure and display the content of web pages.
This content could be structured within headings and paragraphs, within a list of bulleted points, by using images and tables, or with interactive forms and other presentational elements.
To structure this content, we use HTML elements, which are built with tags. These tags give meaning to content and instruct browsers on how web pages should be displayed.
TAGS
The current recommended standard for HTML markup is HTML5.
You may often hear the terms HTML & HTML5 used interchangeably, and today they refer to the same thing. If you are talking about modern HTML, it is HTML5.
HTML5 was introduced in 2014 and it brought tags that better describe the content of web pages. These tags are easy to read as we can see what a footer is, or an article, or a navigation bar.
We use the word semantic to describe tags that provide meaning, and we will explore semantic HTML in a later section.
A simple example of an HTML tag is the <p> tag which signifies a paragraph. We would have the text of our paragraph in between, or wrapped by two tags:
<p>This text will be displayed as a paragraph</p>This text will be displayed as a paragraph
Opening & Closing Tags
The first tag is called the opening tag which precedes or opens the paragraph text.
The second tag is the closing tag, which follows or closes the paragraph text.
The text between those tags is treated by web browsers as the content of a paragraph:
Tags are never displayed to viewers of the web page. They are only seen by browsers or other developers.
WHAT CAN HTML DO?
HTML is a markup language as opposed to a programming language.
A programming language like JavaScript or Python allows us to create logic, execute tasks, and manipulate data. If such an event happens, do X. Otherwise, do Y.
We cannot do any of this with HTML. We only use HTML to structure web pages and markup content.
HTML is the simplest of the languages we are going to learn as we just describe what we want. Place an image here, add a paragraph next, and a link after that.
Without HTML, there can be no web pages. So it is arguably one of the most important technologies in the world.
With HTML you can:
- Publish documents to the web that contain text, images, lists, forms, and more.
- Access web resources such as videos, or other HTML documents via hyperlinks.
- Create forms to collect information from users.
- Create documents that contain media like video, audio clips, and external web pages.
- Create an offline version of your website that works without an internet connection.
- Store data in the user's web browser to access later on.
HTML IS ONE PART OF A TRIAD OF TECHNOLOGIES
So, we have learned that HTML allows us to describe the content of a web page, but we are extremely limited in terms of interactivity.
Interactive features of web pages, such as scrolling and animation, are handled by languages like CSS and JavaScript.
HTML, CSS, and JavaScript are each one part of a triad of technologies that almost all modern websites are built from.
- HTML
- CSS
- JavaScript
In later sections, we will see how we can combine these three technologies to start building stylish and interactive web pages:
- HTML allows us to specify the content and structure of web pages.
- CSS is responsible for the styling and presentation of web pages.
- We use JavaScript to define the behavior or functionality of web pages.
These are the three core technologies you must master to become a web developer. Once you have done this, you will never lack for opportunity. You can learn all three here at Assembly.
WHERE DO WE WRITE OUR HTML CODE?
To write HTML code, we create files.
An HTML file, for example, is simply a text file saved with a .html extension.
A CSS file is a text file with a .css extension, and a JavaScript file is a text file with a .js extension.
We write our code in these files using a code editor. Visual Studio Code, Sublime Text, and Atom are three of the most popular editors used by developers today.
Below is an image of an HTML file open in Visual Studio Code:
We can also write our code in online sandbox environments like CodePen or CodeSandbox.
In CodePen, we do not need to create files. Instead, we have a series of panels that will accept code.
CodePen allows us to tinker with small sections of code quickly without needing to create a project folder locally on our computers.
HTML is written directly inside the HTML panel on CodePen, and any elements we create will render and display in the window in realtime!
Try it out below, where we have added an example paragraph to the embedded CodePen. You can edit the code in the panel on the left to display any text you would like.
If you know any other HTML elements, try changing the <p> tags to see how it affects the way the text displays.
NOTE: CodePen omits the <html>, <head>, and <body> elements. These are important to the structure of HTML, and we will certainly need them when we start writing HTML code in our code editors. But in CodePen, we can ignore these as they are built-in to the editor.
STILL TO COME IN THIS HTML SECTION
So, HTML is the perfect place to get started with web development. It is easy to understand, and you can instantly apply the skills that you acquire.
Over the next few sections, we will explore all of the fundamentals of the HTML language and look with more scrutiny at the structure of HTML pages.
We will also explore the general syntax rules that HTML follows, before delving into the many elements that web pages have. These include headings, paragraphs, links, lists, and images, to name a few.
In the next section, we will learn the syntax of HTML. Or in other words, how we write HTML.