HTML for absolute beginners

Share this article

Everything you see on the Internet is made with HTML. Think of HTML like Lego bricks: they are the building blocks of websites and web pages that we interact with daily.

HTML (HyperText Markup Language) provides a structure that all web pages adhere to. It tells browsers what should be displayed, where, and in what order. If you’re fascinated by how web pages work, this guide is your first step toward creating your very own webpage.

What is HTML?

As mentioned earlier, HTML, or HyperText Markup Language, is the foundation of the World Wide Web. It structures everything you see online. Almost all websites—from the simplest blogs to the most complex applications—use HTML to some degree.

In fact, a survey states that over 94% of websites on the Internet are built using HTML.

Why learn HTML?

Build your own website: Whether it’s a personal blog, a portfolio, or an online store, HTML empowers you to bring your vision to life.
Understand the web: Grasp the fundamentals of how browsers interpret code to display web pages, giving you insight into the digital world you use every day.
Career opportunities: HTML is the cornerstone of web development, forming the basis for learning advanced technologies like CSS, JavaScript, and modern frameworks.
Versatility: Knowing HTML opens doors to roles in design, development, SEO, and content management.

Getting started with HTML

Setting up your environment

Most programming languages require setting up complex environments, but HTML is beginner-friendly. All you need is a simple text editor and a browser.

But why not simplify things further? Use JDoodle, an online text editor that allows you to code directly in your browser. Here’s how to get started with JDoodle:

Visit the JDoodle homepage and click on “Let’s Code”.
Select HTML as your programming language.
Click on “Open Editor”.

You’re now ready to write and execute your HTML code without downloading or installing anything!

Understanding Tags and Attributes

HTML is built using tags and attributes.

Attributes

Attributes provide additional information about a tag and are written inside the opening tag.

Example:

<img src="image.jpg" alt="An image" />

src specifies the source of the image.
alt provides alternative text if the image cannot load.

Think of tags as containers and attributes as enhancements that add extra details.

Creating your first webpage

Every HTML file follows a specific structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is my first HTML paragraph.</p>
  </body>
</html>

Breakdown of the structure

The structure of an HTML document provides the blueprint for how a browser interprets and displays a webpage. Here’s a deeper look at the essential components:

<!DOCTYPE html>

This declaration informs the browser that the document is written in HTML5, the latest version of the language. It ensures compatibility and helps the browser render the page correctly. Without this declaration, older browsers might switch to “quirks mode,” leading to inconsistent rendering.

<html>

This is the root element that wraps all other HTML code. Think of it as the container for your webpage’s content and metadata. It also allows for language attributes, like lang=“en”, which specify the language of the document for accessibility and SEO purposes.

<head>

The <head> element houses information about the webpage that isn’t directly visible to users but is vital for browsers and search engines. Here’s what it often includes:

<title>: Defines the title displayed on the browser tab or search engine results.
Metadata: Tags like <meta charset="UTF-8"> ensure proper character encoding.
Links: Stylesheets (<link>), favicon (<link rel="icon">), or external resources.
Scripts: JavaScript files (<script>), usually for pre-loading functionality.

Properly configuring the <head> ensures faster loading, better SEO, and accessibility compliance.

<body>

The <body> element contains all the content users see on the webpage, from text to multimedia.

Text: Paragraphs, headings, and lists.
Media: Images, videos, and audio.
Interactive elements: Buttons, forms, and links.

The <body> is where you implement tags to bring your content to life. With JDoodle, you can quickly experiment with <body> content and observe how changes appear in real time.

Essential HTML tags for beginners

Here’s a quick rundown of commonly used tags:

Tag	Description	Example
`<h1>` to `<h6>`	Headings (1 is largest, 6 is smallest)	`<h1>Main Heading</h1>`
`<p>`	Paragraphs	`<p>This is a paragraph.</p>`
`<a>`	Hyperlinks	`<a href="https://example.com">Visit</a>`
`<img>`	Images	`<img src="image.jpg" alt="Image">`
`<ul>`	Unordered lists	`<ul><li>Item 1</li></ul>`
`<ol>`	Ordered lists	`<ol><li>Item 1</li></ol>`

Adding style with CSS

Now HTML isn’t what makes websites look interesting. We need CSS (Cascading Style Sheets) to make your webpage visually appealing. For example:

body {
  background-color: lightblue;
}
h1 {
  color: navy;
}

This would make your website have different colors and you can even choose the style of your website.

Conclusion

HTML opens up a world of creativity and possibilities, and JDoodle is your ultimate companion on this journey. With just a browser, you can start coding, experimenting, and building your first webpage today. Dive in, and let JDoodle transform your learning experience!