Home
Print this page
HTML (Hyper Text Markup Language) is the series of elements that defines the structure of a web page. These elements are refered to as HTML elements.
1. What is an HTML Element?
An HTML element is a building block used to create web pages. These blocks can be rendered by web browsers such as google chrome, safari and firefox. In most cases, an HTML element is defined by three components: a start tag (or opening tag), some content, and an end tag (or closing tag) in the following manner:
In the example above, <tagname> is the start/opening tag and </tagname> is the end/closing tag. HTML Elements include paragraphs, small and large headings, breaklines, images, links and much more! Some examples:
The following defines a paragraph element:
The following defines one of many heading elements:
Note that space between the opening tag, content and closing tag does not matter in HTML, the following lines of code would generate the same result.
2. What is a Web Page?
A web page is an HTML document made up of multiple HTML elements which can be displayed and viewed by a web browser. An HTML document contains standard “special” HTML elements that needs to be included.
- The <!DOCTYPE html> declaration defines that the document is an HTML5 document.
- The <html> element contains all the other elements
- The <head> element contains all the meta information about the HTML page. The meta information is not displayed to the user but can be understood by the browser.
- The <body> element contains all the HTML elements that are visible to the user, it could include paragraphs, headings, images and links.
So far, our webpage is empty because there is nothing in the <body> element. Let’s edit our code to include a heading and a paragraph.
Congratulations, You built your very first webpage! but wait… how do we display it?
3. What is an IDE?
An IDE (Integrated Development environment) is a software that is used to code and build applications. Just as writers use text editors and accountants use spreadsheets, software developers use IDEs as it provides common developer tools that makes coding easier! There are a lot of IDEs available and choosing one of them is enough to get you started in HTML. Some of these IDEs include notepad++ and visual studio code.
3.1. Installing & Using Notepad++
To install Notepad++, follow the steps below.
- Visit notepad++ download page and access the first download link.
- On the download page, choose the version that is suitable for your computer.
- Go through the guided process to install notepad++ and open the application.
If the installation is successful, you will be able to open notepad++ and see the following.
To create your first html page using Notepad++, follow the steps below.
3.2. Installing & Using Visual Studio Code (VSC)
To install VSC, follow the steps below.
- Visit visual studio code’s download page and download the version that is suitable for your computer.
- Go through the guided process to install notepad++ and open the application.
If the installation is sucessful, you will be able to open VSC and see the following.
To create your first html page using VSC, follow the steps below.
4. What is a Web Browser?
A web browser is an application that allows you to access websites. Google Chrome, Firefox, Safari, Microsoft Edge and Opera are some popular examples of web browsers. To display your web page, you need to open it in the browser of your choice. To do this, you can either double click on the .html file (in our example first-page.html) or drag and drop the .html file on your web browser. If you followed all of the steps, the preview below is what you will see on your web browser.
5. It’s Good to Know!
- list of html elements
- list of IDEs