Welcome to Learn HTML, the easiest way to learn HTML & CSS online, interactively.
- VS Code (free, recommended) - https://code.visualstudio.com/
- Atom (Free) - https://atom.io/
- JetBrains WebStorm (Commercial) - https://www.jetbrains.com/webstorm/
- Sublime Text (Commercial) - https://www.sublimetext.com/
- Notepad++ (Windows only) - https://notepad-plus-plus.org/download/v7.html
In this tutorial you won't actually need an IDE, because all coding is done online.
HTML (HyperText Markup Language) is a standard developed over the years to convey information over the internet by using "hyperlinks" - or just links as we know them today. As opposed to a PDF, an HTML page is much more dynamic in nature, letting you browse the web by clicking on links and interacting with the page. Links could take you either to a different location within the current page, or to a different page over the internet.
- An HTML page is an HTML document that defines the content of the page by using a special markup similar to XML.
- A CSS stylesheet defines the style of the HTML elements in the page. It is either embeeded within an HTML page or loaded using the tag.
We will be using a CSS framework called Bootstrap by Twitter, the most common CSS library out there today. The basic principles of a CSS library is pretty much the same - they are all based on the "grid system", which is an easy way to define the layout of an HTML page - a methodology that was developed over the years in web development.
Your first HTML Page
Let's start by creating a simple HTML page. An HTML page has the following basic layout:
<!DOCTYPE html> <html> <head> <!-- head definitions go here --> </head> <body> <!-- the content goes here --> </body> </html>
Let's start by creating a simple page that contains the phrase "Hello, World!" in the body. The page will also have
a title - that thing that shows up in the title of the tab in your browser. The
<title> element defines the title
of the HTML page.
<p> element defines a "paragraph", a block of text that has a small amount of spacing in between its top and
Notice how the tags have a start tag and an end tag denoted with a slash (
</p>). Everything in between is the content
of the tag. The content of a tag can usually have additional HTML tags within them.
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <p>This is an example of a simple HTML page with one paragraph.</p> </body> </html>
You may also copy and paste this code into a new file in your text editor or IDE, and save the file as "index.html". The "index.html" file is the default file that a web server will look for when accessing a website. After saving the file, you can double click it to open it with your browser.
Now that we know the basic structure of an HTML page, let's try it out.
- Add an HTML
<title>tag with the text "Hello, World!"
- Add a paragraph (
<p>tag) to the body with the text "Hello, World!"