DEV Community: Mark Tony

HTML Attributes

Mark Tony — Wed, 15 Jul 2026 12:53:02 +0000

If HTML tags are the skeleton of a webpage, attributes are the features that give that skeleton personality, functionality, and style.

Whether you want to center a paragraph, change a font's color, or make your website accessible to a global audience, HTML attributes are the tools you need. Let’s break down exactly what they are, how they work, and the core attributes you will use every single day.

What is an HTML Attribute?
Attributes are modifiers used to adjust or provide additional information about the content within an HTML tag. They always look like a name-value pair and are separated by an equals sign (=).

<div style="text-align: center;">Centered text</div>
By adding style="text-align: center;"

we change the default layout of the

to fit our specific design goals.

The Golden Rules of HTML Attributes

Before you start coding, keep these 5 essential characteristics in mind:

They are opening-tag exclusive: Attributes must always be written inside the opening tag, never the closing tag.
They are optional (but crucial): While elements can function without them, attributes unlock advanced styling and functionality.
Space-separated: An HTML element can have multiple attributes. Just separate them with a space.
Name-Value formatting: Most attributes require a value enclosed in quotes (name="value").
Boolean Attributes exist: Some attributes don't need a value at all. If the attribute name is present (like required, disabled, or checked), the browser automatically treats it as true.

The Big Three: Core Global Attributes

While some attributes only work on specific tags, Global Attributes can be used on almost any HTML element. Here are the three most popular.

1. The id Attribute
The id attribute acts as a social security number for your HTML element—it must be completely unique on the page.

Developers use id for two main reasons:

To target a specific, unique element with JavaScript or CSS.
To differentiate between two identical tags on the same page.

<body>
   <p id="html-desc">This paragraph explains what HTML is.</p>
   <p id="css-desc">This paragraph explains what CSS is.</p>
</body>

2. The class Attribute

The class attribute is built for sharing. You can assign the same class name to multiple elements to apply uniform styling. You can even assign multiple classes to a single element by separating them with a space.

<!-- One element sharing three distinct style classes -->
<div class="card card-dark text-bold">Card Content</div>

3. The style Attribute

The style attribute allows you to write inline CSS directly inside your HTML element. While it's generally better practice to use external style sheets, the style attribute is perfect for quick fixes or dynamic shifts.

<p style="font-family: Arial, sans-serif; color: #FF0000;">
   Welcome to HTML!
</p>

Going Global: Internationalization Attributes (i18n)

*Building a website for the world? *
HTML includes specific internationalization attributes to tell browsers and screen readers how to handle different languages and text flows.

The dir Attribute (Direction)
Not every language reads from left to right. The dir attribute tells the browser which direction the text should flow:

ltr: Left-to-right (Default for English, Spanish, etc.)

rtl: Right-to-left (Used for Arabic, Hebrew, etc.)

auto: Lets the browser dynamically decide based on the content.

<p dir="rtl">هذا النص مكتوب من اليمين إلى اليسار.</p>

The lang Attribute (Language)
This is arguably the most important internationalization attribute. Placed on the opening tag, it tells search engines and screen readers the primary language of the page.

<html lang="en"> <!-- Sets the language to English -->

The translate Attribute
Sometimes, you don't want automated tools (like Google Translate) messing with your text—such as your brand name or a code snippet. The translate attribute solves this:

<p>Welcome to our platform!</p>
<p translate="no">Apple</p> <!-- Keeps the brand name from being translated -->

Summary

Mastering attributes is your first major step toward writing semantic, clean, and accessible code. By combining id, class, and internationalization tags, you gain full control over how browsers interpret and display your web pages.

Git Lab - Login & more

Mark Tony — Fri, 10 Jul 2026 07:35:44 +0000

Hilo folks!

Git Lab
This blog is about the Git lab login and its applications. It provides a common forum for the developers to collaborate and do their projects effectively.

Initially, I faced a issue to sign in to the #Gitlab as it required 3-steps of verification.

It includes

E- mail verify
Phone number verify
Credit card verify

If you face the same issue, Try to create a new email and sign to the Gitlab. It actually works!

Terminal Commands:

Additionally, I learnt about the terminal commands that makes the job easier.

1.cd - Change Directory (using this we can move to any folder)

2.ls - List files (Which is used to list the files which are present in the particular folder)

3.mkdir - Make directory (It is used to used a Directory / folder)

4.git --version - it is used to check the version of the git.

5.git init - it is used for creating a new repository.

6.git add - it is used for adding a selected file to our repository.

7.git add . - it is used for adding the entire folder to our repository.

8.git commit -m "commit message" - it is Used to commit the changes with commit message, this commit message is useful for the other developers.

9.git clone - It is used to clone a existing repository.

10.git push - Used to push our updated code.

Being flexible with #Flex

Mark Tony — Thu, 09 Jul 2026 05:50:30 +0000

Hilo Folks!

I want to share a bit of my knowledge on the Attribute "Flex" in Html designing. Here we go!

"Flex is used to make elements come into a box which called the 'Flex Box'.
E.g:

<style>
 .Container{
display: flex}

The outer frame is known as Flex box and the elements within are called flex items. The flex can be modified accordingly with these flex properties.

These flex properties can be classified into two. Thus,
1.Parent Properties
2. Children Properties

Parent Properties:

display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap

Children Properties:

order- Specifies the display order of the flex items inside the flex container
flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis - Specifies the initial length of a flex item
align-self - Specifies the alignment for the flex item inside the flex container

It's conducive to align the elements as desired and obtain inviting web pages.

Learning Kick Started!

Mark Tony — Wed, 08 Jul 2026 05:43:48 +0000

Hilo Techisss...

I would like to do a write up of my initial learning at @payilagam_135383b867ea296

To begin with, The course details were briefed. I obtained the clarity about the course. Moreover, we discussed the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheet). It was simple and clear.

In Addition, We learnt how to prepare the Login web page of Instagram using HTML and CSS. It was a simple hands-on task that we did with the instruction of the Trainer. I understood the Tags and Attributes in HTML. It was Fab.

Moreover, I had the doubts in between and got clarified. CSS is inevitable in designing the web page without which it remains unbeautified.

Ultimately, I had a exciting hands-on experience in formulating the Login Web page. Let's have a look at my craft!

INTO Coding...

Mark Tony — Tue, 07 Jul 2026 02:53:18 +0000

Hi folks!
This is Mark Tony, a fresher to this field of technology from the UG Physics background. In a way, I'm pursuing my desire which I missed during my college days.

My new venture begins along with @payilagam_135383b867ea296
Where I'm doing my Full stack developer course right now.

I'm excited and enthusiastic about learning and becoming a developer. Dev community kick starts my journey 😉😊