HTML For Beginners: A Whole Knowledge Of HTML You Must Read

Share With Friends

Introduction

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the layout of a webpage using a system of tags, such as headings, paragraphs, images, and links. HTML is essential for web development, providing the foundational structure for all websites and enabling browsers to display content in an organized way.

When Was HTML Built?

HTML (HyperText Markup Language) was created in 1991 by Tim Berners-Lee, a British computer scientist. The development of HTML was part of his larger project to create the World Wide Web (WWW). In 1989, Berners-Lee proposed the idea of a universal information space to facilitate the sharing of documents across different computers, and HTML was one of the key technologies he developed to realize this vision.

The first version of HTML, HTML 1.0, was released in 1991. This early version of HTML was relatively simple and was designed to allow the easy sharing of text-based documents with hyperlinks to navigate between them.

Where Was HTML Built?

HTML was developed at CERN (European Organization for Nuclear Research), which is located near Geneva, Switzerland. At that time, Tim Berners-Lee was working at CERN, where he needed a way to organize and share scientific documents and research across different computers and institutions.

CERN provided the environment where Berners-Lee could experiment and develop the necessary technologies for the World Wide Web, including HTML, the first web browser, and the first web server.

Significance

The creation of HTML at CERN laid the foundation for the modern internet, making information accessible and shareable across the globe. This innovation fundamentally changed how people interacted with information, leading to the explosive growth of the World Wide Web.

Here’s a brief overview of each major version of HTML

NO	Versions	Purpose	Features	Invented by
1	HTML 1.0 (1991)	To create simple, text-based documents with hyperlinks.	Basic structure for web pages with text, headings, and links.	Tim Berners-Lee
2	HTML 2.0 (1995)	Made HTML the official web language and allowed more interactivity.	Standardized HTML, introduced forms and basic text formatting.	Tim Berners-Lee and the IETF
3	HTML 3.2 (1997)	Allowed more complex page layouts and better multimedia integration.	Added support for tables, styles, and multimedia elements.	W3C
4	HTML 4.01 (1999)	Improved structure and interactivity with JavaScript support.	Emphasized separating content from design (CSS) and introduced scripting.	W3C
5	XHTML 1.0 (2000)	Ensured better data consistency and compatibility with XML.	XML-based version of HTML, with stricter syntax rules.	W3C
6	HTML5 (2014)	Improved interactivity, multimedia, and web applications without plugins.	Introduced new semantic elements, multimedia support, and APIs.	WHATWG and W3C

Importance of Learning HTML

HTML is the foundation of web development, as it allows you to create and structure web pages. Learning HTML is essential for building websites, organizing content, and understanding how the web works. It also serves as the starting point for learning more advanced web technologies like CSS and JavaScript.

Time to Learn HTML

For beginners, it usually takes 1 to 2 weeks to learn the basics of HTML, including creating simple pages with headings, paragraphs, and links. To reach an advanced level, where you can create complex and interactive websites, it may take 3 to 6 months of consistent practice and learning.

What are HTML Tags?

HTML tags are the building blocks of web pages. They are used to structure content on the web. Tags are enclosed in angle brackets (< >). Most tags come in pairs: an opening tag (e.g.,) and a closing tag (e.g., ). The closing tag is the same as the opening tag but with a slash before it (/). Tags define different elements like headings, paragraphs, images, links, etc.

Example:

<p>This is a paragraph.</p>

In this example,

In this example, <p> is the opening tag, and </p> is the closing tag. The content "This is a paragraph" is placed between the tags.

What are HTML Attributes?

Attributes provide additional information about an HTML element. They are added to the opening tag and are written as a key-value pair. Attributes define things like the source of an image, the link destination, or the alignment of text.

Example:

<a href="https://www.example.com">Click here to visit</a>

Here, href is an attribute of the <a> (anchor) tag, and "https://www.example.com" is its value. The href attribute tells the browser where to go when the link is clicked.

Most Used HTML Tags

Here are some of the most commonly used HTML tags:

1. <html>: The root element that contains the entire HTML document.

<html>...</html>


2. <head>: Contains meta-information about the document, like title and links to stylesheets.

<head>
  <title>My Web Page</title>
</head>


3. <title>: Sets the title of the web page (shown in the browser tab).

<title>My Web Page</title>


4. <body>: Contains the visible content of the web page.

<body>
  <h1>Welcome to My Web Page</h1>
