HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!--<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>-->
<nav id="navbar">
<header>
<h1>HTML Documentation</h1>
</header>
<ul>
<li><a href="#Introduction" class="nav-link">Introduction</a></li>
<li><a href="#How_HTML_Works" class="nav-link">How HTML Works</a></li>
<li><a href="#Overview_of_Tags" class="nav-link">Overview of Tags</a></li>
<li><a href="#Structural_Setup" class="nav-link">Structural Setup</a></li>
<li><a href="#Basic_Styling" class="nav-link">Basic Styling</a></li>
<li><a href="#Lists" class="nav-link">Lists</a></li>
<li><a href="#Input_and_Forms" class="nav-link">Input and Forms</a></li>
<li><a href="#Tables" class="nav-link">Tables</a></li>
<li><a href="#Advanced_Tags" class="nav-link">Advanced Tags</a></li>
<li><a href="#References" class="nav-link">References</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>HTML (<b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the
World Wide Web.</p>
<p>HTML does not have much in the form of <em>logic-based functionality</em> (such as changing text based on the date or time of day), but instead functions as the basic building blocks that browsers need in order to format content on the Internet.</p>
<p>Basic HTML looks like the following:</p>
<code><p>Hello World. This is a sentence.</p></code>
</section>
<section class="main-section" id="How_HTML_Works">
<header>How HTML Works</header>
<p>Internet Browsers, such as Chrome, Internet Explorer, Edge, Firefox, Netscape, Safari, Opera, and others, process HTML in very similiar manner. They use the formatting of <a href="#Overview_of_Tags">tags</a> to understand how to process elements and
objects of a webpage into a viewable format.</p>
<p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>
<ul>
<li>Files that end in <code>.html</code> or <code>.htm</code> are basic HTML files. They can be rendered in the browser.</li>
<li>Files that end in <code>.php</code>, <code>.asp</code>, or the like are <em>backend files</em> and may contain server-specific code in them, along with HTML.</li>
<li>Files that end in <code>.css</code> (Cascading Stylesheets) or <code>.js</code> (Javascript) work with HTML, but are not required. They may contain some HTML, but it will be based on styling rules or logic-based functions.</li>
</ul>
</section>
<section class="main-section" id="Overview_of_Tags">
<header>Overview of Tags</header>
<p>HTML's core functionality is based on the use of <em>tags</em>. Tags are the litle bits of formatting that the browser understands to properly display the content. Most <strong>elements</strong> (items in the document) will be wrapped in opening and
closing tags, such as below:</p>
<code><p>Hello World. This is a sentence.</p></code>
<p>In the above example, the <code><p></code> is the opening tag (starting the element), and the <code></p></code> is the closing tag (ending the element). Some elements that do not require a closing tag can be <em>self-closing</em>, such
as below:</p>
<code><img src="logo.png" alt="Company Logo" /></code>
<p>There are about <strong>89 different HTML tags</strong> in the current version (HTML5). As a programmer, one is not required to know all types and versions of tags, but at least the most commonly-used 30 should be sufficient for most projects.</p>
</section>
<section class="main-section" id="Structural_Setup">
<header>Structural Setup</header>
<p>In HTML, content is organized in Sections, and all webpages should have the following format: Head and Body. While many pages may have navigation bars, footers, content headers, and the like, all webpages should contain a Head and Body, which are
wrapped in an <code><html></code> tag.</p>
<code><html><br/>
<head><br/>
</head><br/>
<br/>
<body><br/>
</body><br/>
</html></code>
<p>The <code><head></code> tag contains all of the information that should be processed or loaded <em>before</em> the main content/page is loaded. This can mean such things as title, character set, CSS stylesheets, Javascript libraries, Meta content
(such as descriptions, preview images, authors, etc), and the language that the content should be loaded in.</p>
<code> <head lang="en"><br/>
<title>Title of the Webpage</title><br/>
<meta charset="utf-8"/><br/>
<link href="/css/style.css" rel="stylesheet"/><br/>
<script src="/js/loadFunction.js"></script><br/>
<meta name="author" content="John H. Zoidberg"><br/>
</head></code>
<p>The <code><body></code> tag contains everything that should be visible to the end user (you, or the general public), such as articles, images, videos, etc. Unless it is specifically noted, all items that are in the <code><body></code> will be visible.</p>
<code> <body><br/>
<h1>Introduction</h1><br/>
<p>Hello World</p><br/>
<img src="/img/my_photo.jpg" alt="Me"/><br/>
</body></code>
<p>The information in the <code><body></code> can be organized into <em>Section</em> using advanced semantic tags, which will be discussed in <a href="#Advanced_Tags">Advanced Tags</a>.</p>
</section>
<section class="main-section" id="Basic_Styling">
<header>Basic Styling</header>
<p>While HTML can be stylized with colors and animations in CSS, HTML does provide its own form of basic styling, such as <b>bold</b>, <i>italics</i>, and <u>underline</u>.</p>
<p>Bold: <code><b>This is Bold</b></code></p>
<p>Italic: <code><i>This is Italicized</i></code></p>
<p>Underline: <code><u>This is Underlined</u></code></p>
<p>There are a few notes to keep in mind:</p>
<ul>
<li>While <code><b></code> may make content bolded, it does not work for Screen Readers. If something should be stated with importance, it should be wrapped in a <code><strong></code> tag, making sure the Screen Reader enunciates it correctly.</li>
<li>The same goes for <code><i></code> tag; Screen Readers cannot process this correctly, so items that need to be italicized should be wrapped in a <code><em></code> (<strong>em</strong>phasized) tag.</li>
<li>Both <code><b></code>/<code><strong></code> and <code><i></code>/<code><em></code> produce the same thing visually, it is important to note the difference between what should be spoken with importance and what shouldn't.</li>
</ul>
</section>
<section class="main-section" id="Lists">
<header>Lists</header>
<p>Lists are possible with HTML in two basic formats: Ordered and Unordered (or "Bulleted"). Ordered lists are as stated: lists with numbers (or letters, based on formatting); Unordered lists are marked with bullets, based on the level of list.</p>
<p><em><strong>IMPORTANT:</strong> "Ordered" only refers to the numbers of the items in the list, not automatically sorting the list. If the list contains "F, T, M", it will be listed as "F, T, M".</em></p>
<p>All items inside an Ordered or Unordered list must be inside a <code><li></code> (list item) tag, which can contain lists in themselves.</p>
<div class="overflow">
<div class="w-50 float-left">
<p>Code:</p>
<code><ol><br/>
<li>Ford</li><br/>
<li>Telsa</li><br/>
<li>Mazda</li><br/>
<ol></code>
</div>
<div class="w-50 float-left">
<p>Produces:</p>
<ol>
<li>Ford</li>
<li>Telsa</li>
<li>Mazda</li>
</ol>
</div>
</div>
<p>Meanwhile, the Unordered list produces the same thing, but with bullets instead.</p>
<div class="overflow">
<div class="w-50 float-left">
Code:
<code><ul><br/>
<li>Ford</li><br/>
<li>Telsa</li><br/>
<li>Mazda</li><br/>
<ul></code>
</div>
<div class="w-50 float-left">
Produces:
<ul>
<li>Ford</li>
<li>Telsa</li>
<li>Mazda</li>
</ul>
</div>
</div>
<p><em>There are Data lists with <code><dl></code>, but those are rarely used.</em></p>
</section>
<section class="main-section" id="Input_and_Forms">
<header>Input and Forms</header>
<p>The method for handing input and forms with HTML is a bit different; this is the first portion that allows for something other than just a display of information. Information (like logins, orders, email signups, etc) is submitted via HTML forms, but
then is processed on the server via backend systems (like PHP or ASP). However, basic forms can still be created in HTML.</p>
<p>There are multiple versions of inputs that can be put into forms, but regardless, the form must be wrapped in a <code><form></code> tag. The properties (items inside the tag/element) that are recommended (but not required) are <code>method</code> (how the information will be passed to the server) and <code>action</code> (where the information will be sent). (More information on this later.)</p>
<p>Let's take a look at a sample form setup:</p>
<div class="overflow">
<div class="w-50 float-left">
<p>Code:</p>
<form method="post" action="submitForm.php"><br/> <label>Name:</label> <input type="text" name="name" id="name"/><br/><br/> <label>Email:</label> <input type="email" name="email"
id="email"/><br/>
<br/> <label>Phone:</label> <input type="text" name="phone" id="phone"/><br/><br/> <label>Age:</label> <input type="number" name="age" id="age" max="125" min="0"/><br/>
<br/> <label>Gender:</label>
<br/> <select id="gender" name="gender"><br/> <option value="m">Male</option><br/> <option value="f">Female</option><br/> <option value="na">Non-Binary</option><br/> </select><br/>
<br/> <label>Favorite Color:</label><br/> <label><input type="radio" name="color" value="red" /> Red</label><br/><br/> <label><input type="radio"
name="color" value="blue" /> Blue</label><br/><br/> <label><input type="radio" name="color" value="green" /> Green</label><br/><br/> <label><input
type="radio" name="color" value="yellow" /> Yellow</label><br/><br/> <label>Favorite Animal:</label><br/> <label><input type="checkbox" name="animal" value="cat" /> Cat</label><br/><br/> <label><input type="checkbox" name="animal" value="dog" /> Dog</label><br/><br/> <label><input type="checkbox" name="animal" value="bird" /> Bird</label><br/><br/> <label><input type="checkbox" name="animal" value="fish" /> Fish</label><br/><br/> <label>Comments:</label>
<br/> <textarea id="comments" name="comments"></textarea><br/><br/> <input type="submit" value="Send Form"/><br/> </form>
</div>
<div class="w-50 float-left">
<p>Produces:</p>
<form method="post" action="submitForm.php">
<label>Name:</label> <input type="text" name="name" id="name" /><br/>
<label>Email:</label> <input type="email" name="email" id="email" /><br/>
<label>Phone:</label> <input type="text" name="phone" id="phone" /><br/>
<label>Age:</label> <input type="number" name="age" id="age" max="125" min="0" /><br/>
<label>Gender:</label>
<select id="gender" name="gender">
<option value="m">Male</option>
<option value="f">Female</option>
<option value="na">Non-Binary</option>
</select><br/>
<label>Favorite Color:</label>
<label><input type="radio" name="color" value="red" /> Red</label><br/>
<label><input type="radio" name="color" value="blue" /> Blue</label><br/>
<label><input type="radio" name="color" value="green" /> Green</label><br/>
<label><input type="radio" name="color" value="yellow" /> Yellow</label><br/>
<label>Favorite Animal:</label>
<label><input type="checkbox" name="animal" value="cat" /> Cat</label><br/>
<label><input type="checkbox" name="animal" value="dog" /> Dog</label><br/>
<label><input type="checkbox" name="animal" value="bird" /> Bird</label><br/>
<label><input type="checkbox" name="animal" value="fish" /> Fish</label><br/>
<label>Comments:</label>
<textarea id="comments" name="comments"></textarea><br/>
<input type="submit" value="Send Form" />
</form>
</div>
</div>
<p>All <code>form</code>s must have a <em>Submit</em> button in order to submit the information.</p>
<p>There are many other form elements that can be used, such as "color", "date", and "file uploads", but those will not be discussed here.</p>
</section>
<section class="main-section" id="Tables">
<header>Tables</header>
<p>Data in HTML documents can be formatted in Tables. It is not recommended to design HTML pages with tables, but only to use tables to display data as necessary.</p>
<p>All tables are wrapped with a <code><table></code> tag. Inside that, we have rows with <code><tr></code> (<b>t</b>able <b>r</b>ows). <em>Inside</em> that, we have <code><td></code> (<b>t</b>able <b>d</b>ata, also known as <em>cells</em>).
<b>T</b>able <b>h</b>eaders (<code><th></code>) can be used to identify columns.</p>
<p>The data in tables must be writte in HTML in a <em>vertical</em> format, which is processed in a <em>horizontal</em> format, so each row, then each table data cell is written and processed. Confusing? No worries, let's take a look:</p>
<code><table><br/>
<tr><br/>
<th>Name</th><br/>
<th>Age</th><br/>
<th>Color</th><br/>
</tr><br/>
<tr><br/>
<td>Tom</td><br/>
<td>45</td><br/>
<td>Blue</td><br/>
</tr><br/>
<tr><br/>
<td>Susan</td><br/>
<td>26</td><br/>
<td>Red</td><br/>
</tr><br/>
<tr><br/>
<td>Robert</td><br/>
<td>105</td><br/>
<td>Plaid</td><br/>
</tr><br/>
</table></code>
<p>This produces the following:</p>
<fieldset>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Color</th>
</tr>
<tr>
<td>Tom</td>
<td>45</td>
<td>Blue</td>
</tr>
<tr>
<td>Susan</td>
<td>26</td>
<td>Red</td>
</tr>
<tr>
<td>Robert</td>
<td>105</td>
<td>Plaid</td>
</tr>
</table>
</fieldset>
<p><em><small>The attribute of <code>border</code> has been added to this example to emphasize the cells.</small></em></p>
</div>
</div>
<p>This make take some practice to get correct, especially when <code>colspan</code> and <code>rowspan</code> are in the mix.</p>
</section>
<section class="main-section" id="Advanced_Tags">
<header>Advanced Tags</header>
<p>In the recent years, HTML has evolved to include modern convinences, such as audio, video, responsive images, and media queries (a CSS technique for reformatting the page information on different sized screens). Prior to HTML5, including something
like a video was very complicated, and required many lines of code to get correct. Now, just the inclusion of a <code><video></code> tag is most of the work.</p>
<p>Let's take a look at the two most common used advanced tags: video and audio.</p>
<div class="overflow">
<div class="w-50 float-left"><code>
<video width="400" controls><br/> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><br/> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"><br/> Your
browser does not support HTML5 video.<br/> </video></code>
</div>
<div class="w-50 float-left">
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<p><em><small>There are two formats included, based on what the browser can load. MP4 is the most common and popular, and OGG can be used as a backup.</small></em></p>
<p>Now let's take a look at an example of <code>audio</code>:</p>
<div class="overflow">
<div class="w-50 float-left"><code>
<audio controls><br/> <source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg"><br/> <source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg"><br/> Your
browser does not support the audio element.<br/> </audio></code>
</div>
<div class="w-50 float-left">
<audio controls>
<source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<p><em><small>There are two formats included, based on what the browser can load. MP3 is the most common and popular, and OGG can be used as a backup.</small></em></p>
</section>
<section class="main-section" id="References">
<header>References</header>
<p>More information about HTML can be found at the following links:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML [Wikipedia]</a></li>
<li><a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a></li>
<li><a href="https://freecodecamp.com" target="_blank">FreeCodeCamp</a></li>
</ul>
</section>
</main>
div.overflow
overflow: auto
#navbar
position: fixed
width: 20%
min-width: 250px
float: left
h1
font-size: 175%
padding-left: 50px
line-height: 3em
margin-top: 20px
ul
margin: 0
padding: 0
list-style: none
li
line-height: 35px
border-top: 1px #666 solid
padding-left: 50px
a
color: #000
display: block
height: 100%
&:hover
text-decoration: none
#main-doc
border-left: 5px #ccc solid
width: 80%
float: right
padding: 20px
section
code
padding: 10px
margin: 10px
color: #000
display: block
ul, li, p
code
margin: auto 2px
padding: 5px
display: inline-block
header
font-size: 2em
p, code, ul, ol
padding: 10px
p
margin-bottom: 0
padding-top: 5px
ul, ol
padding-left: 60px
@media screen and (max-width: 900)
body
background-color: #fc0
Also see: Tab Triggers