CodeNewbie Community 🌱

Kara Luton 🩰👩🏼‍💻
Kara Luton 🩰👩🏼‍💻

Posted on • Updated on • Originally published at dev.to

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.

Oldest comments (3)

Collapse
 
boothnation profile image
Nikki Booth

Great post, thank you!

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

This list got me wondering about the missing letters so I did a bit of digging.

For R there is <rp>, <rt>, and <ruby> for R - all are Ruby text related.

For X there is <xmp> - Not exactly sure I understand the use case for this one.

For W there is <wbr> - The only one here I've used before 😅 It creates an identified point to break to a new line when looking for how/where to wrap!

Source for all of the above: developer.mozilla.org/en-US/docs/W...

Collapse
 
tydch profile image
hcfj

The ABCs of HTML Elements post is a fantastic resource for web enthusiasts like me. Just as HTML elements structure a webpage, a well-planned kitchen renovation oakville can transform a home. This post's clarity and simplicity mirror the precision needed in both web design and home improvements. Great read!