Navigation Menu <nav>:

The function <nav> specifies to the browser which links are used for site navigation.
The <nav> element only contains links that act as navigation for the site.
Its main goal is to assist with accessibility and helping search engines understand how the website is structured.

Sample:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
                    

This element does not produce a visible product/change, so no outcome will be included.

Headers <header>:

The <header> element usually contains all introductory content or navigational links.
This can mean images, text, links, and author information.
You cannot place a <header> element inside an <address>, <footer>, or another <header> element.

Sample:

<header>
    <h1>Title</h1>
    <address>
        John Doe

        john@example.com

        123 Street, City
    </address>
</header>
                    

This element does not produce a visible product/change, so no outcome will be included.

Main Content <main>:

The <main> element usually contains all of the main content of a webpage.
There should only be one <main> element per page.
It also should not be placed inside <article>, <aside>, <footer>, <header>, or <nav> elements.

Sample:

<main>
    <p>
    This is a paragraph.
    </p>
    <p>
    This is another paragraph.
    </p>
</main>
                    

This element does not produce a visible product/change, so no outcome will be included.

Section <section>:

The <section> element signifies a section inside a document.
The main difference between <section> and <div> is that <section> can be viewed by browsers,
as in they will recognize that whatever is inside of <section> is a standalone section,
while <div> has no semantic meaning on its own,
so its contents aren't treated as a distinct section unless styled or given certain attributes.

<section>
    <h1>Title</h1>
    <p>Paragraph 1</p>
</section>
                    

This element does not produce a visible product/change, so no outcome will be included.

Article <article>:

The <article> element is similar to <section>,
except, it is intended for content that can stand alone independantly.
The element can feature content such as blog posts, user comments, or magazine articles.

Sample:

<article>
    <h1>Title</h1>
    <p>Standalone Paragraph</p>
</article>
                    

This element does not produce a visible product/change, so no outcome will be included.

Aside <aside>:

The <aside> element is used for containing additional information.
The <aside> element can be used for author bios, related links/articles, notes, sidebars, or tips.

Sample:

<aside>
    <p>
        You might also like:
    </p>
    <a href="#">Link</a>
</aside>
                    

This element does not produce a visible product/change, so no outcome will be included.

Address <address>:

The <address> element is used to define an author's or owner's contact information.
Contact information can be information such as an email address, phone number, address, URL, and more.

Sample:

<address>
    John Doe

    john@example.com

    123 Street, City
</address>
                    

Output:

Footer <footer>:

The <footer> element is found at the bottom of a section/page.
It typically includes information about the author, copyright rules, contact info, and related links.
Any contact info inside the <footer> is typically put into an <address> element.

Sample:

<footer>
    <p>
        Copyright info here:
    </p>
    <address>
        Written by: Rebytre
        rebytre101@gmail.com
    </address>
</footer>
                    

This element does not produce a visible product/change, so no outcome will be included.

Span <span>:

The <span> element acts as a group, with anything inside of it being a part of that group.
It is useful for affecting multiple elements at once.
Unlike <div>, <span> is an inline element,
meaning it doesn't create new indentations around it.
This is useful for applying styles to certain sections of text without creating unnecessary indentation.

Sample:

<p>
    This word is <span id="spanDemoE1">Red</span>. 
    This word is <span id="spanDemoE2">Blue</span>. 
</p>
                    

Outcome:

This word is Red.
This word is Blue.

Divides <div>:

The <div> element acts as a group, with anything inside of it being a part of that group.
It is useful for affecting multiple elements at once.
Unlike <span>, <div> is a block-level element,
meaning it creates indentations before and after itself.
This is usually used for dividing code into multiple easier-to-manage sections.
Make sure not to add <div> elements into inline elements (ie. <a>, <span>, etc).

Sample:

<div id="divDemoE1"><p>This text is red. </p></div>
<div id="divDemoE2"><p>This text is blue. </p></div>

                    

Output:

NOTE: Indentation on top

NOTE: Will also be indented below

Headings <h𝔁>:

Probably the most basic of all HTML elements,
the <h𝔁> function produces a heading. Depending on the number "𝔁" (must be between 1 and 6),
it produces a header. The lower "𝔁" is as a number, the bigger the heading.
Below are examples of each header size, descending from greatest to smallest:

Sample:

<h1>Heading No.1 </h1>
<h2>Heading No.2 </h2>
<h3>Heading No.3 </h3>
<h4>Heading No.4 </h4>
<h5>Heading No.5 </h5>
<h6>Heading No.6 </h6>
                    

Output:

Heading No.1 <h1>

Heading No.2 <h2>

Heading No.3 <h3>

Heading No.4 <h4>

Heading No.5 <h5>

Heading No.6 <h6>

Paragraphs <p>

The <p> element is the main way of printing out text.
It doesn't follow spacing within the code, unlike <pre>.
This very paragraph is an example of <p>.

Sample:

<p>
    The <p> element is the main way of printing out text. 
    It doesn't follow spacing within the code, unlike <pre>. 
    This block of text itself is an example of the <p> element. 
</p>
                    

Outcome can be found above the code.

Line Breaks <br>:

The element <br> can be put almost anywhere and creates a line break in the program.
It doesn't have a closing tag.
It functions similarly to a newline character (\n) in languages such as Python.

Sample:

<p>
    This paragraph will be<br><br> split in half.
</p>
                    

Outcome:

This paragraph will be

split in half.

