The ABCs of HTML Elements
Tags: beginners, html, webdev
Published: 2021-01-27 20:03:00

It can be a little overwhelming when first learning all of the HTML elements. Here's a quick overview of some of the more common elements for each letter of the alphabet!

**A**: Anchor `<a>`

The anchor tag defines a hyperlink which is used to link from one page to another.

```html
<a href="https://dev.to/karaluton">Kara Luton's dev profile!</a>
```

**B**: Button `<button>`

Every website or web app has one - a button! The `<button>` tag defines a clickable button. Inside the button you can put text and you should always specify a `type` attribute to tell browsers what type of button it is.

```html
<button type="button">A cool button</button>
```

**C**: Code `<code>`

Ever wanted to display a snippet of code on your website? The `<code>` tag allows you to do just that. The content inside is displayed in the browser's default monospace font.

You can see the use of `<code>` right here in this article in the examples above.

**D**: Div `<div>`

Ahh the `<div>` - one of the basic building blocks of HTML. The `<div>` tag defines a section in an HTML document.

```html
<div>
  <h1>DEV is an awesome community!</h1>
</div>
```

**E**: Em `<em>`

The `<em>` tag is used to _emphasize_ text. The text inside of an `<em>` tag is often displayed in italic.

```html
<em>This text is EMPHASIZED!</em>
```

**F**: Form `<form>`

Used to create an HTML form for user input and it can contain several form elements i.e. `<input>`, `<textarea>`, `<button>` and more!

```html
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit!">
</form>
```

**G**: ¯\_(ツ)_/¯

**H**: Headings `<h1>`-`<h6>`

The `<h1>` through `<h6>` tags define HTML headings. `<h1>` is the most important while `<h6>` is the least important heading.

```html
<h1>This is my main header</h1>
<h2>I'm important but not as important as the h1</h2>
```

**I**: Image `<img>`

Let's add some visuals to your page! The `<img>` tag is used to embed an image in an HTML page. There are two required attributes: `<src>` which specifies the path to the image and `<alt>` which is the alternate text for the image.

**J**: ¯\_(ツ)_/¯

**K**: Keyboard Input `<kbd>`

This is similar to the `<code>` tag, however, `<kbd>` is used to define keyboard input.

```html
<p>To copy text you will need to press the <kbd>Ctrl</kbd> + <kbd>C</kbd> buttons.</p>
```

**L**: List Item `<li>`

The `<li>` tag defines a list item and is used inside ordered lists `<ol>` and unordered lists `<ul>`.

```html
<ul>
  <li>Franklin</li>
  <li>Maggie</li>
  <li>Kara</li>
</ul>
```

**M**: Main `<main>`

The main content of a document. This element should be unique to the document and not contain repeated content like sidebars, navigation links, etc.

**N**: Navigation `<nav>`

A set of navigation links.

**O**: Ordered List `<ol>`

An ordered list that can be numerical or alphabetical. A `<li>` tag defines each individual item.

```html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>
```

**P**: Paragraph `<p>`

The `<p>` tag defines a paragraph. Browsers will automatically add a single blank line before and after each paragraph element.

```html
<p>This is a paragraph about how cool the DEV community is. Isn't it a great place to learn more about being a web developer and software engineer?!</p>
```

**Q**: Quotation `<q>`

When using the `<q>` tag the browser will normally insert quotation marks around the text.

```html
<q>It's not a bug. It's an undocumented feature!" -Unknown</q>
```

**R**: ¯\_(ツ)_/¯

**S**: Span `<span>`

A `<span>` is an inline container used to mark up part of a text or document. It's similar to the `<div>` element but is inline instead of block-level.

**T**: Table `<table>`

Defines an HTML table which consists of one `<table>` element and one or more `<tr>` - table row, `<th>` - table head and `<td>` - table cell elements.

```html
<table>
  <tr>
    <th>Dog name</th>
    <th>Dog age</th>
    <th>Dog breed</th>
  <tr>
  <tr>
   <td>Maggie</td>
   <td>5 years</td>
   <td>Golden retriever and border collie</td>
  <tr>
  <tr>
   <td>Franklin</td>
   <td>5 months</td>
   <td>Mini goldendoodle</td>
  <tr>
</table>
```

**U**: Unordered List `<ul>`

Similar to the ordered list `<ol>` except that this is an unordered, bulleted list.

```html
<ul>
 <li>Coca-cola</li>
 <li>Pepsi</li>
 <li>Dr. Pepper</li>
</ul>
```

**V**: Video `<video>`
Used to embed a video in a document. 

**W, X, Y and Z**: ¯\_(ツ)_/¯

---
Be sure to follow me on [Twitter](https://twitter.com/karaluton) for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.