Simple Intro To Html

Super Simple Intro To HTML

What is HTML, CSS & JS and why do we need all three?

Super Simple Intro To HTML

What is HTML, CSS & JS and why do we need all three?

HTML stands for “Hypertext Markup Language”. Basically, HTML is the structure for the website, words, bullet points, data tables, etc. CSS stands for “Cascading Style Sheets” which means it’s the “Style” it’s how to make your website look professional, and look visually appealing. JS is how to make your website actually **work**.

For example, if you created something like YouTube and one of the options you can watch videos, you used HTML for the title, you used CSS for the color/s, and you have to make it actually work! So when you click on it it will run the video. This is an example of the three programming languages working in unison to form an experience you’re already familiar with if you’re reading this…

I mean most likely… unless you printed it because you hate trees.

— — — — — — — — — — -

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions — it is worth investing 2 minutes in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Golden Rules To Remember

The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.
When using multiple tags, the tags must be closed in the order in which they were opened. For example:
<strong><em>This is really important!</em></strong>

Let’s have a look at how CodePen works, firstly, you need to go to their website. After that, you must create an account. After you do that, You will see something like this

How to get started

If you’re using Visual Studio Code, congrats! There is Emmet support built into VSCode, so you won’t need to install any extensions. If you’re working in Atom you’ll need to install the Emmet plugin, which can be found here.

Basic Syntax

HTML Boilerplate

If you’ve been working in VSCode, you’ve probably seen Emmet syntax highlighting when working in HTML documents. In my opinion, the most convenient Emmet shortcut is html:5. This will create an HTML boilerplate, and fill out metadata tags in the head of your document.

html:5

Emmet Abbreviation for different HTML boilerplates.

When you see the auto complete as pictured above you can hit tab to auto fill the boilerplate html document.

That one small shortcut autogenerates all this metadata and head and body tags:

Here’s some slightly more advanced boilerplate for you to use as a starting point in your projects.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="stylesheet" href="Index.css" />
	<title>Title</title>
	</head>
	<body>

	<header>
	<h1>>Header</h1>
	</header>

	<script src="Index.js"></script>
	</body>
	</html>

view raw boilerplate.html hosted with ❤ by GitHub

HTML Language

Chapter 1: Formatting text

Tags in HTML: Tags are one of the most important parts in an HTML document. (We will get to what HTML document is after we know what tags are). HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />).

There are generally two types of tags in HTML:

Paired tags: These tags come in pairs. That is they have both opening (< >) and closing(</ >) tags.
Singular tags: These tags do not required to be closed

i.e.

<hr> 
<p> The tag above me is a horizontal line that doesn't need a closing tag </p>

HTML tags have two main types: block-level and inline tags.

Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags.
Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags.

Block-Level Tags

The three block level tags every HTML document needs to contain are <html>, <head>, and <body>.

The <html></html> tag is the highest level element that encloses every HTML page.
The <head></head> tag holds meta information such as the page’s title and charset.
Finally, the <body></body> tag encloses all the content that appears on the page.

Paragraphs are enclosed by <p></p>, while blockquotes use the <blockquote></blockquote> tag.
Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the <div></div> tag. A div element can contain another div tag inside it as well.
You may also use <ol></ol> tags for ordered lists and <ul></ul> for unordered ones. Individual list items must be enclosed by the <li></li> tag. For example, this is how a basic unordered list looks like in HTML:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, Title of the page, version of HTML, Meta-Data etc.

HTML TAG Specifies an html document. The HTML element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this element. Since the element is the first in a document, it is called the root element.

Although this tag can be implied, or not required, with HTML, it is required to be opened and closed in XHTML.

Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the <div></div> tag. A div element can contain another div tag inside it as well.
You may also use <ol></ol> tags for ordered lists and <ul></ul> for unordered ones. Individual list items must be enclosed by the <li></li> tag. For example, this is how a basic unordered list looks like in HTML:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Inline Tags

Many inline tags are used to format text. For example, a <strong></strong> tag would render an element in bold, whereas <em></em> tags would show it in italics.

Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the link’s destination:

<a href=”https://example.com/">Click me!</a>

Images are inline elements too. You can add one using <img> without any closing tag. But you will also need to use the src attribute to specify the image path, for example:

<img src=”/images/example.jpg” alt=”Example image”>

BODY: This contains everything you want to display on the Web Page.

<body>

<! — Everything the user sees on the webpage goes here! — ps… this is a comment →

</body>

Let us now have a look on the basic structure of HTML. That is the code which is must for every webpage to have:

<!DOCTYPE html>

Here is some boilerplate html you can use as a starting point:!!Every Webpage must contain this code.!!

