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.
Top comments (3)
If you accept SVG-related tags as well, we get a ocuple extra ones:
gcould be developer.mozilla.org/en-US/docs/W...rcould be developer.mozilla.org/en-US/docs/W...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.
There were a few on this list I had never heard of before! It's super interesting.