Horizontal Rule <hr>:

The <hr> element creates a horizontal line across the page to indicate a new part of the website.
It is an empty element and does not require a closing tag.

Sample:

<hr>
<hr>
<hr>
                    

Outcome:

Blockquote <blockquote>:

The <blockquote> element is used to indicate that a section of text is quoted from an external source.
It must include a "cite" attribute, followed by a link to the source the text is quoted from.

Sample:

<blockquote cite="www.google.com">
    This text is from a different source.
</blockquote> 
                    

This text is from a different source.

Code <code>:

The <code> element is used to define whatever text is inside the element as being computer code.

Sample:

<p>The <code>code</code> element is used to define code.</p>
                    

Output:

The code element is used to define code.

Preformatted Text <pre>:

The <pre> element is used to write pre-formatted text within a page.
It preserves all spaces and line breaks, and typically uses a thinner/monospace font.

Sample:

<pre>Test      te  xt.</pre>
                    

Output:

Test      te  xt.

Unordered List <ul>

The element <ul> creates an unordered list,
meaning the items are not numbered, but instead use bullet points.
As with all lists, they can be nested into each other.

Sample:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
                    

Output:

• Item 1
• Item 2
• Item 3

Menu <menu>:

The <menu> element is used to define an unordered list of content.
It is mainly used for interactive menus or context menus.

Sample:

<menu>
    <li>Command 1</li>
    <li>Command 2</li>
    <li>Command 3</li>
</menu>
                    

Output:

Ordered List <ol>:

The element <ol> creates an ordered list, meaning it is numbered.
As with all list, they can be nested.

Sample:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

Ordered list - Attributes

Unlike other types of lists,
ordered lists have 3 special attributes that can be applied to them.
The first is the "start" attribute, which can change the starting number of the list.

Sample:

<ol start="2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

2. Item 1
3. Item 2
4. Item 3

The second is "reversed", which makes the list count downwards.

Sample:

<ol reversed>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

1. Item 1
2. Item 2
3. Item 3

The third is the "type" attribute, which changes the marker style.

Sample:

Numerical Digits / "1" (Default)

<ol type="1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

Alphabetical Letters (Lowercase) / "a"

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

Alphabetical Letters (Uppercase) / "A"

<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

Roman Numerals (Lowercase) / "i"

<ol type="i">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

Roman Numerals (Uppercase) / "I"

<ol type="I">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
                    

Output:

1. Item 1
2. Item 2
3. Item 3

List Items <li>:

The element <li> is used in creating items on a list.
It is placed within a larger list element, such as <ul> or <ol>.
It cannot be added into a <dl> list.
Anything inside an <li> becomes a list item.

Sample:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
                    

Output:

• Item 1
• Item 2
• Item 3

Description List <dl>:

The element <dl> creates a list where each item has a description.
Unlike <ol> and <ul>, description lists use a different structure with <dt> and <dd> instead of <li>.

Sample:

<dl>
    <dt>Item 1</dt>
    <dd>Description 1</dd>
    <dt>Item 2</dt>
    <dd>Description 2</dd>
    <dt>Item 3</dt>
    <dd>Description 3</dd>
</dl>
                    

Outcome:

Item 1

Description 1

Item 2

Description 2

Item 3

Description 3

Description Term <dt>:

The element <dt> is similar to the element <li>,
except specifically for a description list.
However, <dt> acts as the term or label being described.

Sample:

<dl>
    <dt>Item 1</dt>
    <dd>Description 1</dd>
    <dt>Item 2</dt>
    <dd>Description 2</dd>
    <dt>Item 3</dt>
    <dd>Description 3</dd>
</dl>
                    

Outcome:

Item 1

Description 1

Item 2

Description 2

Item 3

Description 3

Description Term Details <dd>

The element <dd> creates a description in the list.
It is always paired with a <dt> element.

Sample:

<dl>
    <dt>Item 1</dt>
    <dd>Description 1</dd>
    <dt>Item 2</dt>
    <dd>Description 2</dd>
    <dt>Item 3</dt>
    <dd>Description 3</dd>
</dl>
                    

Outcome:

Item 1

Description 1

Item 2

Description 2

Item 3

Description 3

Image <img>:

The <img> element creates a holding space for an image to be inserted.
The <img> has no end tag.
The <img> has 2 necessary attributes, those being "src" and "alt".
Specifying width and height helps browsers reserve space for the image and improves preformance.

Sample:

<img alt = "HTML5" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/800px-HTML5_logo_and_wordmark.svg.png" width = "200px" height = "200px">
                    

Output:

Image Attributes:

"alt"

- This attribute adds text to an image that displays instead of the image if the image fails to load due to a faulty link or poor connection. Its value should be the text you want displayed.

"src"

- This attribute tells the program the file path/link to find the image that needs to be inserted.

"height"

- Specifies what the height of the image should be in pixels.

"width"

- Specifies what the length of the image should be in pixels.

"loading"

Lets the browser know when to load the image. This is useful for managing resources and controlling lag. Here is a ul of possible values:

• "auto" (Lets the browser decide by itself)
• "eager" (Loads the image right away)
• "lazy" (Avoids loading the image until it is within the viewport)

"decoding"

Lets the browser know how to decode the image. Useful for avoiding higher rendering times. Here is a ul of possible values:

• "auto" (Lets the browser choose)
• "async" (Decodes the image in the background. Great for avoiding page render)
• "sync" (Decodes the image immediately, increasing rendering time. Only used when necessary)

