DEV Community

Kara Luton
Kara Luton

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
gnclmorais profile image
Gonçalo Morais

If you accept SVG-related tags as well, we get a ocuple extra ones:

Collapse
 
jamesthomson profile image
James Thomson

Fun list. Inspired me to have a look for some of the unknown ones and found <wbr>, which I never knew existed, but could can think of a few times in the past it could have been quite useful.

Collapse
 
karaluton profile image
Kara Luton

There were a few on this list I had never heard of before! It's super interesting.