Alexis Kestler
Welcome friend! If you want to become a front-end developer, one of the most common and best pieces of advice you will get is to learn HTML. As someone with experience in data analysis and technology, I highly recommend starting with HTML to build a strong foundation in web development.
In this beginner‘s guide, we‘ll explore the most commonly used HTML tags that every aspiring developer should know.
What is HTML?
HTML stands for Hypertext Markup Language. It‘s a coding language that is used to structure and present content on the web.
Websites are built using HTML code, which tells browsers how to display text, images, videos and other elements that make up a web page.
HTML uses tags to format content. These tags act like keywords that define how the browser will present the content enclosed within them.
For example, to display a heading, you would use a heading tag like “ tags will be formatted as a top level heading by the browser.
Here are some key facts about HTML tags:
- HTML tags are enclosed within angled brackets
<> - Tags usually come in pairs of opening and closing tags
- Opening tags look like
<tagname> - Closing tags have a forward slash
</tagname> - Some tags are self-closing like
<img />
With some basic knowledge of HTML tags, you can start structuring content for the web!
HTML Elements vs. Tags vs. Attributes
Before we jump into the essential tags, let‘s clarify the difference between HTML elements, tags, and attributes:
-
HTML elements refer to the individual components on a web page, such as a paragraph or image. Elements are defined by HTML tags.
-
HTML tags are the codes that define the start and end of an HTML element. For example
<p>and</p>are the tags that define a paragraph element. -
HTML attributes provide additional information about an element and appear within the opening tag. For example
<a href="link">shows the "href" attribute inside the<a>tag.
Here is a simple visual to understand their relationship:
Now let‘s dive into the essential HTML tags that every beginner should learn.
19 Must-Know HTML Tags
Since the first HTML draft in 1993, many new tags have been added to the language. Currently there are over 100 valid HTML tags you could use.
But as a beginner, these 19 tags provide a solid base to start structuring web pages:
1. <!DOCTYPE html>
Let‘s start from the very beginning of an HTML document.
The <!DOCTYPE html> declaration should always be the first line of code on your HTML page.
This declaration tells the browser that the document being rendered is an HTML document.
In older versions of HTML, the doctype declaration was more complicated. But with HTML5, simply writing <!DOCTYPE html> is all you need.
Here is how it looks:
<!DOCTYPE html>
<html>
<!-- Rest of HTML code -->
</html>Fun fact: Around 99.9% of websites use the HTML doctype according to W3Techs.
2. <html>
The <html> tag wraps the entire code for your web page. Everything else in your HTML document needs to be between the opening <html> and closing </html> tags.
This tag lets the browser know where the HTML code starts and ends.
For example:
<!DOCTYPE html>
<html>
<!-- All other HTML tags here -->
</html>The <html> element represents the root of an HTML document.
3. <head>
The <head> element contains the metadata for a web page. Metadata refers to data about the page that isn‘t displayed directly on the page itself.
The head section is used to specify information like the page title, links to external files, meta descriptions, and more.
For example:
<head>
<title>Page Title</title>
</head>The <head> tag is placed after <html> and before <body>.
4. <title>
The <title> tag is used inside the head to specify the title of your web page.
For example:
<head>
<title>About My Company</title>
</head>The contents of the <title> tag will be displayed in the browser‘s title bar or tab name.
Titles are important for search engine optimization (SEO) and providing quick information about the page to users.
5. <body>
The <body> tag contains all the content you actually want to display on your web page, such as text, images, videos, etc.
Everything inside <body> will be rendered in the main browser window.
For example:
<body>
<p>This paragraph will be displayed.</p>
<img src="image.jpg" />
</body>The <body> contains the visible page content. It comes after <head> and before closing </html>.
6. <h1> to <h6>
Headings in HTML are defined using tags like <h1>, <h2>, <h3>, etc. There are six levels of headings available from <h1> to <h6>.
<h1>is used for the main heading or page title<h2>is used for major section headings<h3>for subsections under<h2><h4>for subsections under<h3>, and so on…
For example:
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4> Headings help structure the content on your page and improve SEO.
7. <p>
The paragraph tag <p> is used for creating paragraphs of text.
For example:
<p>This is a simple paragraph</p>
<p>This is another paragraph.</p> Using <p> tags allows you to specify blocks of text rather than just inserting line breaks. This improves structure and semantics.
Over 82% of all websites use the <p> tag according to W3Techs.
8. <a>
The anchor tag <a> creates a hyperlink to another webpage or resource on the web.
For example:
<a href="https://www.example.com/">This is a Link</a>The href attribute specifies the target of the link. The visible text between the tags will become clickable.
Links are a core part of web design and navigation.
9. <img>
The image tag <img> is used to embed images into your HTML code.
For example:
<img src="image.jpg" alt="My Image" />The src attribute contains the image source or location. The alt provides alternate text for accessibility.
<img> is a self-closing tag and does not need a closing tag.
Visual media is a big part of engaging web design. So learning to add images is a must.
10. <strong>
The <strong> tag is used to make text bold and place strong importance on it.
For example:
<p>This paragraph contains <strong>bold text</strong></p> The content inside <strong> will be displayed in bold by default.
Semantically it indicates that the enclosed text has strong importance.
11. <em>
The <em> tag is used to emphasize text. By default this is displayed in italics.
For example:
<p>This sentence contains <em>emphasized text</em></p>The <em> tag indicates that the enclosed text should be stressed or emphasized.
Visually this is often achieved through italics.
12. <ul> and <ol>
Unordered list <ul> and ordered list <ol> tags are used to create lists.
Each list item starts with the <li> tag.
For example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>The <ul> tag will use bullets to mark each list item.
The <ol> tag will use numbered ordering for each list item.
Lists help arrange information in clean vertical lists rather than long paragraphs.
13. <table>
The <table> tag creates an HTML table with rows and columns.
Inside the table, each row starts with a <tr> tag.
Then <td> defines the table cells in that row.
For example:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Tables provide a structured way to display data in rows and columns.
14. <div>
The <div> tag defines a division or section on the page. It can be used to group elements together into blocks.
For example:
<div>
<h2>Heading</h2>
<p>Paragraph of text</p>
</div><div> is a block level element that can contain other HTML elements.
It‘s commonly used in page layouts and styled with CSS.
15. <span>
The <span> tag represents an inline-level section on a page. It‘s used to group inline HTML elements.
For example:
<p>This is a paragraph with a <span>span element</span> inside.</p>Unlike <div>, <span> can only contain other inline elements.
It‘s useful for applying styles to sections of content.
16. <button>
The <button> tag defines a clickable button.
For example:
<button>Click Me</button>Buttons are used for user input and interaction. This could be submitting forms, navigating pages, opening modal popups, and more.
Attributes like type and onclick can add additional behavior.
17. <input>
The <input> tag defines an input field where users can enter data.
For example:
<input type="text">The type attribute determines the input field type, like "text", "email", "number", etc.
<input> is an important tag for creating forms and interfaces.
18. <label>
The <label> tag defines a label for an input element. This improves accessibility by connecting a text label to its corresponding input.
For example:
<label for="name">Name:</label>
<input type="text" id="name">The for attribute associates the label with the id on the input.
Labels provide clear explanations for form fields.
19. <br>
The break tag <br> inserts a single line break in text.
For example:
<p>This is a paragraph<br>spanning multiple lines</p><br> is useful for formatting and structuring text without needing extra tags.
Over 45% of websites use the break tag according to W3Techs.
Conclusion
In this beginner‘s guide, we covered 19 of the most essential HTML tags you should learn first.
With a solid grasp of these core tags, you can start structuring web pages and adding text, media, lists, buttons, forms, and more.
HTML seems simple on the surface, but mastering it takes practice. The more you use these tags, the more comfortable you‘ll get structuring and semantically organizing your content.
If you found this guide helpful, let me know in the comments! I‘m happy to chat more about HTML, web development, and how to level up your coding skills.
The web offers so many possibilities to learners who know HTML. I hope these 19 tags provide a strong starting point on your journey to becoming a capable front-end developer!