"crossorigin"

- Used to protect information when loading items from different sources. Crossorigin can have two possible values:

• - "anonymous" (Login info + cookies are not sent/kept private)
• - "use-credentials" (Login info + cookies are sent/not kept private)

"referrerpolicy"

- Limits how much information the url within the link is allowed to receive from the user. This is useful for security, performance, and compliance reasons. There are a couple different possible values for the attribute. They are:

• "no-referrer" (Sends NO referrer info at all.)
• "no-referrer-when-downgrade" (Sends full referrer info to HTTPS destinations(more secure than HTTP), but no info to HTTP destinations.)
• "origin" (Only tells the url what website they came from, excluding any other info.)
• "origin-when-cross-origin" (Sends full url if the link is on the same site, but only sends url if the link is on a different site.)
• "same-origin" (Only sends full referrer info if the link is on the same site, otherwise it sends nothing.)
• "strict-origin" (Sends the origin only to HTTPS sites only.)
• "unsafe-url" (Sends full url referrer to any destination, which is incredibly unsafe.)

Source <source>:

The <source> element is used to specify multiple media resources for any type of media.
By using the media attribute with CSS media queries, you can change the media being displayed based on the viewport.

Sample:

<source srcset="image.svg" media="#" type="image/svg">
                    

Output:

By itself, <source> does not produce a visible result, and as such no output will be shown. See below for an example involving <source>.

The <source> always must have attributes. Here is a ul of them:

"media"

- Used to specify viewport limitations. Attribute value is in the CSS language.

"src"

- Used only if <source> is inside of <video> or <audio>. Specifies the source of the image (URL/Path).

"srcset"

- Used only if <source> is inside of <picture> or <img> for responsive images. Specifies the source of the image (URL/Path).

"type"

- Used to define the type of media within the source element (ie. media/type, image/png).

Pictures <picture>:

The <picture> element is essentially a more adaptable version of <img>,
being able to render different images (or different variants of the same image) depending on the viewport size or device capabilities.

Sample:

<picture>
    <source srcset="image.svg" media="#" type="image/svg">
    <source srcset="image.png" media="#" type="image/png">
    <img alt="Nature Photo" src="test img">
</picture>
                    

Output:

Audio <audio>:

The <audio> element is used to add audio content into a document.
<source> elements are used inside of <audio>,
however text may also be added after as a fallback measure in case the audio files don't work.

Sample:

<audio>
    <source src="###.mp3" type="audio/mp3">
    <source src="###.mp3" type="audio/mp3">
    Audio failed.
</audio>
                    

Output:

The <audio> element also includes a few attributes that can be used to alter how the audio file is played. They are:

"autoplay"

- Inserted into <audio>, it tells the browser to play the audio file immediately. Only functions if audio file is muted/site is trusted on modern browsers due to privacy reasons.

"controls"

- Strongly recommended, tells the browser to display controls, such as a volume slider, pause button, etc.

"loop"

- Tells the browser to loop the audio file.

"muted"

- Tells the browser that the audio file should be muted.

"preload"

Tells the browser when to load the audio file. Possible values for this attribute are:

• "auto" (Automatically loads the entirety of the audio file. Only use this if the audio file is absolutely necessary.)
• "metadata" (Only loads the metadata of the audio file. This is good for limiting resources used on a website.)
• "none" (The audio file does not load at all, including the metadata.)

"src"

Identifies the path to the audio file.

Video <video>:

The <video> element is used to embed a video into a page.
<video> typically includes one or more <video> elements along with text as an error message.

Sample:

<video>
    <source src="###.mp4">
    <source src="###.mp4">
    Video failed.
</video>
                    

Output:

The <video> element also has a few attributes that can be used to alter how the element functions. They are:

"autoplay"

- Inserted into <video>, it tells the browser to play the video file immediately. Only functions if video file is muted/site is trusted on modern browsers due to privacy reasons.

"controls"

- Highly suggested, tells the browser to display controls, such as a volume slides, pause button, etc.

"height"

- Specifies how tall the video should be on the page

"loop"

- Tells the browser to loop the video file.

"muted"

- Tells the browser that the video file should be muted.

"poster"

- Specifies an image to be shown until the video loads/user presses the play button. Similar to a thumbnail.

"preload"

Tells the browser when to load the video file. Possible values for this attribute are:

• "auto" (Automatically loads the entirety of the video file. Only use this if the video file is absolutely necessary.)
• "metadata" (Only loads the metadata of the video file. This is good for limiting resources used on a website.)
• "none" (The video file does not load at all, including the metadata.)

"src"

Identifies the path to the video file.

"width"

- Specifies how wide the video should be on the page.

Track <track>:

The <track> element is used to add text tracks (subtitles) for <audio> or <video> elements.
Tracks are formatted in WebVTT format (.vtt files).

Sample:

<video>
    <source src="###.mp4">
    <source src="###.mp4">
    <track src="###.vtt" kind="subtitles" scarlang="en" label="English">
    Video failed.
</video>
                    

Output:

I unfortunately don't have a subtitle file so... sorry!

The <track> element also has a few possible attributes. They are:

"default"

- Specifies that the track should be enabled unless the user's preferences indicate that another track should be more appropriate.

"kind"

- Specifies the type of text track. Values are:

• "captions" (dialogue and sound effects - perfect for deaf users)
• "chapters" (chapter titles)
• "descriptions" (textual description of the video content - perfect for blind users)
• "metadata" (content used by scripts - not visible to the user)
• "subtitles" (regular subtitles)

