Lahitan

Posted on Oct 19, 2023

A Guide to Mastering HTML as a beginner

#html #beginners #developer #newbie

Introduction

Building a website is easy, the first language you need to learn is HTML.

By the end of this article, you should have a basic knowledge of HTML,which you need to build a website.

What is HTML?

Hyper Text Markup Language(HTML), is the first building block of a webpage. The markup tells the web browser how to display text, images and videos on a webpage.

Brief History of HTML

HTML has been around for a very long time, it was written by a British scientist named Berners-Lee. HTML has gone through different versions

HTML 1.O

It was released year 1993.
It had minimal features and functionality.
Users could only use twenty elements.

HTML 2.0

It was released year 1995
The Users could change background colors, text-colors, and other formatting.

HTML 3.0

It was released year 1997.
The Users got friendly with HTML and started using it more frequently.
Improved tables, text formatting, and image alignment.

HTML 4.0

It was released year 1999.
They added features like frames for dividing the browser window into sections.
The Users had more control.
Improved accessibity.
Implemented support for external styling.

HTML 5.0

It was released year 2014.
It is the current and latest version.
It works even when not connected to the internet.
Support of multimedia ( audio and video).
Support of Canvas for graphics.
Improved forms.

What can HTML Do?

HTML has been used widely, and can do variety of things which includes:

HTML is used for creating pages, which is displayed on the World Wide Web(www).
HTML is used to navigate the web.
HTML is used for including images,and videos to a web page.
HTML5 allows users to browse a website, while offline by retaining data on the user's machine. ( This allows your web application to continue functioning even after connection drops.
HTML5 can bring reality of game development possible.

How Does HTML Works

HTML uses tags enclosed in (<>) to define elements like headings. It start with an opening tag (<>) and ends with a closing tag (</>).

The tags provides instructions to the web browser on how to display the content.

Let's Talk About Tags

Tags are enclosed in angle brackets <tag name>, each tag defines different parts of the web page, and there are lots of tag used in HTML.

Basic HTML Tags

To build a website, there are some tags to get familiar with, which I would be dividing into groups.

HTML Tags

Doctype: It is used to define the document type, it instructs the website to use the latest version of HTML.
<!DOCTYPE html>
Html: It is the roof of all codes, are wrapped around it.
<html></html>
Head: The head tag comes next, it doesn't contain any text, but contains tags like title, meta, styles, and links.
<head></head>
Title: This tag gives title to your web page, it comes under the head tag. Only text can be written inside this tag.
<title></title>
Body: The content of the website is written under the body tag, and it comes after the head tag.
<body></body>

Sematic Tags for Structure

Header: This define the header of the web.
<header></header>
Nav: This defines container for navigation.
<nav></nav>
Main: This specifies the main page constant and should be unique.
<main></main>
Section: This defines a section in a web.
<section></section>
Article: This is the part containing information about the web.
<article></article>
Aside: This is often placed as a side bar in a document.
<aside></aside>
Footer: This is the last part of the web page.
<footer></footer>

HTML Tags for Text

Heading Tag: This is used to create heading, and there are six heading tag in HTML.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph Tag: This is used to define paragraphs in HTML
<p></p>
Anchor Tag: This is used to define link, it turns hyper-text to hyperlink.

<a href ="https://www.gmail.com">Gmail</a>

Note: The Gmail in between the anchor tag would appear as a link.

Image Tag: This tag is used to insert an image in HTML documents

<img scr=" cat.png" alt=" cat image">

List Tag: There are two types of list tag.

Unordered List: This is an unordered list in HTML.
<ul></ul>
Ordered List: This is an ordered List in HTML.

Note: The <li></li> tag is used to create the list item in between them.

Unordered list
<ul>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ul>

Ordered list
<ol>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ol>

HTML Tags for Table

Table Tag: This is used to define the table.
<table></table>
Table Body: This is used to define the body of a table.
<tbody></tbody>
Table Head: This is used to define the head of the table.
<th></th>
Table Row: This is used to create row in the table.
<tr></tr>
Table Column: This is used to define the column or a cell.
<td></td>

Other HTML Tags

Horizontal Tag: This is used to create horizontal lines.
<hr>
Line Break Tag: This is used to insert a line break.
<br>
Note: The horizontal, and line break tag doesn't require a closing tag.
Button Tag: This is used to create buttons.
<button></button>
Div Tag: This is used to create division.
<div></div>
Span Tag: This is used to mark up a part of a text.
<span></span>

Inline and Block-level Elements

Inline Elements: They only take up the width necessary, and does not start on a new line.
Examples of inline HTML tags are <a>, <span>, <img>, <button>, and more

Block-level Elements: They always take up the full width available, and always start on a new line.
Examples of block-level HTML tags are <p>, <ol>, <ul>, <article>, <div>, and more

Comment in HTML

Comments is done using the tag

<!--This is a comment-->

Things to know about comments

Comment tag is used to insert comments in the source code.
Comments are not displayed in the browser.
Comment makes your code easy to read and edit.
Comment can be used to explain your code.

Mistakes to Avoid as A Beginner

Always start with the <!DOCTYPE html>, this would let the browser know, you are working with HTML5.
Always close tags, that requires closing.
Use alt attribute, when using the image tag.
Nest HTML tags properly.
Ensure to use be Sematic tag.

Conclusion

HTML is a language, used to structure text, images, tables, and so on, on the website.

DEV Community