5 min read · Jan 31, 2022
In my last article, I broke down how to get started with HTML 5. If you are just getting beginning you can read here. In this article, I will show 30 tags that we will use in my future articles.
- 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> 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.
<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.
<head></head>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.
<title>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.
<body>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.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>7. P
The P tag stands for paragraph. Between this tag is where we store the paragraphs of information.
<p></p>8. Line Break
The line break tag is used to create a line break in a paragraph or header text.
<br>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.
<b>bold text</b>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.
<div></div>12. Header
The header element represents a container for introductory content or a set of navigational links.
<header></header>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.
<footer></footer>14. Main
Specifies the main content of a document.
<main></main>15. Details
Defines additional details that the user can view or hide. It creates a dropdown box that shares more information when clicked.
<details></details>16. Summary
Defines a visible heading for a <details> element.
<summary></summary>17. Article
Defines an article.
<article></article>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”.
This website is all about <abbr title=”HyperText Markup Language”>HTML</abbr>.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.
<address>Organization Name: MacTavish Designs <br>Web Site:<a href="https://zackmactavish.github.io/MacTavish/">Zack MacTavish</a><br>Portland, Oregon</address>
20. Span
A span is similar to a div, but a span element is used for inline organization and styling.
<span></span>21. Script
The script tag is how we add Javascript or any other client-side script to our project.
<script></script>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.
<img src = "new.svg" alt = "craft" height = "100px" width = "100px" />24. Unordered List
Defines an unordered list in which we can place list items.
<ul></ul>25. Ordered List
Defines an ordered list in which we can place list items.
<ol></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.
<ul>
<li>Dog</li>
<li>Cats</li>
<li>Turtles</li>
</ul>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.
<a href=”https://www.w3schools.comhttps://zackmactavish.github.io/MacTavish/" target="_blank">Visit my website!
</a>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.
<nav></nav>29. Button
This tag will place a clickable button on our web page.
<button type="button">Click Me!</button>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.
<form></form>The <form> element can contain one or more of the following form elements:
Thanks for reading along so far! I will have additional content creating HTML pages, and will further explore creating a form and implementing other tags. Subscribe to see my future posts!