"label"

- Specifies the title of the track.

"url"

- Specifies a URL or file path to the track file.

"srclang"

- Specifies the language of the track.

Figure <figure>:

The <figure> element is used to define media with a caption.
A <figure> element can work without <figcaption>, but including one provides context.

Sample:

Output:

Figure Caption <figcaption>:

The <figcaption> element defines a caption for any piece of media within a <figure> element.
It absolutely must be used inside a <figure> element.

Sample:

<figure>
    <img src="#" alt="text">
    <figcaption>The photo above is really cool.</figcaption>
</figure>
                    

Output:

This element must be used within another to work. See next section for an example.

Link <a>:

The <a> element defines a hyperlink,
which is used to link one page, rescource, or location to another.

Sample:

<a href="https://www.w3schools.com/tags/tag_a.asp"> Element</a>
                    

Output:

Links - Attributes:

Links have a total of nine different attributes that can be added onto them. This excludes the "style" attribute that can be applied onto just about every element.

"download"

The "download" attribute specifies to the browser to download the target rather than attempting to open it.
It can be found in two forms.
The first form is an empty attribute, telling the browser to download the item.
The second form instead has a string value,
telling the browser to save the file with the custome name provided (the string inside "download").

Sample:

<a href="###.pdf" download>Download</a>
                    

or:

<a href="###.pdf" download="Custom_File">Download</a>
                    

"href"

The "href" attribute is the only necessary attribute of the <a> element.
The "href" attribute specifies the url/path that the link should go to.
You can also use href="#top" or href="#" to link to the top of the current page.
There are also two values that can be used in an "href" attribute, those being "mailto:[email]" (navigates to email) and "tel:[number]" (navigates to phone number).

Sample:

<a href="url/path">Link</a>
                    

"hreflang"

The "hreflang" attribute specifies the language of the page the href url links to.
It is only used if the href attribute is set.

Sample:

<a href="#" hreflang="language abbreviation (ex: "en", "fr", etc.)">Link</a>
                    

"media"

The "media" attribute is used to specify the media/device the linked document is optimized for, using the same syntax as CSS media queries.

Sample:

<a href="#" media="value">Link</a>
                    

"ping"

The "ping" attribute can send a short message to a specified URL whenever a user clicks the link.
This attribute is useful for tracking/monitoring.

Sample:

<a href="#" ping="link">Link</a>
                    

"referrerpolicy"

The "referrerpolicy" attribute limits how much information the URL within the link is allowed to receive from the user.
This is useful for security, performance, and compliance reasons.
There are a couple different possible values for the attribute.
They are:

"no-referrer"

Sends NO referrer info at all.

"no-referrer-when-downgrade"

Sends full referrer info to HTTPS destinations(more secure than HTTP), but no info to HTTP destinations.

"origin"

Only tells the url what website they came from, excluding any other info.

"origin-when-cross-origin"

Sends full url if the link is on the same site, but only sends url if the link is on a different site.

"same-origin"

Only sends full referrer info if the link is on the same site, otherwise it sends nothing.

"strict-origin"

Sends the origin to HTTPS sites only.

"unsafe-url"

Sends full url referrer to any destination, which is incredibly unsafe.

Sample:

<a href="#" referrerpolicy = "value">Link</a>
                    

"rel"

The "rel" attribute lets the browser know the relationship between the link and the site.
Here are its possible values:

"alternate"

Provides a link to an alternate version of the document, such as mirrored, translated, etc.

"author"

Provides a link to the author of the document.

"bookmark"

A url used for bookmarking.

"canonical"

Tells browsers this is the preferred version of the page.

"external"

The linked document is not on the same site.

"help"

Provides a link to a help document.

"license"

Provides a link to the licensing information for the document.

"next"

Provides a link to the next document in the series.

"nofollow"

Indicates a link should not influence search engine rankings (ex: paid links). Recommended for SEO compliance (like Google, Opera, etc.).

"noopener"

Prevents the newly opened page from being able to control or interact with the page that opened it. Very useful for preventing tabnabbing.

"noreferrer"

Makes the referrer unknown.

"prev"

Previous document in the series.

"search"

Links to a search tool used for the document.

"sponsored"

Paid or affiliate link.

"tag"

A tag/keyword for the current document.

"ugc"

Link was posted by a user.

Sample:

<a href="#" rel="value">Link</a>
                    

"target"

Specifies how to open the linked url.
There are five possible values:

"_blank"

Opens url in a new window/tab.

"_self"

Opens the linked document in the same browsing context (default).

"_parent"

Opens the linked document in the parent frame.

"_top"

Opens linked document in the full body of the window.

"Frame name"

Not literally "framename", but rather the name of the target iframe.

Sample:

<a href="#" target="value">Link</a>
                    

"type"

Specifies the MIME type of the url.
A list of possible values can be found here.

"accesskey"

Specifies a keyboard shortcut to access a link.

Sample:

<a href="#" accesskey="l">Link</a>
                    

Navigation <nav> (AGAIN):

While the <nav> element may have already been explained in 3A,
it is important to note <nav>'s importance in navigation through links.
It is common to find the <nav> element containing links used for navigation.
See 3A for information about <nav>.

Form <form>:

The <form> element is used to create an HTML form designed to collect user input.
It can contain one or more form elements.

Sample:

