Apr 27, 20227 min read

HTML Tags

Updated: Aug 18, 2022

An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document. As part of an HTML element, HTML tags help web browsers convert HTML documents into web pages.

1. Doctype The doctype declaration is the first line of code in an HTML file, and it communicates to our website which version of HTML we are working in. This simple line below is sufficient to start our HTML file.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
This is "DOCTYPE html" Tag....
</body>

</html>

2. HTML The HTML elements are written after our Doctype Declaration, and wrap all of our HTML code. It is sometimes known as the root element.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is "html" Tag </h1>
<p>The Tech Platform</p>

</body>
</html>

3. Head The Head Element is used to wrap around everything you want to include on the HTML page, that isn’t the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

<h1>This is "head" tag</h1>

</body>
</html>

4. Title This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked. You can write this sentence below inside our Head element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title of the document</title>
</head>
<body>

<h1>This is "title" Tag </h1>

</body>
</html>

5. Body The body tags contain all of the content that will appear on our webpage. This includes text, images, videos, games, playable audio tracks, or whatever else. We can write the body tags below all of the content that is wrapped in the Head tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title of the document</title>
</head>
<body>

<h1>This is "body" Tag </h1>

</body>
</html>

6. H1 to H6 There are 6 levels of hierarchy HTML gives us to label our headers with. Labeling with H1 will let the web browser know that this piece of information is the most important part of our page. An H2 will be the second most important piece of information, and so forth down to H6. It is best to use CSS to determine the size of our typography and only use the HTML tags to clarify the importance of our information hierarchy to the browser.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

7. P The P tag stands for paragraph. Between this tag is where we store the paragraphs of information.

<!DOCTYPE html>
<html>
<body>

<h1>The p (Paragraph) Tag </h1>

<p>Welcome to The Tech Platform</p>
<p>This Tag is used to write the paragraphs.</p>

</body>
</html>

8. Line Break The line break tag is used to create a line break in a paragraph or header text.

<!DOCTYPE html>
<html>
<body>

<h1>The br Tag</h1>

<p>if you want <br> to break the line <br> in a text,<br> use the br<br> tag.</p>

</body>
</html>

9. Commenting our HTML code Commenting on our HTML code is an important step to communicate to potential other developers how our file is broken down. This code will not show up on our browser. Using commenting is an important step throughout programming to keep the code legible. You write in between the two dashes on each side to comment.

<!--This is how you comment your code-->

10. Bold Defines that the text should be bold.

<!DOCTYPE html>
<html>
<body>

<h1>The Bold Tag</h1>

<p> Welcome to <b>The Tech Platform</b> </p>

</body>
</html>

11. Div The division tag is probably one of the most used tags in HTML. It is used to wrap a section of content. A div element is used for block-level organization and styling of page elements.

<!DOCTYPE html>
<html>
<head>
<style>
.Div {
  border: 5px outset blue;
  background-color: pink;    
  text-align: center;
}
</style>
</head>
<body>

<h1>The div Tag</h1>

<div class="Div">
  <h2>The Tech Platform</h2>
  <p>This is Div Tag.</p>
</div>

<p>You can also write the text outside the Div Tag using <b>"P(Paragraph)"</b> element.</p>

</body>
</html>

12. Header The header element represents a container for introductory content or a set of navigational links.

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>This is Header Tag</h1>
    <p>This is Paragraph 1</p>
    <p>This is Paragraph 2</p>
  </header>
  <p>This is Paragraph 3</p>
</article>

</body>
</html>

13. Footer The footer element represents a container for information such as authorship information, copyright information, contact information, sitemap, back-to-top links, and related documents.

<!DOCTYPE html>
<html>
<body>

<h1>The footer element</h1>

<footer>
  <p>The Tech Platform<p>
  <p>Subscribe us at <a href="www.thetechplatform.com">www.thetechplatform.com</a></p>
</footer>

</body>
</html>

14. Main Specifies the main content of a document.

<!DOCTYPE html>
<html>
<body>

<h1>The main element</h1>

<main>
  <h2>Most Popular Browsers</h2>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

</body>
</html>

15. Details Defines additional details that the user can view or hide. It creates a dropdown box that shares more information when clicked.

<!DOCTYPE html>
<html>
<body>

