DEV Community

Cover image for Understanding HTML Tags and Elements
Saurabh Ravte
Saurabh Ravte

Posted on

Understanding HTML Tags and Elements

#html

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create webpages and web applications.

  • HyperText → Text that contains links to other texts.
  • Markup → Special tags that tell the browser how to display content.
  • Language → A standardized syntax with defined rules.

HTML provides the structure of a webpage. Without HTML a webpage cannot exit.

How HTML Code Look Like

Explanation:

  • <!DOCTYPE html> → Declares HTML5
  • → Root element
  • → Metadata and WebPage title
  • → Visible content

The Basics Of HTML Code

There are three components that form the basic building blocks of HTML code: tags, elements and attributes.

HTML Tags
Tags are keywords enclosed in angle brackets.
<h1>Namste World!</h1>

  • <h1> → Opening tag
  • </h1> → Closing tag

HTML Elements
An element includes the opening tag, content, and closing tag.
<tagname>Some Text</tagname>
Everything together is called an element.

HTML Attributes
Attributes provide additional information.
<tag attribute=“value”>Some content</tag>
Attributes are written inside the opening tag
Usually follow name="value" format

Commonly Used HTML Tags

  1. Headings: Headings define titles and section names on a webpage. 
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
Enter fullscreen mode Exit fullscreen mode
  • <h1> is the most important heading.
  • <h6> is the smallest.
  1. Paragraph: Used to write text. 
<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode
  1. Div(Container): Used for layout and structure. 
<div>
  <p>content</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  1. Span(Inline container): Used to group small pieces of text inside a line. 
<span>Highlighted text</span>
Enter fullscreen mode Exit fullscreen mode
  1. Link: Used to connect one page to another. 
<a href="https://example.com">Link</a>
Enter fullscreen mode Exit fullscreen mode
  • href → Destination URL
  • <a> stands for anchor
  1. Image: To display images. 
<img src="photo.jpg" alt="Sample Photo">
Enter fullscreen mode Exit fullscreen mode
  • src → Image location
  • alt → Description of image
  1. Lists:
  • Unordered List 
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • Ordered List 
<ol>
  <li>Step One</li>
  <li>Step Two</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  • <ul> → Bullet list
  • <ol> → Numbered list
  • <li> → List item
  1. Line Break & Horizonatal Line:
  • <br> → Moves content to next line
  • <hr> → Creates a horizontal line
  1. Text Formatting tags:
  • <strong> → Important (bold) text
  • <em> → Emphasized (italic) text
  • <mark> → Highlighted text
  • <small> → Smaller text
  1. Form: Collect user input. 
<form>
  <input type="text" placeholder="Enter name">
  <input type="email" placeholder="Enter email">
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Common input types:

  • text
  • password
  • email
  • checkbox
  • radio

Semantic HTML (Best Practice)

Semantic elements clearly describe their meaning.

Non-semantic:

  • <div>
  • <span>

Semantic:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <footer>

Benefits:

  • Better SEO
  • Better accessibility
  • Cleaner code
  • Easier maintenance

HTML Comments

Used for notes. Comments are ignore by the browser.

<!-- This is a comment -->
Enter fullscreen mode Exit fullscreen mode

Conclusion

HTML is the foundation of building webpage.

Top comments (0)