Beginners Guide to HTML

Subscribe to my newsletter and never miss my upcoming articles

What is HTML?

HTML is one of the most widely used languages on the web to develop web pages.

HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages.

HTML is a markup language i.e., it is a way for the computers to communicate with each other, to control how text is processed and presented. A website will be opened on various systems with different browsers and the markup language ensures that the website looks the same in all the systems with the help of its various tags.

History of HTML

HTML is a markup language that is used by the browser to manipulate text, images, and other content to display it in the required format. HTML was created by Tim Berners-Lee in 1991.

HTML VERSIONSYEAR
HTML 11993
HTML 21995
HTML 3January 1997
HTML 4December 1997
HTML 52014

HTML Structure

HTML tags have two main types: block-level and inline tags.

  1. Block-level elements take up the full available space and always start a new line in the document.

    Headings and paragraphs are an example of block-level elements.

  2. Inline elements only take up as much space as they need and don’t start on a new line on the page. They usually serve to format the inner contents of block-level elements.

    Images and links are an example of inline elements.

The three block-level tags that you need for your HTML document are <html>, <head>, and <body>.

  • The <html></html> tag is the highest level element that encloses all the code.

  • The <head></head> tag holds meta information such as the page’s title, charset, metadata, etc. All the HTML elements that can be used inside the element are: <style>, <title>, <base>, <noscript>, <script> and <meta>.

  • The <body></body> tag encloses all the content that appears on the page. It is used to enclose all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

How does HTML work?

HTML documents end with the .html or .htm extension. You can view it using any web browser. The browser reads the HTML file and renders the content for users to view it.

Each HTML page consists of a set of tags or elements which are known as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Fundamentals of HTML

To build a webpage with HTML, you need to know about some of the basics of HTML such as:

Elements vs Tags

HTML uses predefined tags and elements which tell the browser about content display property. If a tag is not closed then the browser applies that effect till the end of page.

Elements have a starting tag, some content, and a closing tag.

In this case, we use the p starting and closing tags to create a paragraph element.

<p>A paragraph of text</p>

Attributes

The starting tag of an element can have special snippets of information we can attach, called attributes.

Attributes have the key="value" syntax:

<p class="a-class">Some Text</p>

We can have multiple of them:

<p class="a-class" id="an-id">Some More Text</p>

The class and id attributes are two of the most common you will find used.

Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading whereas <h6> defines the least important heading:

<h1>First Heading</h1>
<h2>Second Headng</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

Paragraphs

HTML paragraphs are defined with <p> tags. You can add as many paragraphs as you want with this tag.

<p>First Paragraph</p>

HTML links are hyperlinks. You can click on a link and redirect to another document or webpage. Links are defined with <a> tags:

<a href="https://jatinrao.dev/">Jatin's Blog</a>

Images

Images are required to beautify or depict complex concepts in simple ways on your web page. HTML images are defined with <img> tags.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="girl_image.jpg" alt="Girl in a Jacket">

Lists

HTML provides three ways to specify lists of information. All lists must contain one or more list elements.

  • <ul>: Unordered list sorts items using plain bullets.

  • <ol>: Ordered list uses different schemes of numbers to list your items.

  • <dl>: A definition list arranges your items in the same way as they are arranged in a dictionary.

Unordered List

This list is created by using HTML <ul> tag:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Ordered List

This list is created by using <ol> tag:

<ol>
<li>Coffee</li>
<li>Juice</li>
<li>Tea</li>
</ol>

Definition List

The definition list is the ideal way to present a glossary, list of terms, or other name/value list. It is created by using <dl> , <dt> and <dd> tags:

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

Tables

An HTML table is defined with a <table> tag.

  • Rows are defined with <tr> tags.
  • Headers are defined with <th> tags
  • Table Cells are defined with <td> tags.
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jatin</td>
        <td>15</td>
    </tr>
    <tr>
        <td>James</td>
        <td>25</td>
    </tr>
</table>

White space

In HTML, even if you add multiple white spaces into a line, it’s collapsed by the browser’s CSS engine.

<p>Some Text</p>

is the same as this:

<p>        Some Text</p>

Resources:-

Edidiong Asikpo's photo

This is a well-explained article. Thanks for sharing.

Jatin Rao's photo

Thanks Edidiong AsikpoπŸ™‚

It looks like many people liked it & I kept it in backlog thinking It's not that good πŸ˜†

Ameen's photo

Huge and great article :)

velu [ Vijay ]'s photo

Great article.

Jatin Rao's photo

Thanks, Vijay for Support!

Daniel Hernandez's photo

Cool stuff buddy :)

Lauryn's photo

Great article Jatin. Easy to understand definitely worth a recommendation.

Jatin Rao's photo

That means a lot to me Lauryn 🧑

Amarachi Emmanuela Azubuike's photo

This is beautiful Jatin. I'll definitely share this with beginners as it will be massively helpful to people who are just starting out.

Jatin Rao's photo

That'll be so great of you Emmanuela Azubuike πŸ’š

vxhLOGS's photo

This is really the most I have read about HTML, never tried to pick up on the details before reading this πŸ‘ great summarisation, I've learnt from this.

Jatin Rao's photo

That's so awesome of you vxhLOGS

Tapas Adhikary's photo

Hey Jatin Rao,

Very detailed. Liked the way you have explained it. Nice!

Jatin Rao's photo

It's awesome to hear that you liked it Tapas Adhikary

Bolaji Ayodeji's photo

Thanks for writing this amazing article Jatin! 🀩

Jatin Rao's photo

Glad you liked it Bolaji AyodejiπŸ˜‰

Kishore's photo

Minor correction: Your Img 'src' property is incorrect. <img src="<img src="gir_imagel.jpg" alt="Girl in a Jacket">

Jatin Rao's photo

Thanks Kishorefor pointing it out 😬

I've updated it 😊

Obi Zim's photo

This is great❀❀

Ruth Ikegah's photo

IMO, this is a full tutorial. Nice work Jatin!

Jatin Rao's photo

Thanks coming your way Ruth πŸ’›

Subha Chanda's photo

Great article! 🀩 Thanks for sharing! πŸ˜ƒ

Jatin Rao's photo

Glad you liked it Subha Chanda🌻

Zainab Abubakar's photo

Nice Article. Thanks for sharing.

Jatin Rao's photo

Glad you liked it Zainab Abubakar😊

Garvit Motwani's photo

Really Wonderful Article

Jatin Rao's photo

Thanks Garvit 😁

Divya Kelaskar's photo

Nice & detailed one πŸ€“ πŸ‘

Jatin Rao's photo

Glad you liked it Divya πŸ™‚