<h1>The details element</h1>

<details>
  <summary>The Tech Platform</summary>
  <p>This is Paragraph 1 </p>
</details>

</body>
</html>

16. Summary Defines a visible heading for a <details> element.

 <!DOCTYPE html>
<html>
<body>

<h1>The details element</h1>

<details>
  <summary>The Tech Platform</summary>
  <p>This is Paragraph 1 </p>
</details>

</body>
</html>

17. Article Defines an article.

<!DOCTYPE html>
<html>
<body>

<h1>The article element</h1>

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

</body>
</html>

18. Abbreviations or acronyms HTML has provided us with a tag <abbr> that will communicate with our browser what our acronym stands for. This is useful for accessible websites. Website visitors do not see the text in the title attribute, but browsers, search engines, and assistive technologies do use this information. The code below will output a line of text that reads like, “This website is all about HTML”.

<!DOCTYPE html>
<html>
<body>

<h1>The abbr element</h1>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body>
</html>

19. Address The <address> tag is useful to wrap around the section on our website that indicates the contact information of a person or an organization. If <address> tag is used inside the <body> tag then it represents the contact information of the document and if the <address> tag is used inside the <article> tag, then it represents the contact information of the article.

<!DOCTYPE html>
<html>
<body>

<h1>The address element</h1>

<address>
Written by <a href="The Tech Platform">The Tech Platform</a>.<br> 
Visit us at:<br>
Salta<br>
A-758, Argentina<br>
South America
</address>

</body>
</html>

20. Span A span is similar to a div, but a span element is used for inline organization and styling.

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>If you want to live a <span style="color:blue;font-weight:bold"> happy life,</span> tie it to a goal, not to <span style="color:Red;font-weight:bold"> people or things.</span></p>

</body>
</html>

21. Script The script tag is how we add Javascript or any other client-side script to our project.

<!DOCTYPE html>
<html>
<body>

<h2>The script element</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

22. No Script The no script tag is used to display alternative content if the user does not have Javascript enabled on their browser.

<noscript>Your browser does not support JavaScript!</noscript>

23. Image The img tag is used to display an image on our browser. It allows us to add in the attributes of src, alt, height, and width. The src attribute points to where our image is stored, and pulls it to place it on the browser. The alt attribute allows us to place a meta description text for our image that will not show up on our browser.

<!DOCTYPE html>
<html>
<body>

<h2>The Image Tag </h2>

<img src = "https://static.wixstatic.com/media/0f65e1_cf4192db4cc54cae8ab1b3087c5af842~mv2.jpg" alt = "craft" height = "100px" width = "400px" />


</body>
</html>

24. Unordered List Defines an unordered list in which we can place list items.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

25. Ordered List Defines an ordered list in which we can place list items.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

26. List Item Defines a list item that can be placed in an unordered or ordered list. I will show an example of pets in an unordered list below.

<!DOCTYPE html>
<html>
<body>

<h1>The List Tag</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

27. Hyperlink A hyperlink can be added to an HTML page by wrapping it in a <a> tag. This gives us the attribute of href, which allows us to point to a link. We can also add the attribute target=”_blank” if we want our hyperlink to open in a new tab.

<!DOCTYPE html>
<html>
<body>

<h1>The Hyperlink element</h1>

<p>Visit <a href="www.thetechplatform.com">The Tech Platform</a></p>

</body>
</html>

28. Nav The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<!DOCTYPE html>
<html>
<body>

<h1>The nav element</h1>

<p>The nav element defines a set of navigation links:</p>

<nav>
<a href="https://www.thetechplatform.com/blog">Blogs</a> |
<a href="https://www.thetechplatform.com/about-us">About us</a> |
<a href="https://www.thetechplatform.com/videos">Videos</a> |
</nav>

</body>
</html>

29. Button This tag will place a clickable button on our web page.

<!DOCTYPE html>
<html>
<body>

<h1>The button Element</h1>

<button type="submit" formtarget="www.thetechplatform.com">Click Me!</button>
 
</body>
</html>

30. Form The <form> tag is used to create an HTML form for user input. This can be used for things such as a survey, login page, or sign-up.

<!DOCTYPE html>
<html>
<body>

<h1>The form element</h1>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>