DEV Community

onieio
onieio

Posted on

HTML Basics: Essential Tags

HTML (Hypertext Markup Language) is the standard language for creating and designing web pages. It uses various tags to structure content and define elements on a webpage. Here are some fundamental HTML tags that every web developer should know:

  • <!DOCTYPE html> This declaration specifies the HTML version being used. It should be placed at the very beginning of an HTML document. 
<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode
  • <html> The root element of an HTML document. 
<html>
  <!-- Content goes here -->
</html>
Enter fullscreen mode Exit fullscreen mode
  • <head> Contains meta-information about the HTML document, such as title, character set, and linked stylesheets. 
<head>
  <title>Document Title</title>
  <!-- Other metadata goes here -->
</head>
Enter fullscreen mode Exit fullscreen mode
  • <body> Encloses the content of the HTML document, including text, images, links, and more. 
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample paragraph.</p>
  <!-- Other content goes here -->
</body>
Enter fullscreen mode Exit fullscreen mode
  • <h1> to <h6> Heading tags, ranging from the largest <h1> to the smallest <h6>. 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- ... -->
<h6>Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode
  • <p> Defines a paragraph. 
<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode
  • <a> Creates hyperlinks to navigate to other pages or resources. 
<a href="https://www.example.com">Visit Example.com</a>
Enter fullscreen mode Exit fullscreen mode
  • <img> Embeds images in the document. 
<img src="image.jpg" alt="Description of the image">
Enter fullscreen mode Exit fullscreen mode
  • <ul>, <ol>, <li> Defines unordered and ordered lists with list items.

Unordered List:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Ordered List:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  • <div> A generic container that does not carry any semantic meaning. 
<div>
  <!-- Content goes here -->
</div>
Enter fullscreen mode Exit fullscreen mode
  • <span> Similar to <div>, but used for inline elements. 
<p>This is <span style="color: red;">red</span> text.</p>
Enter fullscreen mode Exit fullscreen mode
  • <br> Creates a line break within text. 
<p>This is the first line.<br>This is the second line.</p>
Enter fullscreen mode Exit fullscreen mode
  • <hr> Represents a thematic break or horizontal rule. 
<hr>
Enter fullscreen mode Exit fullscreen mode

These are just a few of the essential HTML tags. As you continue learning, you'll discover more tags and attributes to enhance the structure and presentation of your web pages.

Top comments (0)