<!DOCTYPE html>

Below is the complete explanation of each of the tags used in the above piece of HTML code:

<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.

<html>: This is called HTML root element and used to wrap all the code.

<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are:

<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

Bold Text:

<strong> ⇐ this is for strong, emergency emotions.

___________

HEADING/S:

6 types from largest(h1) to smallest (h6)

___________

ITALICS: There are two ways to use it, the first one is the <i> tag and the second one is the <em> tag. They both italicize the text🤷

<i> this is fancy text that’s too good to for us</i>

___________

PARAGRAPHS: In order to make Paragraphs, just add <p>.

<p> Hi there my name is Jason. </p>

___________

TITLES: not the same thing as a heading (which renders on the html page) but instead the title element represents the title of the page as shown in the tab of the browser.

<head>

As such <title>This is the title</title> it is always found between <head> tags and not in the body of the page where all the content that gets rendered on the page is contained.

Here’s a handy Cheat Sheet:

Below I am going to Include a gist that contains html code that uses pretty much every tag I could think of off the top of my head…

If it’s not included here I promise you it’s seldom used by most webpages.

Below that I will embed an image of the webpage that it renders too….

that super small text at the bottom is actually one giant button:

	<html lang="en" style=""><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	div.cities {
	background-color: black;
	color: white;
	margin: 20px 0 20px 0;
	padding: 20px;
	}
	</style>
	<style>
	span.note {
	font-size: 110%;
	color: blue;
	}
	</style>
	</head>

	<body style="">
	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<h3>This is heading 3</h3>
	<h4>This is heading 4</h4>
	<h5>This is heading 5</h5>
	<h6>This is heading 6</h6>
	<b> - Bold text
	<strong> - Important text</strong>
	<i> - Italic text</i>
	<em> - Emphasized text</em>
	<mark> - Marked text</mark>
	<small> - Small text</small>
	<del> - Deleted text</del>
	<ins> - Inserted text</ins>
	<sub> - Subscript text</sub>
	<sup> - Superscript text</sup>
	<p>The easiest thing you can do in HTML is write a sentence.
	To do this you need to know one of the very basic and easy to use tags - the</p>
	<br>
	<!-- Write your comments here -->

	<!-- This comment
	is also legit -->
	<q> Use q for short quotes </q>
	<blockquote>
	The blockquote tag should be used when we want to talk
	about some long quote that is quoted from another source.
	</blockquote>

	<blockquote cite="link to where you took the quote from">
	your very long
	and interesting
	probably
	quote.
	</blockquote>
	<img src="https://i.redd.it/tfugj4n3l6ez.png" alt="What your image is about">
	<a href="https://developer.mozilla.org/en-US/">MDN</a>
	<p>
	This is done with the target attribute.
	The target attribute specifies where to open the linked document and it can have one of the following values:

	<!-- _blank - Opens the linked document in a new window or tab
	_self - Opens the linked document in the same window/tab as it was clicked (this is default)
	_parent - Opens the linked document in the parent frame
	_top - Opens the linked document in the full body of the window
	framename - Opens the linked document in a named frame -->
	</p>
	<ol>
	<!-- Everything between the opening and the closing ol list is taken as a list item -->
	<li> list item 1 </li> <!-- what is between the opening and closing li is considered a SINGLE list item -->
	<li> list item 2 </li>
	<li> list item N </li>
	</ol>
	<ul>
	<li> list item 1 </li>
	<li> list item 2 </li>
	<li> list item N </li>
	</ul>

	<table>
	<tbody><tr>
	<th>table row 1 first square</th>
	<th>table row 1 second square</th>
	</tr>
	<tr>
	<td>table row 2 first square</td>
	<td>table row 2 second square</td>
	<td>50</td>
	</tr>
	<tr>
	<td>table row 2 first square</td>
	<td>table row 2 second square</td>
	</tr>
	</tbody></table>
	<p>The paragraph is a block-level element.
	</p><p>
	</p><p>A block-level element always starts on a new line and takes up the full width available (stretches out to the left and
	right as far as it can).</p>
	<p>Examples of block-level elements:
	div
	h1 - h6
	p
	form</p>
	<p>This <span>span</span> is an inline element</p>
	<p>This <span>An inline element occupies only the space bounded by the tags that define the inline element.
	Generally, inline elements may contain only data and other inline elements.
	The following example demonstrates the inline element's influence:</span> is an inline element</p>

	<div style="background-color:black;color:white;padding:20px;">
	<h2>Lisbon</h2>
	<p>Div Element
	The div element belongs to the block-level group, often used as a container for other HTML elements.
	The div element has no required attributes, but both style and class are common.
	When used together with CSS, the div element can be used to style blocks of content,
	as we can see in the example below:</p>
	</div>
	<h1>My super <span style="color:red">Span Element
	The span element is a generic inline container for phrasing content, which does not inherently represent anything.
	It can be used to group elements for styling purposes (using the class or id attributes),
	or because they share attribute values, such as lang.
	The span is very much like a div element, but div is a block-level element whereas a span is an inline element.</span> Heading</h1>
	<p>Classes
	Using the html class attribute makes it possible to define equal styles,
	for elements with the same class name.</p>
	<code><pre> <style>
	div.cities {
	background-color: black;
	color: white;
	margin: 20px 0 20px 0;
	padding: 20px;
	}
	</style>
	</pre></code>
	<div class="cities">
	<h2>London</h2>
	<p>London is the capital of England.</p>
	</div>

	<div class="cities">
	<h2>Kingston</h2>
	<p>Kingston is the capital city of Jamaica.</p>
	</div>

	<div class="cities">
	<h2>Tokyo</h2>
	<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
	and the most populous metropolitan area in the world.</p>
	</div>
	<h1>My Ultra <span class="note">Important</span> Heading</h1>
	<p>This is some random but <span class="note">important</span> text.</p>
	<button type="button">The button tag defines a clickable button.</button>
	<p>These buttons work and behave in exactly the same way as our counterparts above.
	In addition to submitting the form, you can make them disabled, add an accesskey or even specify a tabindex.</p>

	<button> tag is that you can put useful HTML elements inside them, like images:<p></p>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	</pre>
	<p>"Buttons created with the <strong>BUTTON</strong> element function just like buttons created with the
	<strong>INPUT</strong> element,<br>
	but they offer richer rendering possibilities: the <strong>BUTTON</strong> tag may have content.<br>
	For example:<br>
	a <strong>BUTTON</strong> element that contains an image functions like and may resemble an <strong>INPUT</strong>
	element whose type is set to “image",<br>
	but the <strong>BUTTON</strong> element type allows content." W3</p>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>positive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/images/icons/tick.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
	Save
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/password/reset/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/images/icons/textfield_key.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
	Change Password
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>negative<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/images/icons/cross.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
	Cancel
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
	</pre>
	<p><em>Tip</em>: Always specify the type attribute for a button element.<br>
	Different browsers use different default types for the button element.</p>
	<h2 class="mume-header" id="styles-and-sizes-with-bootstrap">Styles and Sizes (With Bootstrap)</h2>

	<p>Great Work!<br>
	As we know, this is where we would start using only CSS to style and size our buttons..? No!<br>
	We are introducing you to Bootstrap (the most popular HTML, CSS, and JavaScript framework for developing
	responsive,<br>
	mobile-first web sites) because it´s an easier way to get the job done!</p>
	<h3 class="mume-header" id="do-you-prefer-larger-or-smaller-buttons">Do you prefer larger or smaller buttons?</h3>

	<p>Add .btn-lg (large), .btn-md(medium), .btn-sm(small), or .btn-xs(extra-small) for additional sizes.</p>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary btn-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary btn-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary btn-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary btn-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>XSmall<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	</pre>
	<p>Create block level buttons — those that span the full width of a parent—by adding <em>.btn-block</em>:</p>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary btn-lg btn-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block level button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	</pre>
	<p>After you decide the size of your buttons it´s time to style them!<br>
	Bootstrap provides different styles of buttons:</p>
	<ul>
	<li>Basic</li>
	<li>Default</li>
	<li>Primary</li>
	<li>Success</li>
	<li>Info</li>
	<li>Warning</li>
	<li>Danger</li>
	<li>Link</li>
	</ul>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Secondary, outline button --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Indicates a successful or positive action --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Contextual button for informational alert messages --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Indicates caution should be taken with this action --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Indicates a dangerous or potentially negative action --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token comment"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	</pre>
	<h3 class="mume-header" id="outline-buttons">Outline buttons</h3>

	<p>Replace the default modifier classes with the <em>.btn-outline-</em> ones to remove all background images and
	colors on any button.</p>
	<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Secondary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-outline-danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
	</pre>
	<h3 class="mume-header" id="great-resources-to-learn-html5">Great resources to learn HTML5</h3>

	<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a>
	</p>
	</button>




	</b></body></html>

view raw every-html-tag.html hosted with ❤ by GitHub

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

bgoonz’s gists
Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

Or Checkout my personal Resource Site:

Web-Dev-Hub
Edit descriptionweb-dev-resource-hub.netlify.app

web-dev-hub

Search This Blog