</body>


5. <h1>, <h2>, ..., <h6>: Heading tags used to define headings of different levels.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>


6. <p>: Defines a paragraph.

<p>This is a paragraph of text.</p>


7. <a>: Creates a hyperlink.

<a href="https://www.example.com">Visit Example</a>


8. <img>: Embeds an image in the web page.

<img src="image.jpg" alt="Description of the image">


9. <ul> and <li>: Used for creating unordered lists (bulleted lists).

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>


10. <ol> and <li>: Used for creating ordered lists (numbered lists).

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>


11. <div>: A container tag used to group elements together.

<div>
  <h1>Title</h1>
  <p>Paragraph text.</p>
</div>


12. <span>: A tag used to style a section of text inline.

<span style="color: red;">This text is red</span>

Functions Included in HTML

HTML’s primary function is to structure and organize content on the web. Some key functions include:

Structuring content: HTML allows you to organize text, images, videos, and other elements into readable and meaningful formats.

Creating hyperlinks: Using the <a> tag, you can link to other pages or websites.

Embedding media: HTML can embed images, videos, and audio files into web pages using tags like <img>, <video>, and <audio>.

Creating forms: HTML provides form elements like <input>, <textarea>, <button>, etc., to collect user data.

Styling content: While CSS is used for detailed styling, HTML allows you to include inline styles or link to external stylesheets.

Example of HTML with Tags, Attributes, and Functions:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph with an <a href="https://www.example.com">example link</a>.</p>
    <img src="image.jpg" alt="Description of the image">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

In this example:

Tags like <h1>, <p>, and <a> are used to structure the content.

Attributes like href (for links) and src (for images) provide additional details about the content.

The functions of HTML, such as creating hyperlinks, displaying images, and structuring content, are demonstrated.

Here is a list of common HTML tags that are frequently used in web development. It includes both structural tags and content-related tags:

Structural Tags

1. <html> – Defines the root of the HTML document.


2. <head> – Contains metadata and links to external resources (e.g., stylesheets, scripts).


3. <title> – Specifies the title of the document (appears in the browser tab).


4. <body> – Contains the visible content of the document.


5. <header> – Represents introductory content or navigational links.


6. <footer> – Defines the footer section of the document.


7. <section> – Represents a section of content.


8. <article> – Defines independent content, like a blog post or news article.


9. <aside> – Represents content that is related but separate from the main content (e.g., sidebars).


10. <nav> – Defines a section for navigation links.



Text Formatting Tags

1. <h1> to <h6> – Define headings, with <h1> being the largest and <h6> the smallest.


2. <p> – Defines a paragraph.


3. <br> – Inserts a line break.


4. <hr> – Creates a horizontal rule (line).


5. <strong> – Represents important text (bold).


6. <em> – Represents emphasized text (italic).


7. <b> – Bold text.


8. <i> – Italic text.


9. <u> – Underlined text.


10. <mark> – Highlights text.


11. <small> – Makes text smaller.


12. <del> – Represents deleted text (strikethrough).


13. <ins> – Represents inserted text (underlined).


14. <sub> – Subscript text.


15. <sup> – Superscript text.



Grouping Tags

1. <div> – Defines a division or section of content.


2. <span> – Defines a small section of text or inline element.


3. <blockquote> – Defines a block of quoted text.


4. <q> – Defines a short inline quote.


5. <pre> – Defines preformatted text.


6. <code> – Represents code text.


7. <address> – Defines contact information.


8. <figure> – Represents content like images, diagrams, and charts.


9. <figcaption> – Provides a caption for a <figure> element.



Linking and Navigation Tags

1. <a> – Defines a hyperlink.


2. <link> – Defines the relationship between the document and an external resource (used for linking to stylesheets).


3. <nav> – Defines navigation links.


4. <area> – Defines clickable areas inside an image map.


5. <menu> – Represents a list of commands or options.



List Tags

1. <ul> – Defines an unordered (bulleted) list.


2. <ol> – Defines an ordered (numbered) list.


3. <li> – Defines a list item (used inside <ul> or <ol>).


4. <dl> – Defines a description list.


5. <dt> – Defines a term in a description list.


6. <dd> – Defines the description of a term in a description list.



Media Tags

1. <img> – Embeds an image.


2. <audio> – Embeds audio content.


3. <video> – Embeds video content.