Placeholder text... (I'm not making an entire form for this right now, sorry!)

The <form> element can have a few attributes that come with it, those being:

"accept-charset"

- Specifies the character encodings that should be used for the form submission.

"action"

- Specifies where to send the form-data upon submission.

"autocomplete"

- Specifies whether a browser should enable autocomplete (yes/no).

"enctype"

- Specifies whether or not the information should be encrypted. Potential values (only if method="post"):

• "application/x-www-form-urlencoded" (Enabled by default, encodes all text before sending)
• "multipart/form-data" (Necessary if the user wants to send a file through the form)
• "text/plain" (Sends the info in plain text)

"method"

- Specifies the HTTP method to use when sending data. Values are:

• "dialog" ((When the form is inside a <dialogue> element) Closes the dialog and causes a submit event to be executed on submission, without submitting data or clearing the form)
• "get" (Default. Sends the data in name/value pairs.)
• "post" (Sends the form-data as HTTP post transaction)

"name"

- Specifies the name of the element.

"novalidate"

- Specifies that the form should not be validated upon submission.

"rel"

The "rel" attribute lets the browser know the relationship between the link and the site. Here are its possible values:

• "external" (The linked document is not on the same site.)
• "help" (Provides a link to a help document.)
• "license" (Provides a link to the licensing information for the document.)
• "next" (Provides a link to the next document in the series.)
• "nofollow" (Used on links that send to an unendorsed document (similar to a paid link). Necessary on Google.)
• "noreferrer" (Makes the referrer unknown.)
• "prev" (Previous document in the series.)
• "search" (Links to a search tool used for the document.)

"target"

Specifies where to open the response for submission.

• "_blank" (Opens url in a new window/tab.)
• "_self" (Opens the linked document in the same frame (default)).
• "_parent" (Opens the linked document in the parent frame.)
• "_top" (Opens linked document in the full body of the window.)
• "Frame name" (Not literally "framename", but rather the name of the target iframe.)

Label <label>:

The <label> element is used to provide a label for certain elements.
This is useful for screenreaders and for identifying certain elements.

Sample:

<label for="testMeter">This is a label for the meter</label>
<meter id="testMeter" min="0" low="3" optimum="5" high="7" max="10" value="2">2 out of 10</meter>
                    

Output:

The <label> element only has one possible attribute, the "for" attribute.
It is used to provide the id of an element that it should affect.
This attribute is highly recommended.

Button <button>:

The <button> element is used to create a clickable button.
It is generally better to use <button> rather than creating a button using <input>.

Sample:

<button type="button">Click Me!</button>
                    

Output:

The <button> element also has a few possible attributes. They are:

"autofocus"

- Makes it so that the button is automatically focused on when opening the website. This attribute should only be on one element in the entire website.

"disabled"

- Disables the button.

"form"

- Specifies if the button is related to a form, and the value should be the ID of the form.

"formaction"

- Specifies to which URL it should send the data.

"formenctype"

- Specifies whether or not the information should be encrypted. Potential values:

• "application/x-www-form-urlencoded" (Enabled by default, encodes all text before sending)
• "multipart/form-data" (Necessary if the user wants to send a file through the form)
• "text/plain" (Sends the info in plain text)

"formmethod"

- Defines the HTTP method to use, either "get" or "post".

"formnovalidate"

- Specifies that the form should not be validated upon submission.

"formtarget"

Specifies where to open the response for submission.

• "_blank" (Opens url in a new window/tab.)
• "_self" (Opens the linked document in the same frame (default)).
• "_parent" (Opens the linked document in the parent frame.)
• "_top" (Opens linked document in the full body of the window.)
• "Frame name" (Not literally "framename", but rather the name of the target iframe.)

"name"

- Name of the button.

"value"

- Specifies an initial value of the button that should be sent when pressed.

"type"

Specifies the type of the button. Possible values include:

• "button" (A regular clickable button)
• "reset" (resets form fields to default values)
• "submit" (submits a form)

Select <select>:

The <select> element is used to create dropdown menus.
It is most often used in forms.

Sample:

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>
                    

Output:

The <select> element also contains a few potential attributes. They are:

"autofocus"

- Specifies that the element should automatically gain focus upon the site loading.

"disabled"

- Specifies that the element should be disabled.

"form"

- Defines which form the element belongs to.

"multiple"

- Specifies that multiple options can be picked.

"name"

- Defines a name for the element.

"required"

- Specifies that the field must be filled to submit the form.

"size"

- Defines how many options should be visible in the list.

Option <option>:

The <option> element is used within <select> elements,
to specify an option for the list.

Sample:

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>
                    

Output:

The <option> element also contains a list of attributes.
They are as follows:

"disabled"

- Specifies that an option should be disabled.

"label"

- Specifies a shorter label for an option.

"selected"

- Specifies that the option should be pre-selected upon rendering the site.

"value"

- Specifies the value that should be sent to the server.

Input <input>:

The <input> element is used to create a single-line input field.
It is the most important form element.

Sample:

<input type="text" placeholder="type here">
                    

Output:

The <input> has a multitude of different attributes that can be attached to the element.

"accept"

- Specifies a filter for what file types are accepted. Only applies to input type "file". Possible values:

• "file_extension" (Specify the accepted file extensions (eg. png, pdf, etc.))
• "audio/*" (All sound files are accepted)
• "video/*" (All video files are accepted)
• "image/*" (All image files are accepted)
• media_type (All media files accepted)

"alt"

- Specifies an alternate text for images (only if input type is image)

"autocomplete"

- Specifies whether or not an input element should have autocomplete or not.

"autofocus"

- Specifies whether the element should get focus upon rendering the page (only one allowed per page).

"checked"

Specifies that the element should be pre-selected when the page loads (for type "checkbox" or "radio")

"disabled"

- Specifies if an element should be disabled.

"form"

- Specifies what form the element belongs to. Value should be the ID of the form.

"formaction"

- Specifies to which URL it should send the data.

"formenctype"

- Specifies whether or not the information should be encrypted. Potential values:

• "application/x-www-form-urlencoded" (Enabled by default, encodes all text before sending)
• "multipart/form-data" (Necesary if the user wants to send a file through the form)
• "text/plain" (Sends the info in plain text)

"formmethod"

- Defines the HTTP transaction, "get" or "post"

"formnovalidate"

- Specifies that the form should not be validated upon submission.

"formtarget"

Specifies where to open the response for submission.

• "_blank" (Opens url in a new window/tab.)
• "_self" (Opens the linked document in the same frame (default)).
• "_parent" (Opens the linked document in the parent frame.)
• "_top" (Opens linked document in the full body of the window.)
• "Frame name" (Not literally "framename", but rather the name of the target iframe.)

"height"

- Specifies the height of an input element (only if the input element is "image" type).

"list"

Refers to a <datalist> element that contains predefined options for the <input> element.

"max"

- Specifies the maximum value for an <input> element. Can be either date or number.

"maxlength"

- Specifies the maximum length of the <input> element.

"min"

- Specifies the minimum value for an <input> element. Can be either date or number.

"minlength"

- Specifies the minimum length of the <input> element.

"multiple"

- Specifies that the input element can take more than one value at a time (particularly useful for file submission)

"name"

- Provides a name for the input element.

"pattern"

- A regular expression that the input's element is checked against. The structure of the pattern value is (within square brackets) any symbols that need to match up to (ie. [a-zA-Z]), and how long it should be (in curly brackets ie. {4}).

"placeholder"

- Placeholder text for the input field.

"readonly"

- Specifies that an input field is read only. Great for limiting choices based on other values given.

"required"

- Specifies that the field is required before submission.

"size"

- Specifies the width of an input element. Measured in characters.

"src"

Specifies the URL of the image to use as a submit button (only for image type input elements).

"type"

- Possibly the attribute with the largest plethora of possible values, it specifies the type of input to be used in the element. The possible values are as follows:

• "button" (Clickable Button)
• "checkbox" (Checkbox)
• "color" (Color picker)
• "date" (Date control)
• "datetime-local" (Date + Time control)
• "email" (Email Address)
• "file" (File select + Browse button)
• "hidden" (Hidden input field)
• "image" (Image as submit button)
• "month" (Month + Year control)
• "number" (Field for entering a number)
• "password" (Password Field)
• "radio" (Radio Button)
• "range" (Range Control (similar to slider))
• "reset" (Reset Button)
• "search" (Text field for searching a string)
• "submit" (Submit button)
• "tel" (Field for telephone number)
• "text" (Text field)
• "time" (Control for entering time)
• "url" (URL Field)
• "week" (Control for week and year)

"value"

- Specifies a pre-existing value for the input element.

"width"

- Specifies the width of an input field (applicable only to image type)

Text Area <textarea>:

Similar to <input>, <textarea> is exactly the same except it allows for multi-line text input.
It is useful for whenever a user needs to submit a larger amount of text information.

Sample:

<textarea>This is a <textarea>.</textarea>
                    

Output:

Here are the potential attributes and their values for the <textarea> element:

"autofocus"

- Specifies that the text area should get automatic focus when the page loads.

"cols"

- Specifies the width of the input area.

"disabled"

- Specifies that the element should be disabled.

"form"

- Specifies the form that the element is apart of.

"maxlength"

- Specifies the maximum number of characters allowed within the input field.

"name"

- Specifies the name of the element.

"placeholder"

- Provides a default value for the element.

"readonly"

- Makes an <textarea> element read only, meaning the value cannot be changed by the user.

"required"

- Specifies that the field must be filled in order to submit the form.

"rows"

- Specifies the vertical length of the element.

"wrap"

- Specifies whether the text submitted should contain new lines. Value is either "hard (does wrap)" or "soft (don't wrap)".

Field Set <fieldset>:

The <fieldset> element is used to add a border around a form.

Sample:

<fieldset>
    <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</fieldset>
                    

Output:

The <fieldset> element has a few attributes that can be used.
They are:

"disabled"

- Specifies that a group of elements within the <fieldset> element should be disabled.

"form"

- Specifies which form the element belongs to.

"name"

- Specifies a name for the <fieldset> element.

Legend <legend>:

The <legend> element provides a title that can be found within the <fieldset> element.

Sample:

<fieldset>
    <legend>Legend:</legend>
        <select>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
</fieldset>
                    

Output:

Caption <caption>:

The <caption> element is used to add a caption to a table.
It must be inserted immediately after the <table> opening tag.

Sample:

<table>
    <caption>This is a caption</caption>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

Column Group <colgroup>:

The <colgroup> element is a container for all <col> elements.
It must be within a <table> element, after the caption and before any table data.

Sample:

<table>
    <colgroup>
        <col span="2" style="background-color:#ff0000">
    </colgroup>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

Column <col>:

The <col> element is used to specify column properties for each column within a <colgroup> element.
They must ALWAYS be within the <colgroup> element.
The only non-CSS attribute that can be applied to <col> (minus the universal attributes) is "span", indicating how many columns this should affect.
Please note that only certain CSS properties (such as width, background, or border).

Sample:

<table>
    <colgroup>
        <col span="2" style="background-color:#ff0000">
    </colgroup>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

Table <table>:

The <table> element is used to create a table,
and is used as a container for all other table related elements.

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

Table Head <thead>:

The <thead> element defines the head section of the table.
This does not include <caption> or <colgroup>.
The element includes all headers.

Sample:

<table>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

No visible changes occur, so no output will be shown.

Table Body <tbody>:

The <tbody> element defines the body section of the table.
This includes all table values (apart from footers).

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tbody>
        <tr><td>Item 1</td><td>Item 2</td></tr>
    </tbody>
</table>
                    

Output:

No visible changes occur, so no output will be shown.

Table Footer <tfoot>:

The <tfoot> element defines the footer section of the table.
This contains rows that summarize or provide footer information for the table.

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
    <tfoot>
        <tr><td>Footer Item 1</td><td>Footer Item 2</td></tr>
    </tfoot>
</table>
                    

Output:

No visible changes occur, so no output will be shown.

Table Row <tr>:

The <tr> element is used as a container for <th> or <td> elements.
It is used to identify a table row.

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

Table Header <th>:

The <th> element is used to define a header cell in a table.
Any text within will be automatically centered and bolded.

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

The <th> element can also have a few attributes:

"colspan"

- Specifies the amount of columns the header should span.

"headers"

- Mainly for screen readers, "headers" lets you specify what header a table value is apart of. Must put the id of said header within the attribute.

"rowspan

- Specifies the amount of rows the header should span.

"scope"

- Specifies what the header is for. There are four options:

• "col" (Affects the column under/above it)
• "colgroup" (Affects 2 or more columns under/above it)
• "row" (Affects the row to the left/right of the header)
• "rowgroup" (Affects 2 or more rows to the left/right of the header)

Table Data <td>:

The <td> element defines a data cell inside a table.

Sample:

<table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Item 1</td><td>Item 2</td></tr>
</table>
                    

Output:

The <td> element can also have a few attributes:

"colspan"

- Specifies the amount of columns the header should span.

"headers"

- Mainly for screen readers, "headers" lets you specify what header a table value is apart of. Must put the id of said header within the attribute.

"rowspan

- Specifies the amount of rows the header should span.

Canvas <canvas>:

The <canvas> element is used whenever a canvas is used in the site.
The <canvas> creates a blank canvas, however JS is needed to draw inside of it.
It acts as a container for the graphics, and any text within is displayed in case the canvas isn't available/doesn't work.
To specify, JavaScript is used to draw graphics on the canvas by targeting it via it's id or another selector.
The JavaScript must always be OUTSIDE of the <canvas> element otherwise it becomes text.

Sample:

<canvas id="Canvas1">
    This canvas failed to load.
</canvas>

(Insert JS here)
                    

Output:

(Insert JS here)

Details <details>:

The <details> element is used to add dropdown details that can show and hide on demand.
This element must be used with the <summary> element (see below).

Sample:

<details>
    <summary>Test Dropdown</summary>
    <p>Hey, it works! This is only a paragraph, but we can also add other elements such as lists.</p>
</details>
                    

Output:

The <details> element only has two attributes, being "open", meaning the dropdown is open by default, and "closed", providing the opposite effect to "open".

Summary <summary>:

The <summary> element is used to provide a heading for a dropdown created by a <details> element.
It always must be included within a <details> element, and always must be the first child.
The <summary> element can be clicked, triggering the <details> element to pop up.

Sample:

<details>
    <summary>Test Dropdown</summary>
    <p>Hey, it works!</p>
</details>
                    

Output:

This element must be used within another element to produce a change.
Please see above for an example involving <summary>.

Dialogue <dialog>:

The <dialog> element creates a dialogue box.
This is used for notifications, popups, and other similar applications.
Note to self - When programming, use DIALOG and not DIALOGUE!

Sample:

<dialog open>
    This is a dialogue window.
</dialog>
                    

Output:

The <dialog> element only has a few HTML attributes, being "open" and "close". An "open" attribute is necessary to see the dialogue box if JavaScript isn't being used (like in this case). "close" does the opposite.

Iframe <iframe>:

The <iframe> element adds the possibility of adding another document within your own.
This is useful for adding external content, such as embedding a Youtube video.

Sample:

<iframe src="https://rebytre.github.io/HTML-Basics/" width="70%" height="250"></iframe>
                    

Output:

The <iframe> element also features a few different attributes. They are:

"allow"

- Allows the iframe certain specified features, such as:

"allowfullscreen"

- Allows fullscreen mode for embedded content, such as a Youtube video.

"height"

- Defines the height of the iframe

"loading"

- Tells the browser when to load in the iframe. Has two possible attributes, those being:

• "lazy" (Loads the iframe when it's within the viewport.)
• "eager" (Loads the iframe before it's within the viewport.)

"referrerpolicy"

- Limits how much information the url within the link is allowed to receive from the user. This is useful for security, performance, and compliance reasons. There are a couple different possible values for the attribute. They are:

• "no-referrer" (Sends no referrer info at all.)
• "no-referrer-when-downgrade" (Sends full referrer info to HTTPS destinations(more secure than HTTP), but no info to HTTP destinations.)
• "origin" (Only tells the url what website they came from, excluding any other info.)
• "origin-when-cross-origin" (Sends full url if the link is on the same site, but only sends url if the link is on a different site.)
• "same-origin" (Only sends full referrer info if the link is on the same site, otherwise it sends nothing.)
• "strict-origin" (Sends the origin only to HTTPS sites only.)
• "unsafe-url" (Sends full url referrer to any destination, which is incredibly unsafe.)

"sandbox"

A useful attribute that blocks forms, popups, and more. There are a few values, being:

• "allow-forms" (Allows forms.)
• "allow-pointer-lock" (Allows pointer locks.)
• "allow-popups" (Allows popups.)
• "allow-same-origin" (Allows the iframe content to be treated as being from the same origin.)
• "allow-scripts" (Allows to run scripts.)
• "allow-top-navigation" (Allows the iframe content to navigate its top level browsing context.)

"src"

- Identifies a url/file path to the desired document.

"title"

- Provides a title for the iframe. Useful for screenreaders. This is a necessary attribute.

Label <label>:

The <label> element is used to provide a label for several other elements.
It is proper to use <label> whenever possible.

Sample:

Coming soon!
                    

Output:

Coming soon!

The <label> element has two attributes. They are:

"for"

- Specifies the relationship between the result of the calculation, and the elements used in the calculation.

"form"

- Specifies which form the element belongs to.

Meter <meter>:

The <meter> element is used to show a scalar measurement within a specified range.
It shouldn't be used to show progress, that must be shown through the <progress> element.
Any text within the <meter> element is used for accessibility.
Always remember to add a <label>!

Sample:

<label for="testMeter1">Test Meter</label>
<meter id="testMeter1" min="0" max="10" optimum="5" value="7">7 out of 10</meter>
                    

Output:

The <meter> element also features a few different attributes. They are:

"low"

- Anything below the value of this attribute is considered low. Only useful when you need to change a meter's color more than once.

"high"

- Anything above the value of this attribute is considered high. Only useful when you need to change a meter's color more than once.

"max"

- The max value of the meter.

"min"

- The minimum value of the meter.

"optimum"

- An attribute that changes the color of the meter bar after it reaches a certain number.

"value"

- The only necessary attribute, it specifies the current value represented by the meter.

Progress <progress>:

The <progress> element is used to create a progress bar.
Any text within the <progress> element is used for accessibility.
Don't forget to add a label.

Sample:

<label for="testProgressBar1>Test Progress Bar</label>
<progress id="testProgressBar1" max="100" value="54">54%</progress>
                    

Output:

The <progress> element has two attributes. They are:

"max"

- Defines the max value of the progress bar.

"value"

- Defines the current value the progress bar is at.

Output <output>:

The <output> element is used to represent the result of a calculation (preformed by a script).

Sample:

Coming soon!
                    

Output:

Coming soon!

The <output> element has three attributes. They are:

"for"

- Specifies the relationship between the result of the calculation, and the elements used in the calculation.

"form"

- Specifies which form the element belongs to.

"name"

- Specifies a name for the element.

Template <template>:

The <template> element is used to contain HTML content and hide it.
It can only be used if JavaScript is applied.

Sample:

<template>
    <p>This text is hidden.</p>
</template>
                    

Output:

To have a visible output, this text needs JavaScript, which I am unfortunately not too familiar with as of yet. Until I update this, enjoy this image of a frog ;b

Abbreviation <abbr>:

The element <abbr> lets the browser know that the text within is an abbreviation.
This can also be used to let users know what the abbreviation means by including a "title" attribute within the element.
When the user hovers over the text, the full unabbreviated version will be displayed.
In general, it should be used on abbreviations, acronyms, and other similar cases.

Sample:

<p>
    I really don't like people who say <abbr title="Laugh Out Loud">LOL</abbr>.
</p>
                    

Output:

I really don't like people who say LOL.

Address <address>:

The <address> element is used to define that the text within is important contact information.
Most browsers render this text in italic, however this is not always the case. It does not follow indentation.

Sample:

<address>
    Written by: Rebytre
    rebytre101@gmail.com
</address>
                    

Output:

Bold <b>:

The <b> element is used to bold any text within.
According to HTML5 specification, it should only be used for text with no semantic meaning. Whenever applicable, always try using
other elements such as <h𝔁>, <em>, <strong>, and <mark>.

Sample:

<p>
    This text is <b>BOLD</b>.
</p>
                    

Output:

This text is BOLD.

Emphasis <em>:

The element <em> is used to emphasize text.
It makes any text within display italicized.

Sample:

<p>This is <em>so</em> boring.</p>
                    

Output:

This is so boring.

Italicize <i>:

The element <i> is used to italicize text.
It should be considered as a last resort if any other semantic text doesn't fit the use.

Sample:

<p>And then he said <i>Bonjour!</i>, what could that mean...</p>
                    

Output:

And then he said "Bonjour!", what could that mean...

Mark <mark>:

The element <mark> highlights text and defines it as valuable.

Sample:

<p>Don't forget the <mark>cookies</mark>!</p>
                    

Output:

Don't forget the cookies!

Strong <strong>:

The element <strong> is used to define text that is important.
Any content inside is displayed in bold.

Sample:

<p>Remember to use <strong>common sense</strong> always!</p>
                    

Output:

Remember to use common sense, always!