Tags

HTML's base building block is the tag. A tag is a building block. It describes what's inside it. Every tag has an opening and a closing tag (some tags open and close at the same point.) I think the easiest way to learn it is just to show a bunch of examples.

<h1>This is the title to my document</h1>

This is the title to my document You can see the <h1> and the </h1> surrounding the the text "This is the the title to my document". This is how HTML operates. You can have opening tag which has information or more tags inside of it. In this case we have an h1 tag which is a heading tag: it's used for the biggest title on the page, typically a title. If you rendered that using the browser, it's look like:

This is the title to my document It's bigger and bolder because that's what browsers do with h1s, it makes them look important on the page. However it does more than that too. Browsers aren't the only thing reading websites. Blind and people who can't see well will use screen readers to read web pages out loud to them; it uses things like headers to understand what information is important to read to the users. It's also how Google and Bing will understand the important details of your website. In other words, it's important which type of tag you use. More than just the visual aesthetic is using those tags.

A tag, whether it's opening or closing, are surrounded by angle brackets, < and >. Closing tags always have a slash, /, after the opening angle bracket, so it looks like </h1>. There are things called "self-closing tags" or "void tags" that open and close themselves. These will look like this: <input /> (I'll explain in a sec what inputs are.) That slash at the end means it is self closing. To make it more confusing, that last slash is optional, so <input> (with no closing tag ever) is valid too since input tags are always self-closing.

Tags are also opened and closed in a specific order too. The most recently opened tag must be the next closed tag. For example, if I have an h1 instead of a div, the h1 must be closed first.

<div>
  <h1>Hi</h1>
</div>

Hi

The above is correct.

<div>
  <h1>
    Hi
  </div>
</h1>

The above is incorrect. I can't close the div before I close the h1 since the h1 was the last one I opened.

Tags type

1. h1, h2, h3, h4, h5, and h6 – Headings. These are the six levels of headings and subheadings you can have. You can see up top of this page we have HTML which is an h1 and then below that we have Types of Tags which is an h2. An h2 is a subheading to an h1. An h3 is a subheading to a h2. Some schools of thought say each page should only have one h1. I'm of the opinion that just use these as it feels appropriate to. Like formatting a Microsoft Word document, there's no "correct" way to do it, just different ways that make more or less sense. Example

<h1>Document Title</h1>

2. p - Paragraph. You'll put a paragraph of text together inside of a p tag. Only text goes in p tags. Each one of these paragraphs is a p tag. Example:

<p>A paragraph of text</p>

3. a – Anchor. An a tag is a link to somewhere else. This is a link that goes nowhere. Every a tag needs a destination of where the link should take you. We'll talk about that in the Attributes section. Example:

<a href="https://icanq.dev">icanq</a>

4. div – Short for division. A div is sort of like a cardboard box. It's not really anything by itself; it's more defined by what's in it. It's a generic container tag for grouping together other things. You'll use a lot of divs. Very useful with CSS. In general, you want to group together "like" things into a containing tag (like a div) to keep them together. If you have a website with a list of blog posts that each have paragraphs, titles, images, etc. you'll group each post together in a div or other container-type tag typically.

<div style="width: 100px; height: 100px; background-color: red;"></div>

5. span – A container for small pieces of text. If a div is like a cardboard box, a span is like a Ziploc bag. It doesn't change the styling of anything by itself but it allows you use CSS and JavaScript later to make that text different in some way. Example:

   Here is some text. This text is in a span but it doesn't look any different.

<p>This is <span style="text-decoration: underline">important</span> text</p>

6. ol, ul, and li – Both ol and ul represent lists. In fact, this list of various tags is a ul! A ul is an unordered list: it's a list of things that could be shuffled and still mean the same thing. If I asked you to list all the teams in a sports league, or all the characters on a TV show, those could be presented in any order. An ol is an organized list: what comes first matters. If I ask you to list out the ten most populous cities in the world, there is an order to that and changing the order makes the list incorrect. In either list, each item in the list is an li.

<ol>
  <li>The First One</li>
  <li>The Second One</li>
  <li>The Third One</li>
</ol>

<ul>
  <li>An Item in the List</li>
  <li>Another Item in the List</li>
  <li>A Yet Different Item in the List</li>
</ul>

7. button – A … button. A button can be used by JavaScript to respond to a user clicking it, or it can be used by a form to signal a user has completed filling it and it should submit the data. Think of it like a doorbell to your house: you can put the doorbell button there but it's not going to do much unless you connect it to the buzzer. Example:

<button>Button!</button>

8. img – An image. You use this to load images onto the page. This can be confusing because you can use CSS to bring in images too. The key difference is that when the image is apart of the content, like a diagram that shows data you're talking about or a picture that shows something from the article, it should be an img tag. If it's a nice background image or something that's for decoration of your website, use CSS. An img tag needs a src to say where the image is coming from and alt to say what is in the image for screen readers so that the image will still be useful to blind people, people who are hard of seeing, and Google and Bing search engines. img are always self-closing tags. Example:

<img src="http://pets-images.dev-apis.com/pets/dog.jpg" alt="dog" />

9. input – Browser inputs. Sometimes you need to gather input from the user. Luckily for us, the browser is already really good at doing that. It gives us several types of inputs that you can use. One of the most common ones is the text input. You can also have these input tags do numbers, dates, colors, checkboxes, radio buttons, and others. We'll explore them more later when we talk about forms. Inputs are always self-closing tags.

<!-- these are the same, type="text" is the default -->
<input />
<input type="text" />

<input type="color" />
<input type="file" />
<input type="number" />
<input type="datetime-local" />
<input type="radio" />
<input type="checkbox" />

10. textarea – Similar to an input but for a lot more text. You'd type long-form responses in here that could linebreaks in it (a linebreak happens when you hit "return" or "enter" on your keyboard.) Despite never having anything inside of a textarea, it is not a self-closing tag. HTML is a really old language and so we have to live with some old quirks.

<textarea>Teks yang panjang banget</textarea>

11. select and option — Sometimes you want to limit a user to a certain group of options to select from. What country you're from, what month you were born in, etc. A select is a user-interactive input that a user can select an option from a dropdown menu. An option is one of the available options. Each option needs a value that will be sent back to the server if the user select that option. What's inside of the option is what shown to the user. Example

<select>
  <option value="seattle">Seattle</option>
  <option value="portland">Portland</option>
  <option value="san-francisco">San Francisco</option>
</select>

12. form – A group of html tags related to gathering data from a user. This will be some combination of input, textarea, and select tags. You can then use this form element to send that data to your server. A form tag itself doesn't show anything; it's a just a container for the other tags. We'll use them more later. For now, just know they exist.

<form>
  <input placeholder="First Name" />
  <input placeholder="Last Name" />
</form>

13. table, tr, and td – Like making a table in Word or Excel. If you have a table of data, this is the best way to display it. Just for your context, we used to do terrible, awful things with tables to make websites, way back when. Because of that, some tutorial will tell you never ever use tables. That's not good either because when you have tabular data (something you would put into Excel) then tables are very useful. The table is the container for the whole table, tr represents a row, and td represents one cell in the table.

<table>
  <tbody>
    <tr>
      <td>(0,0)</td>
      <td>(1,0)</td>
    </tr>
    <tr>
      <td>(0,1)</td>
      <td>(1,1)</td>
    </tr>
  </tbody>
</table>

and many more!

You can actually check the documentation from Mozilla MDN Documentation ↗