A BEGINNER'S GUIDE TO HTML FUNDAMENTALS


By gobrain

HTML, or hypertext markup language, is a standard markup language for creating web pages, which introduced in 1989.

This guide focuses on the basics of HTML to help you understand its structure and features with ease. Before you start, let's tell a bit this article's intent.

This article will focus core of the HTML beacuse it is not necessary to thoroughly grasp a new programming language or tool from the start, as the challenges you encounter while working on projects can be easily overcome through searching, allowing for faster progress.

So, let's get started with what HTML is

What is HTML

To put it simply, HTML instructs web browsers on what to display on a page, such as text, images, or links, using elements written in angle brackets and defined by opening and closing tags.

HTML have mainly two root parts, head and body tag. Let's discover them.

HTML Main Structure

A HTML document is composed of a root <html> tag, and two sections, <head> and <body>.

The <html> tag defines the document as a HTML file, while the <head> tag contains information related to the current page, such as the document's title, and the <body> tag contains the elements that will be displayed on the page.

HTML file main structure including head and body tags

HTML Elements

A browser understand what to display on page through elements which is defined a open and close tag. HTML offers a wide variety of elements that can be used to create a website, but some of the most commonly used elements in a page are links, images, text, and container elements.

An element can have certain attributes that control its behavior. For example, a <a> link tag can have an 'href' attribute, which tells the browser where to go when the link is clicked.

element structure in HTML

# Heading

Heading elements is defined as h1, h2... h6 according to the importance of its content. For example, the <h1> tag can be used for title while <h2> and <h3> tags can be used for subtitles.

HTML heading (h) elements

# Paragraph

A paragraph element is defined as <p> tag. As its name says, it is used for text content to display on page.

HTML paragraph tag

HTML Elements: Image

The <img> tag defines an image element, which is used to display images on a page. Unlike most elements, which are defined using both an opening and closing tag, an image tag can be defined using only one tag, as shown below.

As for its attributes, the two most commonly used attributes for an image tag are src and alt. The src attribute specifies the source of the image, while the alt attribute provides alternative text for the image.

HTML image (img) tag

# Link

The <a> tag, which stands for link, is used to create a hyperlink to either an internal or external page. The <a> tag, used with its "href" attribute, specifies the URL or route of the link.

A hyperlink, defined using the <a> tag, can include text or an image, which when clicked by a user, redirects them to another page.

html anchor(a, link) tag

# Div

The <div> element is a container that is used for grouping elements together. With the help of <div> element, using CSS and JavaScript, the appearance or behavior of grouped elements can be specifically altered.

HTML div element

Styling The HTML Web Page With CSS

Each element in a HTML document has a default appearance, including size, color, placement, etc. This visual appearance of elements can be modified using CSS (Cascading Style Sheets).

To style elements in an HTML document, a style element must be included, which can be done in three ways: as an external stylesheet, an internal stylesheet, or inline styles.

Include css to html

Adding Functionality To The HTML Web Page With JavaScript

In addition to modifying the appearance of elements, functionality can also be added to them using JavaScript, a programming language.

To achieve that, you need to also include a javascript code to your HTML file which can also can be done in two ways: as an external script and internal script.

Add javascript your html file with script tag

Conclusion

This guide has discussed the basics of HTML for beginners, which is introduced in 1989 and is a standard markup language for creating web pages.

Thank you for reading.