A Quick Easy Guide to HTML5

Have you ever wondered about how websites function? You click on a link, and the screen loads with words, videos, and images. It’s not magic, it’s HTML. Any website on the internet is built by using it. If you are curious to find out what it is, why it is essential, and how it operates, then this blog is for you. When you’re finished, you’ll know what you need to code in confidentially.

What is HTML?

HyperText Markup Language is the standard markup language for making websites. HyperText Markup Language is the main markup language for websites making up for more than 95% of all webpages. It is essentially a blueprint, or the instructions for a web browser (such as Chrome, Firefox, Safari, etc.) It describes to the browser what to display (text, images, videos, links, etc.) and how to do so.

Basically, what happens is when you give your search engine the URL of a web page and hit enter, your browser retrieves the associated HTML file from the web server and translates it to render the output to you. It provides context for every word you read, every video you watch, and every button you click.

One crucial thing to remember is that HTML only deals with the structure of a web page. It does not mandate the appearance of the page like CSS or interactivity like JavaScript. HTML informs the browser that this is a headline, this is an image or a list, and the browser is able to render that content in an intelligible manner.

To go into more depth, “HyperText” is the content on a web page that references another web page. You likely know these as hyperlinks, such as this one. Hyperlinks can open a PDF, mail, or interactive media, like a video or an audio file. The use of hypertext to connect information was groundbreaking in shaping the internet as we know it today. When you browse the internet, you’re essentially engaging with hyperlinks that direct you to various web pages. Even when these pages are intricate and interactive, such as those on a social media platform or a web app, fundamentally, they are all documents designed to present information.

The term “Markup” in HTML signifies the annotations within the HTML file that mark up the page. These annotations are not visible on the web page but rather instruct the browser on how to display the document to visitors.

The easiest part of the acronym to understand is “Language.” Like any language, it has its own alphabet and is used for conveying information. It serves as a coding language, differentiating it from normally spoken languages such as English or Spanish. The next step is to understand how this language is used in coding.

Writing in HTML

Once you grasp the fundamental structure and tags, coding becomes straightforward and uncomplicated. HTML pages consist of nested elements that establish the layout and information of a website. Every element is encompassed by opening “<tag>” and closing “</tag>”, with the content positioned in between.

All content in a document is enclosed within “tags,” serving as containers for various types of content on the page. Each tag comprises an opening part, such as <h1>, and a corresponding closing part like </h1>. The closing tag always includes a forward slash “/” before the tag name. For example, <h1>Welcome to My Website </h1>would be a closing tag.

Making Your First Web Page

The basic structure for a document is this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Hello World</h1>
<p>My first paragraph.</p>

</body>
</html>

Let’s review the elements below:

<!DOCTYPE html>: This tells the browser that the document is using HTML5.

<html>: This tag contains everything on the webpage. All HTML text should go inside this main <html> tag.

<head>: This section includes information about the webpage, like the title you’ll see on the browser tab. This information isn’t directly displayed on the page.

<title>: The content inside the <title> tag appears as the title of the browser tab.

<body>: This is where all the visible content goes, such as text, images, and links.

Coding in the Real World

Anyone aiming for a career in web development or programming can benefit from learning. Moreover, this is a super useful tool for anyone who is into learning how websites work. Markup is not the only language that developers use to create websites (more on this later), yet it is treated as one of the base languages. It forms the skeletal frame for all the other web technologies that we use to build sites nowadays.

Nearly every website you visit uses these three main languages:

HTML: To set content.
CSS: To create content (colors, fonts, layout, etc.).
JavaScript: To add interactivity (such as buttons, animation, pop-ups).

Where to Go from Here?

Once you know the basics of this guide, then you can dig deeper by studying more advanced elements like tables, forms, and lists which are the best for organizing and showing various types of information. The next course of action is to learn CSS, which will give you the ability to mold the look of your website according to your taste. You should also learn HTML5 which is the newest version of HTML with features that allow you to embed videos, add animations to your site, and create more interactive and dynamic websites.

Final Thoughts on HTML

HTML is generally a must-have skill for anyone who is into web development, and it is a very good way of learning how the web works. Using it will drastically kickstart and improve your journey in creating websites. It might be a basic language, but it’s extremely powerful, as you will be equipped with the skills required to make a webpage from scratch after you have learned how to use it. Also, make sure to use applications like Visual Studio Code or Notepad.

You can start by launching a text editor, then make your experimental journey with different tags, and see your journey drive ahead. Be it a personal blog, a resume, or a fun hobby project you are just a few lines away from creating something on the web! If you liked what I wrote, please check out my blog!