The ABCs of HTML Elements

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.

<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.

<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.

<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.

<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!

<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.

<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.

<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>.

<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.

<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.

<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.

<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.

<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.

<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 for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.