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!
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>
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>
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.
<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>
<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>
Used to create an HTML form for user input and it can contain several form elements i.e.
<button> and more!
<form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit!"> </form>
<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>
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.
K: Keyboard Input
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> tag defines a list item and is used inside ordered lists
<ol> and unordered lists
<ul> <li>Franklin</li> <li>Maggie</li> <li>Kara</li> </ul>
The main content of a document. This element should be unique to the document and not contain repeated content like sidebars, navigation links, etc.
A set of navigation links.
O: Ordered List
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> 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>
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>
<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.
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
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>
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 (2)
This list got me wondering about the missing letters so I did a bit of digging.
For R there is
<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...
Great post, thank you!