4. <source> – Specifies multiple media resources for <audio> and <video> elements.


5. <track> – Specifies text tracks (like subtitles) for video or audio.


6. <iframe> – Embeds another HTML page within the current page.


7. <object> – Embeds an external resource, like a flash animation.


8. <embed> – Embeds external content, like a plugin or multimedia.


9. <picture> – Allows different images to be displayed based on different conditions.



Form Elements

1. <form> – Defines a form to collect user input.


2. <input> – Defines an input field (e.g., text, password).


3. <textarea> – Defines a multi-line text input field.


4. <button> – Defines a clickable button.


5. <select> – Defines a drop-down list.


6. <option> – Defines an option in a drop-down list.


7. <label> – Defines a label for an input element.


8. <fieldset> – Groups related elements in a form.


9. <legend> – Defines a caption for the <fieldset> element.


10. <datalist> – Defines options for input elements.


11. <optgroup> – Groups related options in a drop-down list.


12. <meter> – Represents a scalar measurement within a known range (e.g., a gauge).


13. <progress> – Represents the progress of a task (e.g., a loading bar).



Table Tags

1. <table> – Defines a table.


2. <tr> – Defines a table row.


3. <th> – Defines a table header cell.


4. <td> – Defines a table data cell.


5. <thead> – Groups header content in a table.


6. <tbody> – Groups body content in a table.


7. <tfoot> – Groups footer content in a table.


8. <caption> – Defines a table's caption.


9. <col> – Specifies column properties in a table.


10. <colgroup> – Groups columns to apply properties to.



Other Tags

1. <style> – Defines CSS styles for the document.


2. <script> – Defines JavaScript or links to external scripts.


3. <meta> – Provides metadata about the document (e.g., description, keywords).


4. <base> – Specifies the base URL for relative links.


5. <noscript> – Defines alternative content for browsers that do not support JavaScript.


6. <progress> – Represents the progress of a task.


7. <time> – Represents a specific time or date.


8. <ruby> – Defines a ruby annotation for East Asian typography.


9. <wbr> – Suggests a line break opportunity.



These are just some of the most commonly used HTML tags, and there are additional tags and attributes you can explore based on the needs of your website or web project.

Browser Support for HTML Versions

HTML is supported by all modern web browsers, though specific versions of HTML may have varying degrees of support in older browsers. Below is a general overview of browser support for HTML versions:

HTML4	Chrome, Firefox, Internet Explorer, Safari, and Opera
HTML5	Google Chrome, Firefox, Safari, Microsoft Edge, and Opera

Best HTML Editors for Mobile and Desktop

FOR MOBILE	Dcoder (Android/iOS), AIDE (Android), Quoda (Android), Textastic (iOS),
FOR DESKTOP	Visual Studio Code (VS Code),Sublime Text, Atom, Brackets, Notepad++

HTML Color Codes

HTML supports various ways to define colors. Colors can be specified using:

Hexadecimal Color Codes: A 6-digit code representing the color using base-16 notation.

RGB Color Codes: Specifies the intensity of red, green, and blue in a color (range 0-255).

HSL Color Codes: Specifies colors based on hue, saturation, and lightness.

Named Colors: Standard predefined color names in HTML.

Here’s a detailed list of some commonly used colors, with examples for each format:

1. Hexadecimal Color Codes

#FFFFFF: White

#000000: Black

#FF0000: Red

#00FF00: Green

#0000FF: Blue

#FFFF00: Yellow

#00FFFF: Cyan (Aqua)

#FF00FF: Magenta (Fuchsia)

#800000: Maroon

#808000: Olive

#008000: Dark Green

#800080: Purple

#FF4500: Orange Red

#FFD700: Gold

#A52A2A: Brown

#C0C0C0: Silver

#808080: Gray


2. RGB Color Codes

rgb(255, 255, 255): White

rgb(0, 0, 0): Black

rgb(255, 0, 0): Red

rgb(0, 255, 0): Green

rgb(0, 0, 255): Blue

rgb(255, 255, 0): Yellow

rgb(0, 255, 255): Cyan (Aqua)

rgb(255, 0, 255): Magenta (Fuchsia)

rgb(128, 0, 0): Maroon

rgb(128, 128, 0): Olive

rgb(0, 128, 0): Dark Green

rgb(128, 0, 128): Purple

rgb(255, 69, 0): Orange Red

rgb(255, 215, 0): Gold

