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.