As a developer starting your journey, the first language you will encounter is HTML. When I started learning HTML, I was overwhelmed by the number of tags. How was I supposed to learn them all? After taking some great courses, I understood that you don’t need to learn all the tags. There are only a few essential tags that a developer needs while coding in HTML.
The div tag, short for division tag, is one of the most widely used tags in HTML. It is mainly used to create different sections within a webpage. Inside a div, you can have different headings, paragraphs, lists, and buttons. You can create different divs with different classes, headings, paragraphs, and so on. Then, you can style these divs using CSS and JavaScript. Think of a div as a container with various items, each with a different name and design.
<div class="container">
<h1>Main Heading</h1>
<p>This is a paragraph inside a div.</p>
</div>The h1 tag is used for the main heading of your webpage. It is one of the most important and useful tags in HTML, not only for structuring your content but also for SEO. There are six different heading tags, from h1 to h6, with h1 being the most important and h6 the least. For beginners, it’s best to use h1 for main headings and decrease the size with subsequent headings.
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>The p tag stands for paragraph. As the name suggests, it is used to add paragraphs to your website. Regardless of the paragraph's length, it can be enclosed within p tags. p tags are block-level elements separated by blank lines.
<p>This is a paragraph of text.</p>The a tag defines a hyperlink. It is used to link to other pages or sections of the same page. The href attribute is crucial in a tags, where you usually put the link inside quotation marks after href. The syntax of an a tag is typically:
<a href="https://example.com">Visit Example</a>The ul tag stands for an unordered list, meaning it will create a bulleted list. Each item in the list is placed within li tags. ul tags can be nested as needed and are commonly used to create navigation bars. The syntax of a ul tag is:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul><head>: Contains meta-information about the HTML document, such as its title, linked scripts and stylesheets, and metadata.
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="description" content="A description of my web page for SEO.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="styles.css">
</head><body>: Contains the content of the HTML document, such as text, images, links, and other media.
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of the page.</p>
</body>The img tag is used to embed images in an HTML page. It is a self-closing tag and requires the src attribute to specify the image source and the alt attribute for alternative text.
<img src="image.jpg" alt="Description of the image">The table tag is used to create tables in HTML. It consists of rows (tr) and cells (td for data cells and th for header cells).
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>The form tag is used to create forms for user input. It contains form elements like input fields (input), dropdowns (select), text areas (textarea), and buttons.
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>These tags are what you will mostly use in your HTML pages. However, it doesn’t mean you shouldn’t learn other tags. Understanding the functionality of each HTML tag is essential. Search for the tags and use them as needed. While learning every tag in HTML is impractical, mastering the most commonly used ones will significantly aid your development journey. HTML might not be the hardest language in web development, but it is foundational.