rgb(165, 42, 42): Brown

rgb(192, 192, 192): Silver

rgb(128, 128, 128): Gray


3. HSL Color Codes

hsl(0, 100%, 100%): White

hsl(0, 0%, 0%): Black

hsl(0, 100%, 50%): Red

hsl(120, 100%, 50%): Green

hsl(240, 100%, 50%): Blue

hsl(60, 100%, 50%): Yellow

hsl(180, 100%, 50%): Cyan (Aqua)

hsl(300, 100%, 50%): Magenta (Fuchsia)

hsl(0, 100%, 25%): Maroon

hsl(60, 100%, 25%): Olive

hsl(120, 100%, 25%): Dark Green

hsl(300, 100%, 25%): Purple

hsl(16, 100%, 50%): Orange Red

hsl(51, 100%, 50%): Gold

hsl(0, 59%, 41%): Brown

hsl(0, 0%, 75%): Silver

hsl(0, 0%, 50%): Gray


4. Named Colors

Aqua: #00FFFF

Black: #000000

Blue: #0000FF

Fuchsia: #FF00FF

Gray: #808080

Green: #008000

Lime: #00FF00

Maroon: #800000

Navy: #000080

Olive: #808000

Purple: #800080

Red: #FF0000

Silver: #C0C0C0

Teal: #008080

White: #FFFFFF

Yellow: #FFFF00

HTML Codes for Emojis, Signs, and Symbols

1. Emojis

😊 (Smiling Face with Smiling Eyes): &#128522;

😂 (Face with Tears of Joy): &#128514;

❤ (Red Heart): &#10084;

👍 (Thumbs Up): &#128077;

🌟 (Glowing Star): &#11088;

🔥 (Fire): &#128293;

💻 (Laptop): &#128187;

🌸 (Cherry Blossom): &#127800;

🎉 (Party Popper): &#127880;

🐱 (Cat Face): &#128049;

😎 (Smiling Face with Sunglasses): &#128526;

💖 (Sparkling Heart): &#128150;

💃 (Dancer): &#128131;

🥺 (Pleading Face): &#129402;

💀 (Skull): &#128128;

🥳 (Partying Face): &#129395;

🌍 (Earth Globe Europe-Africa): &#127757;

🦋 (Butterfly): &#129419;

🦄 (Unicorn): &#129412;

💪 (Flexed Biceps): &#128170;

🌈 (Rainbow): &#127752;

👑 (Crown): &#128081;

🙌 (Raising Hands): &#128588;



---

2. Signs

© (Copyright sign): &#169;

® (Registered Trademark sign): &#174;

™ (Trademark sign): &#8482;

& (Ampersand): &#38;

$ (Dollar sign): &#36;

€ (Euro sign): &#8364;

£ (Pound sign): &#163;

¥ (Yen sign): &#165;



---

3. Mathematical and Technical Symbols

± (Plus-minus): &#177;

≠ (Not equal to): &#8800;

≤ (Less than or equal to): &#8804;

≥ (Greater than or equal to): &#8805;

∑ (Summation sign): &#8721;

∞ (Infinity symbol): &#8734;

∧ (Logical AND): &#8743;

∨ (Logical OR): &#8744;



---

4. Punctuation Marks

• (Bullet point): &#8226;

– (En Dash): &#8211;

— (Em Dash): &#8212;

‘ (Left Single Quote): &#8216;

’ (Right Single Quote): &#8217;

“ (Left Double Quote): &#8220;

” (Right Double Quote): &#8221;



---

5. Other Common Symbols

☀ (Sun symbol): &#9728;

☁ (Cloud symbol): &#9729;

☂ (Umbrella symbol): &#9730;

★ (Star symbol): &#9733;

♻ (Recycle symbol): &#9851;

♠ (Spade symbol): &#9824;

♣ (Club symbol): &#9827;

♥ (Heart symbol): &#9829;

Read Our Other’s Post;s

high class escorts in manchester

February 10, 2025 at 3:49 pm

Wonderful beat ! I would like to apprentice whilst you amend your website, how can i subscribe for a weblog
web site? The account helped me a applicable deal.
I have been tiny bit familiar of this your broadcast offered bright clear idea

admin
February 11, 2025 at 6:27 am
It may take a while for this feature to be launched on the website. There are many things still to come on this website.You can check my website regularly or if you need a unique design or website, you can contact me by email.
[email protected]