This is an abbreviated list of what I believe are the "need to know" HTML
tags along with some useful information on their usage. For the full list
of all possible tags along with their attributes and usage, check out this
HTML element reference from Mozilla.
Fun fact: The first version of HTML developed in 1991 had 18 HTML tags.
Today there are 106 non-deprecated HTML tags.
Check out
this example code
showing a lot of these elements in action.
"Boilerplate" Elements
Called boilerplate because it is like a template of core elements that
every page needs. Here's an example of it all together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The description of this page">
<title>The title of this page</title>
</head>
<body>
</body>
</html>
Doctype
<!DOCTYPE HTML>
Defines the document type. Really only used for HTML code. Needs to be
the very first line of your HTML. It does not need a closing tag.
<html lang="en"></html>
This is the opening tag of your HTML code, with an attribute defining
the language. You know how your web browser will try to translate web
pages sometimes? this is how it knows what language it is. All of your
website's code (besides the DOCTYPE declaration) will exist inside this
tag.
Head
<head></head>
Contains the data about the page for the computer to parse. Scripts,
stylesheets, and meta data about the page are all expressed here. Not to
be confused with the header tag.
This defines the default width and scaling properties of the page.
Without this the page would not attempt to scale font sizes or width for
other screen sizes.
<meta name="description" content="The description of
this page">
The description of the page, which will show up as the text in search
results under the title (not always though. Sometimes Google picks its
own description based on relevance)
Title
<title>The title of this page</title>
The title of the page that shows up in the tab as the name of the page,
as well as the title in search results.
Stylesheet reference
<link rel="stylesheet" href="styles.css">
Links related documents to the current document in the head tag. Not to
be confused with hyperlinks on a page. It's mostly used to reference
stylesheets, and also favicons (the icon in the corner of a tab). You
must reference the correct file path via href.
Body
<body> </body>
Where the magic happens! The visible content of the page. There should
only be one body.
Content Sections
The different elements that make up the main sections of a page. Remember
that most of these don't add their own visual effects, we need CSS to do
that. And if you were to use an article where an aside should be, no alarms
would be sound. HTML is very forgiving, but it's our job to make sure we use
the right semantic elements for accessibility and so the browser understands
our intentions.
Div
<div> </div>
There was a time not too long ago where everything in HTML was DIVs,
short for division. You could write a whole HTML page in divs. And then
came HTML5 and semantic HTML, meant to be readable, easier to
understand, and accessibility. Now, divs should be a last resort when no
other tag really makes sense.
Header
<header></header>
A semantic element that represents that introductory content of a page,
including things like a logo, search bar, navigation, etc. Not to be
confused with the <head> tag, this tag should still
be used within the body tag and is for structuring content.
Main
<main></main>
The main content of the page. It would normally be a sibling to the
header and footer tags. It's also good to have this for accessibility so
that a user can easily skip to the main content of the page.
Footer
<footer></footer>
Typically used for the information at the bottom of a web page after the
main content.
Section headings. It's important to remember that there should only be
one h1 per page, and that the headings need to follow a logical
structure, ie don't jump from h2 to h4. A new section can start the
order over again beginning with h2. Only jump to a new heading level if
that content could be considered a subheading of the previous heading.
hierarchy example
Section
<section></section>
Semantic replacement for a div, defines a new section of the page
Article
<article></article>
Self contained composition of related information such as a blog post,
product, social media post, etc. Usually seen as multiple, similar
article elements in a list
Aside
<aside></aside>
Represents content that is only slightly related to the main content,
like content you would see in a side bar or an ad for more "related"
content.
Navigation
<nav></nav>
Used to contain navigation. This should be used for all types of
navigation, like the navigation the top of the page or in the footer,
bread crumbs, or sub navigations.
Text Formatting
Paragraph
<p></p>
Represents a paragraph of text
Line Break
<br>
Represents a line break. One of the few "void" tags that doesn't need a
separate closing tag
Bold text
<b></b>
For bold text formatting
Strong Text
<strong> </strong>
The semantic alternative to bold. For text that has a strong importance.
The difference between this and bold is subtle. Bold is just formatting
and strong is semantic. If you are trying to single that a section of
text is important, use strong.
Italic Text
<i></i>
For italic text formatting.
Emphasized text
<em> </em>
Emphasis, the semantic version of italic. The difference between this
and italic is subtle. You're supposed to use this tag for text you want
to emphasize, like "Do your homework, now!!" and italic for
text like proper names. Italic is just formatting and emphasis is
semantic. If you are trying to emphasize a section of text, use em.
Strike through text
<s></s>
For text you want to strike out
Short quote
To be, or not to be, that is the question <q></q>
For a short quote
Block Quote
To sleep, perchance to dream—ay, there's the rub: For in that sleep of
death what dreams may come, When we have shuffled off this mortal
coil, Must give us pause—there's the respect That makes calamity of so
long life.
<blockquote></blockquote>
For a multi-line quote you want to give more emphasis to or call out
Unordered list. Used as the container for a bulleted list along with
list items.
Ordered List
Get two pieces of bread.
Using a butter knife, slather peanut butter on one side of piece
Then, slather jelly on one side of the other piece
combine pieces of bread.
<ol>
<li>Get two pieces of bread.</li>
<li>Using a butter knife, slather peanut butter on one side of piece</li>
<li>Then, slather jelly on one side of the other piece</li>
<li>combine pieces of bread.</li>
</ol>
Ordered list. Used as the container for a numbered list along with list
items.
The semantic version of <ul>. This will also create a
bulleted list but is meant to be used for lists of links or navigation
items like what you would find in a website header.
List item
<li></li>
List item. Must be used within
<ul> <ol> or <menu>
Description List, Term, and Definition
<dl>
<dt></dt>
<dd></dd>
</dl>
Description List, containing a description term and description
definition. These are the elements I used to make this very list. Meant
for defining terms and their definitions. Multiple terms and definitions
can be contained in one list.
Span
<span> </span>
Similar to div for inline elements like text, it doesn't hold any mean
on it's own but can be used as a container for styling when nothing else
works.
Tables used to be used for layout purposes — creating rows and columns
for content — but now we have much better styling options for that with
CSS. So tables are used mostly only for their intended usage, displaying
data. I rely on table HTML for my rubric page
TR means "table row", Th means "table head" and Td means "table data". Use Tr to define a new row, th if the content is a header, and td if the content is data.
For showing an image on the page. The "src" attribute must be included
and reference the correct file path to the image. "Alt" text that
describes the image is crucial to have for accessibility purpose.
Adds an audio player to the website. "Controls" is an attribute that
makes controls visible. "Autoplay" and "muted" are attributes that can
also be added.
Adds a video player to the page. According to W3Schools, width and
height should be added to avoid page flickering issues. If you wanted to
embed a video from YouTube, Tiktok, or others, often those sites have
built-in embed codes you could copy and paste. Autoplay and muted are
attributes also available here.
<a href="https://www.google.com/"> Go to Google
</a>
Creates a link to another page. If the link goes to your own website,
you can include the relative path from the source rather than the
absolute url.
More info on relative vs absolute url paths. If you wanted to make sure a link opened in a new tab, you would add
the attribute target="_blank". You can nest other elements,
like an image, inside of a link tag. You should make link text
descriptive of where the page will lead. Avoid "click here" or "learn
more".
Button
<button>Click Me!</button>
A button. You should use buttons for interactive content that performs
an action on a page, and links for going to a new page. Styling doesn't
play a factor as much as functionality does. A lot of developers make
the mistake of making links that look like a button use the button tag.
A button won't do anything on its own without some javascript
controlling it, but I figured this section made the most sense. If a
button has the type="submit" it can be used to submit a form.
Detail and Summary (Accordion)
A Question
An answer
<details>
<summary>A Question</summary>
An answer
</details>
Summary and detail tags can be used together to create an "accordion"
style that opens more information on click. The preview text goes in
summary and the rest of the text is in the parent detail tag.
Forms
There are a lot of different input types and I'm only listing some of
them.
See all input types.
Form
<form></form>
All form fields should be nested inside this tag. The attribute "action"
should be added to process the form data, but that's beyond the scope of
Web 1.
Label
<label for="cheese">Do you like
cheese?</label>
The label for an input field. The "for" attribute is important to
include to connect the label to an input field. The "for" attribute will
be connected via the corresponding input's ID.
Fieldset and Legend
<fieldset>
<legend>Which of the following books have you read?</legend>
</fieldset>
A fieldset is for a group of related inputs and their labels. It's
useful for groups of radio buttons and checkboxes, or other groupings
within a larger form. The legend is the fieldset's label.
Text input
<label for="name">What is your name?</label>
<input type="textbox" id="name" name="name" />
There are a variety of input tags, and they are differentiated by their
"type" attribute. Text is a simple text input. Note that input tags are
void tags, meaning they are self closing and do not need
</input>.
All inputs need a unique ID to connect them to their labels. The
name, id, and value can be anything.
Password Input
<label for="secret">Tell me a secret</label>
<input type="password" id="secret" name="secret" />
Similar to a text input, but it makes the text into bullets as you type
•••
Email input
<input type="email" id="(unique id must be
added)">
The same as text input, but it is automatically validated to make sure
it's email format on submit
Checkbox Input
<input type="checkbox" id="(unique ID must be
added)">
Creates a checkbox. Checkboxes are used to turn a single value on or
off, where radio buttons are used to select one value of a list of
options. Multiple checkboxes and their labels should be nested inside of
a fieldset. Adding the attribute "checked" will check the box by
default. A group of checkboxes should belong to fieldset. The checkboxes
within the field set should share the same "name" attribute to connect
them. Here's an example:
<fieldset>
<legend>Which of the following books have you read?</legend>
<input type="checkbox" name="books" id="books-catcher" name="catcher" />
<label for="books-catcher">Catcher in the Rye</label>
<br>
<input type="checkbox" name="books" id="books-mockingbird" name="mockingbird"/>
<label for="books-mockingbird">To Kill a Mockingbird</label>
<br>
<input type="checkbox" name="books" id="books-outsider" name="outsiders"/>
<label for="books-outsiders">The Outsiders</label>
</fieldset>
Radio buttons, for selecting one option in a set of choices. Should
usually be inside of a field set. All of the radio buttons in a fieldset
should have the same "name" attribute to connect them and make it only
possible to select one.
Search Input
<label for="site-search">Search the site:</label>
<input type="search" id="site-search">
<button>Search</button>
Search input. This doesn't have any search functionality on its own, you
need server side code for that. It's good for accessibility to use this
tag for search.
For showing progress. Max is the max value and value is the current
value
Text Area
<label for="story">Tell me your life story</label><br>
<textarea id="story" rows="15" cols="50"> </textarea>
Text inputs are for just one line. For longer text entry, use textarea.
You can set the default size with the rows and cols attributes, but a
user can resize this box.
Submit Button
<button type="submit">Submit</button>
Lastly, to submit a form, you need a submit button (it can say something
else like send or complete, or whatever). This like all of the other
fields should be inside the form tag. You may also see input
type="submit" as a submit button.
