DEV Community

ASHWINTH
ASHWINTH

Posted on

Html :)

What is html?

html(hyper text markup language) it is a standard language its used to create a structure of web page content.

What is Html Tags?
HTML tags are special keywords enclosed within angle brackets(<>).They tell the browser how to display content. there is lots of tag in html.

example:
     <h1>welcome</h1>
Enter fullscreen mode Exit fullscreen mode

what is Html attributes?
while html tage define the sturcture of web pages the attribues are add more information to the tag elements.

Why attributes are important?

  • Create hyperlinks
  • Display images
  • Add styles
  • Identify elements
  • Improve accessibility
  • Build forms
  • Add metadata

Types of Html attributes

  • href
  • target
  • src
  • alt
  • width
  • height
  • type
  • placeholder
  • required
  • action
  • method
  • id
  • class
  • style
  • title
  • hidden
  • lang
  • dir

Common Html Attributes?

  1. id Attribute

The id attribute uniquely identifies an HTML element.Each id value should be unique within a webpage.

<div id="header">
    Welcome!
</div>
Enter fullscreen mode Exit fullscreen mode
  1. class Attribute

The class attribute groups elements together. It is mainly used with CSS and JavaScript.Multiple elements can share the same class

<p class="highlight">
    This is important.
</p>
Enter fullscreen mode Exit fullscreen mode

3.** href Attribute**

The href attribute specifies the destination of a hyperlink.Without href, the link won't navigate anywhere.

<a href="https://www.google.com">
    Google
</a>
Enter fullscreen mode Exit fullscreen mode

4.** src Attribute**

The src attribute specifies the location of an image, video, audio, or other external resource.


<img src="nature.jpg" alt="Nature">
Enter fullscreen mode Exit fullscreen mode
  1. alt Attribute

The alt attribute provides alternative text if an image cannot be displayed. It also improves accessibility for screen readers.Always provide meaningful alt text.

<img src="cat.jpg" alt="A cute orange cat">
Enter fullscreen mode Exit fullscreen mode
  1. style Attribute

The style attribute allows you to apply inline CSS directly to an element.For larger projects, prefer external CSS over inline styles.

<p style="color: blue; font-size: 20px;">
    Hello Friends!
</p>
Enter fullscreen mode Exit fullscreen mode
  1. target Attribute

The target attribute specifies where a linked document should open.


Open Website

Common values:
_self
_blank
_parent
_top

  1. placeholder Attribute

Displays hint text inside input fields.

<input
    type="text"
    placeholder="Enter your name">
Enter fullscreen mode Exit fullscreen mode
  1. required Attribute

Makes an input field mandatory.Users must enter a value before submitting the form.

<input
    type="email"
    required>
Enter fullscreen mode Exit fullscreen mode
  1. disabled Attribute

Disables an element.Disabled elements cannot be interacted with.

<button disabled>
    Submit
</button>
Enter fullscreen mode Exit fullscreen mode
  1. value Attribute

Specifies the initial value of an input element.


<input
    type="text"
    value="John">
Enter fullscreen mode Exit fullscreen mode
  1. width and height Attributes

Set the dimensions of images.

<img
    src="mountain.jpg"
    width="400"
    height="250"
    alt="Mountain">
Enter fullscreen mode Exit fullscreen mode
  1. maxlength Attribute

Limits the number of characters a user can type.


<input
    type="text"
    maxlength="20">
Enter fullscreen mode Exit fullscreen mode
  1. readonly Attribute

Makes an input field read-only.Users can see the value but cannot edit it.


<input
    type="text"
    value="Admin"
    readonly>
Enter fullscreen mode Exit fullscreen mode

*Combining multiple Attributes *

An one elements have multiple attributes. this is very common in real world projects.

<input type="text" id="username" class="form-control" placeholder=" Enter your username" required>
Enter fullscreen mode Exit fullscreen mode

Conculution
As you continue learning HTML, practice using different attributes together in small projects. The more you experiment, the more comfortable you'll become with writing clean and effective HTML.

Happy Coding!

Top comments (0)