Do you want to become a skilled web developer and create beautiful websites? As a web developer, you’ll need to understand the basics of coding and markup language. Of all markup languages, HTML is the standard. HTML forms practically every web page on the Internet.
HTML is the skeleton of all web pages and its most basic building block. It’s often the first language learned by developers, marketers, and designers and is core to front-end development work.
HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see HTML in a panel of your screen.
HTML stands for HyperText Markup Language:
- A markup language is a computer language that defines the structure and presentation of raw text.
- In HTML, the computer can interpret raw text that is wrapped in HTML elements.
- HyperText is the text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.
Anatomy of an HTML element
HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written. The diagram above displays an HTML paragraph element. As we can see, the paragraph element is made up of:
- An opening tag (<p>)
- The content (“Hello World!” text)
- A closing tag (</p>)
A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.
Let’s quickly review each part of the element pictured:
- HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains.
- HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
- Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
- Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.
- Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
Let's look at some basic tags that are used in HTML to give a better idea about how HTML works!
Add images and text to your webpage with body tags
One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed on the screen. Here’s what opening and closing body tags look like:
Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.
<body> <p>What's up, doc?</p> </body>
Add metadata to your webpage for SEO with head tags
We can add metadata to a webpage by adding a <head> element. The <head> element goes above our <body> element.
Metadata is information about the page that isn’t displayed directly on the web page. Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself.
The opening and closing head tags typically appear as the first item after your first HTML tag:
Here is an exercise for you to try! You can use this HTML editor https://jsfiddle.net/
- Type your name in between <h1> Your Name </h1>
- Add a body to your web page using the <body> element. Type <body>Have a great day!</body>
Konfinity’s online coding courses, curated by our team from IIT Delhi, are trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more. We'll help you launch a lucrative tech career and get you started by helping you get placed in a high paying job. No coding background required. You can learn more about how HTML is used to create software applications in our Web Development Course