Mastering the Basics of HTML: A Beginner's Guide

Getting started in web development can be a challenging, but also rewarding journey. There are many different tools, technologies, and frameworks to learn, and it can be overwhelming to know where to start. However, with a little guidance and a lot of practice, you can become a proficient web developer in no time.

As a newbie in web development, one very important thing you need to understand is what environment you need to write your first few lines of code, if you are worried/unsure about what code editor to use, I will recommend you install a Visual Studio Code in your Windows, macOS or Linux. Download here

A brief Intro to HTML

HTML, short for Hypertext Markup Language, is the backbone of web development, it provides the structure and layout for all the text, images, and other multimedia elements that make up a web page and is also essential for creating structured and well-formatted web pages.

In this article, you will learn the comprehensive guide to understanding HTML, covering the basics of web development and some of the most important tags and elements that you need to know to create your web pages!

HTML as the skeleton of a webpage

HTML Structure

The structure of an HTML document is simple and easy to understand. It consists of three main parts which include;

1. Head
2. Body
3. Doctype

The head: contains information about the document, such as the title, which is displayed in the browser's title bar or tab.

The body: contains the actual content of the web page, such as;

• Text

• Images

• Links

The doctype: is a declaration that tells the web browser which version of HTML the document is written in.

A structure of an HTML

After learning about these structures, you move on to understand what elements are, and how they make up the various layouts/component of a web page.

What are Elements

Elements are building blocks of an HTML document and are used to create the structure and layout of a webpage. Elements are enclosed in < tags > and can contain other elements, as well as text and attributes.

Example of an HTML element

One of the most important elements of an HTML document is the tag. A tag is a keyword enclosed in angle brackets, such as < html > or < body >.

Tags are used to describe the type of content that is contained within them, Some common tags include:

< html >: The root element that contains all other elements on the page.

< head >: Contains metadata about the document, such as the title and link to CSS stylesheets.

< body >: Contains the document's content displayed in the web browser.

< div >: A container for HTML elements, used for grouping and applying CSS styles.

< p >: Defines a paragraph of text.

< h1 >: heading tag is used to define the headings of a page.
There are 6 heading elements which include; h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.

< a >: Defines a hyperlink to another web page or a specific location on the same page.

< img >: Displays an image on the web page.

< ul >: Creates an unordered list of items.

< ol >: Creates an ordered list of items.

< li >: Defines a list item, used within < ul > and < ol > elements.

There are many other tags like < header >, < nav >, < footer >, < main >, < article >, < section >, < button >, < form >, < label >, < input >, < select >, < textarea >, < pre >. Learn about the various HTML tagshere

Another important element of HTML is the attribute. Attributes provide additional information about an element and are added to the opening tag of an element.

Some common attributes include;

src: which is used to specify the source of an image.

href: which is used to create a link to another web page.

class: which is used to specify a class for an element, allowing you to apply CSS styles to it.

As you become more familiar with HTML, you'll find that you can create more advanced web pages that are more interactive and engaging. Read more about attributes here

<img src="img_girl.jpg">
<a href="https://www.w3schools.com/html/html_attributes.asp"></a>
<p class="paragraph"></p>

In conclusion, HTML is the basic building block of web pages and essential to understanding for a web developer. It provides the structure and layout for all the text, images, and other multimedia elements that make up a web page. Understanding the basics of HTML is crucial for anyone who wants to create web pages. With a solid understanding of HTML, you'll be able to create simple web pages and advance to more complex designs as your skills improve.