Welcome, aspiring web developers, to the fundamental aspects of HTML — the language that breathes life into the web! In today's exploration, we're unraveling the intricacies of HTML, delving into essential elements like tags, elements, comments, attributes, and HTML entities. These foundational concepts are the building blocks of the HTML, laying the groundwork for your journey into crafting captivating and interactive web pages.

Let's Decode HTML Syntax

1. HTML Tags - Your Instructions

In HTML, tags are like little instructions for your web browser. These are the keywords enclosed in the angle brackets (< >). They tell it how to organize and show your content. Want a title? Use <h1>. Need a paragraph? That's <p>. Tags are your go-to toolkit for building. HTML tags can be broadly categorized into two main types:

Pair Tags (Opening and Closing Tags):
- These tags come in pairs, where there is an opening tag and a corresponding closing tag.
- <tagname> - Opening Tag.
- </tagname> - Closing Tag.
- Opening tags are used to mark the beginning of an HTML element, and closing tags mark the end.
- ```
   <p>This is a paragraph.</p>
```
Singular Tags (Self-Closing or Void Tags):
- These tags stand alone and don't have a corresponding closing tag.
- <tagname /> - Self Closing Tags.
- They are used for elements that don't contain content or don't need a closing tag.
- ```
   <img src="image.jpg" alt="Description"/>
```

2. HTML Elements - Mix, Match, and Create

HTML elements are the ingredients in your coding kitchen. Combine tags with content, and there it is, you've cooked up a webpage masterpiece.

<h1>Hello World!</h1> is just the beginning of your coding culinary adventures.

Elements are basically composed of an opening tag content and a closing tag. Elements define the structure and semantics of a document, allowing browsers to interpret and display the content correctly.

<!-- Example of Heading Element -->
<h1>Hello World!</h1>

<!-- Example of Paragraph Element -->
<p>This is your introductory paragraph.</p>

3. HTML Comments - Your Sticky Notes

Ever wish you could leave sticky notes in your code? Well, comments are just that—your digital sticky notes.  won't clutter your webpage but is there to remind you (or your coding buddy) what's happening behind the scenes. Means Comments are used as a guidance which helps other coders to understand the code easily.

<!-- This is a comment. It will not be desplayed on the browser. -->
<p> This is some content. It will be displayed on the browser. </p>

4. HTML Attributes: Enhancing Elements with Extra Information

HTML attributes provide additional information about HTML elements. They are added to the opening tag of an element and are typically in the form of name/value pairs. Attributes help define the characteristics, behavior, or additional details of an element, making it more versatile and interactive. Let's explore the concept of HTML attributes with examples and code snippets.

Anatomy of an HTML Attribute

An HTML attribute is added within the opening tag of an element. It consists of a name and a value, separated by an equal sign (=). The structure looks like this:

<tagname attribute_name="attribute_value">Content</tagname>

Here, attribute_name is the name of the attribute, and attribute_value is the value assigned to the attribute.

Common HTML Attributes

1. id Attribute: The id attribute provides a unique identifier for an HTML element.

<div id="uniqueID">This is a unique element.</div>

2. class Attribute: The class attribute is used to apply styles or group elements using a common class name.

<p class="highlight">This paragraph has a special style.</p>

3. src Attribute (for Images): The src attribute specifies the source URL for images.

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

4. href Attribute (for Links): The href attribute defines the URL a link points to.

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

5. alt Attribute (for Images): The alt attribute provides alternative text for images, crucial for accessibility.

<img src="picture.jpg" alt="A beautiful landscape">

6. style Attribute: The style attribute allows inline styling of an element.

<p style="color: blue; font-size: 16px;">Styled paragraph.</p>

7. disabled Attribute (for Form Elements): The disabled attribute disables a form element.

<input type="text" disabled>

Combining Attributes:

You can combine multiple attributes within the same opening tag to enhance the capabilities of an element. For instance:

<a href="https://www.example.com" target="_blank" class="external-link">Open in a new tab</a>

Here, the target attribute specifies that the link should open in a new tab, and the class attribute assigns a style to the link.
Apart from this there are much more attributes to explore which we will cover in upcoming blogs. This only a introduction to HTML Attributes, We will study in detail about these in subsequent blogs, so stay connected.

5. HTML Entities: The HTML Wizardry

These entities are useful when you want to display reserved characters without triggering their special meanings in HTML. These are special codes or sequences of characters used to represent reserved characters, characters with special meanings, or characters that might not be easily typable or visible. HTML entities are often used to include special characters, symbols, or non-breaking spaces in HTML documents.

Here are some common HTML entities:

Character Entities:
- < represents the less-than sign <.
- > represents the greater-than sign >.
- & represents the ampersand &.
- " represents the double quotation mark "
- ' represents the single quotation mark ' (not as commonly used)

    <p>This is an example of &lt;strong&gt;HTML entities&lt;/strong&gt;</p>

Special Characters:
- © represents the copyright symbol ©.
- ® represents the registered trademark symbol ®.
- ™ represents the trademark symbol ™.

    <p>&copy; 2023 My Website. All Rights Reserved.</p>

Non-Breaking Space:
-   represents a non-breaking space.

    <p>This is some text.&nbsp;And here is more text.</p>

Apart from this some numbers are also used to do same: For Ex. =( for =), &#62( for >), &#63( for ?) et cetera:

Thank You 🙏

If You've reached to the end, You are a champ🏆. If you liked the Article consider sharing it with others and stay connected because I'm going to cover each and every topic in detail. If you have any doubts or want discussion on any specific topic let me know in comments.

Understanding The HTML Syntax: Tags, Elements, Comments, Attributes and HTML Entities

Table of contents