Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar">
    <header>HTML basics</header>
     <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a><hr>
        </li>
        <li><a class="nav-link" href="#So_what_is_HTML?">So what is HTML?</a><hr>
        </li>
        <li><a class="nav-link" href="#Anatomy_of_an_HTML_document">Anatomy of an HTML document</a><hr>
        </li>
        <li><a class="nav-link" href="#Nesting_elements">Nesting elements</a><hr>
        </li>
        <li><a class="nav-link" href="#Empty_elements">Empty elements</a><hr></li>
        <li><a class="nav-link" href="#Anatomy_of_an_HTML_document_II">Anatomy of an HTML document II</a><hr>
        </li>
        <li><a class="nav-link" href="#Images">Images</a><hr>
        </li>
        <li><a class="nav-link" href="#Marking_up_text">Marking up text</a><hr>
        </li>
        <li><a class="nav-link" href="#Headings">Headings</a><hr>
        </li>
        <li><a class="nav-link" href="#Paragraphs">Paragraphs</a><hr>
        </li>
        <li><a class="nav-link" href="#lists">Lists</a><hr>
        </li>
        <li><a class="nav-link" href="#Link">Link</a><hr>
        </li>
        <li><a class="nav-link" href="#conclusion">Conclusion</a><hr>
        </li>
        <li><a class="nav-link" href="#Reference">Reference</a></li>
     </ul>
</nav>

<main id="main-doc">
    <section class="main-section" id="Introduction">
        <header>Introduction</header>
            <article>
                <p>HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For
                example, content could be structured within a set of paragraphs, a list of bulleted points, or using
                images and data tables. As the title suggests, this article will give you a basic understanding of HTML
                and its functions.
                </p>
            </article>
    </section>

    <section class="main-section" id="So_what_is_HTML?">
        <header>So what is HTML?</header>
            <article>
                <p>HTML is a markup language that defines the structure of your content. HTML consists of a series of
                elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain
                way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can
                italicize words, can make the font bigger or smaller, and so on. For example, take the following line of
                content:
                </p>
                    <code>
                    My cat is very grumpy
                    </code>
                <p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in
                paragraph tags:
                </p>
                    <div>
                        <code>
                            &lt;p&gt;My cat is very grumpy&lt;/p&gt;
                        </code>
                    </div>
            </article>
    </section>

    <section class="main-section" id="Anatomy_of_an_HTML_document">
        <header>Anatomy of an HTML document</header>
            <article>
                <p>Let's explore this paragraph element a bit further.</p>
                    <img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png"
                alt="">
                <p>The main parts of our element are as follows:</p>
                    <ol>
                        <li>The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
                        </li>
                        <li>
                            The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
                        </li>
                        <li>The content: This is the content of the element, which in this case, is just text.
                        </li>
                        <li>The element: The opening tag, the closing tag, and the content together comprise the element.
                        </li>
                    </ol>
            <p>Elements can also have attributes that look like the following:</p>
            <img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-attribute-small.png"
                atl="">
            <p>Attributes contain extra information about the element that you don't want to appear in the actual
                content. Here, <code>class</code> is the attribute name and <code>editor-note</code> is the attribute
                value. The <code>class</code> attribute allows you to give the element a non-unique identifier that can
                be used to target it (and any other elements with the same <code>class</code> value) with style
                information and other things.
            </p>
            <p>An attribute should always have the following:</p>
            <ol>
                <li>A space between it and the element name (or the previous attribute, if the element already has one
                    or more attributes).</li>
                <li>The attribute name followed by an equal sign.</li>
                <li>The attribute value wrapped by opening and closing quotation marks.</li>
            </ol>
        </article>
    </section>

    <section class="main-section" id="Nesting_elements">
        <header>Nesting elements</header>
        <article>
            <p>You can put elements inside other elements too — this is called <b>nesting</b>. If we wanted to state
                that our cat is <b>very</b> grumpy, we could wrap the word "very" in a
                <code>&lt;strong&gt; </code>element, which means that the word is to be strongly emphasized:
            </p>
            <div>
                <code>
         &lt;p&gt;My cat is &lt;strong&gt; very &lt;/strong&gt; grumpy.&lt;/p&gt;
       </code>
            </div>
            <p>You do however need to make sure that your elements are properly nested. In the example above, we opened
                the <code>&lt;p&gt;</code> element first, then the <code>&lt;strong&gt;</code> element; therefore, we
                have to close the <code>&lt;strong&gt;</code> element first, then the <code>&lt;p&gt;</code> element.
                The following is incorrect:</p>
            <div>
                <code>
           &lt;p&gt;My cat is &lt;strong&gt;very grumpy. &lt;/p&gt; &lt;/strong&gt;
          </code>
            </div>
            <p>The elements have to open and close correctly so that they are clearly inside or outside one another. If
                they overlap as shown above, then your web browser will try to make the best guess at what you were
                trying to say, which can lead to unexpected results. So don't do it!</p>
        </article>
    </section>

    <section class="main-section" id="Empty_elements">
        <header>Empty elements</header>
        <article>
            <p>
                Some elements have no content and are called empty elements. Take the <code><img></code> element that we
                already have in our HTML page:
            </p>
            <div>
                <code>
                 &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
                </code>
            </div>
             <p>
                This contains two attributes, but there is no closing <code>&gt;img&gt;</code> tag and no inner content.
                This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in
                the HTML page in the place it appears.
             </p>
        </article>
    </section>

    <section class="main-section" id="Anatomy_of_an_HTML_document_II">
        <header>Anatomy of an HTML document II</header>
        <article>
            <p>That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look
                at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into
                our example
            </p>
            <div>
                <code>
                    &lt;!DOCTYPE html&gt;<br>
                    &nbsp;&lt;html&gt;<br>
                    &nbsp;&nbsp;&lt;head&gt;<Br>
                    &nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8"&gt;<br>
                    &nbsp;&nbsp;&nbsp;&lt;title&gt; My test page &lt;/title&gt;<br>
                    &nbsp;&nbsp;&lt;/head&gt;<br>
                    &nbsp;&nbsp;&lt;body&gt;<br>
                    &nbsp;&nbsp;&nbsp;&lt;img src="images/firefox-icon.png" alt="My test image"&gt;<br>
                    &nbsp;&nbsp;&lt;/body&gt;<br>
                    &lt;/html&gt;<br>
                </code>
            </div>
            <p>
                Here, we have the following:
            </p>
            <ul>
                <li>
                    <code>&lt;!DOCTYPE html&gt;</code> — doctype. It is a required preamble. In the mists of time, when
                    HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML
                    page had to follow to be considered good HTML, which could mean automatic error checking and other
                    useful things. However these days, they don't do much and are basically just needed to make sure
                    your document behaves correctly. That's all you need to know for now.
                </li>
                <li>
                    <code>&lt;html&gt;&lt;/html&gt;</code> — the <code>&lt;html&gt;</code> element. This element wraps
                    all the content on the entire page and is sometimes known as the root element.
                </li>
                <li>
                    <code>&lt;head&gt;&lt;/head&gt;</code> — the &lt;head&gt; element. This element acts as a container
                    for all the stuff you want to include on the HTML page that isn't the content you are showing to
                    your page's viewers.
                </li>
                <li>
                    &lt;meta charset="utf-8"&gt; — This element sets the character set your document should use to UTF-8
                    which includes most characters from the vast majority of written languages. Essentially, it can now
                    handle any textual content you might put on it. There is no reason not to set this and it can help
                    avoid some problems later on.
                </li>
                <li>
                    &lt;title&gt;&lt;/title&gt; — the &lt;title&gt; element. This sets the title of your page, which is
                    the title that appears in the browser tab the page is loaded in. It is also used to describe the
                    page when you bookmark/favorite it.
                </li>
                <li>
                    <code>&lt;body&gt;&lt;/body&gt;</code> — <code>the &lt;body&gt;</code> element. This contains all
                    the content that you want to show to web users when they visit your page, whether that's text,
                    images, videos, games, playable audio tracks, or whatever else.
                </li>
            </ul>
        </article>
    </section>
    <section class="main-section" id="Images">
        <header>Images</header>
        <article>
            <p>
                Let's turn our attention to the &lt;img&gt; element again:
            </p>
            <div>
                <code>
          &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
        </code>
            </div>
            <p>
                s we said before, it embeds an image into our page in the position it appears. It does this via the
                <code>src</code> (source) attribute, which contains the path to our image file.
            </p>
            <p>

                We have also included an <code>alt</code> (alternative) attribute. In this attribute, you specify
                descriptive text for users who cannot see the image, possibly because of the following reasons:
            </p>
            <ol>
                <li>They are visually impaired. Users with significant visual impairments often use tools called screen
                    readers to read out the alt text to them.
                </li>
                <li>
                    Something has gone wrong causing the image not to display. For example, try deliberately changing
                    the path inside your <code>src</code> attribute to make it incorrect. If you save and reload the
                    page, you should see something like this in place of the image:
                </li>
            </ol>
            <img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png"
                alt="">
            <p>
                The keywords for alt text are "descriptive text". The alt text you write should provide the reader with
                enough information to have a good idea of what the image conveys. In this example, our current text of
                "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox
                logo: a flaming fox surrounding the Earth."
            </p>
            <p>
                Try coming up with some better alt text for your image now.
            </p>
        </article>
    </section>
    <section class="main-section" id="Marking_up_text">
        <header>Marking up text</header>
        <article>
            <p>
                The &lt;mark&gt; HTML element represents text which is marked or highlighted for reference or notation
                purposes, due to the marked passage's relevance or importance in the enclosing context.
            </p>
        </article>
    </section>
    <section class="main-section" id="Headings">
        <header>Headings</header>
            <article>
                <p>
                Heading elements allow you to specify that certain parts of your content are headings — or subheadings.
                In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too.
                HTML contains 6 heading levels, Headings &lt;h1&gt; - &lt;h6&gt;, although you'll commonly only use 3 to
                4 at most:
                </p>
                    <div>
                        <code>
                            &lt;!-- 4 heading levels: --&gt;<br>
                            &lt;h1&gt;My main title&lt;/h1&gt;<br>
                            &lt;h2&gt;My top level heading&lt;/h2&gt;<br>
                            &lt;h3&gt;My subheading&lt;/h3&gt;<br>
                            &lt;h4&gt;My sub-subheading&lt;/h4&gt;<br>
        </code>
            </div>
            <p>
                Now try adding a suitable title to your HTML page just above your <code>&lt;img&gt;</code> element.
            </p>
        </article>
    </section>
    <section class="main-section" id="Paragraphs">
        <header>Paragraphs</header>
        <article>
            <p>
                As explained above, &lt;p&gt; elements are for containing paragraphs of text; you'll use these
                frequently when marking up regular text content:
            </p>
            <div>
                <code>
             &lt;p&gt;This is a single paragraph&lt;/p&gt;
           </code>
            </div>
        </article>
    </section>
    <section class="main-section" id="lists">
        <header>List</header>
        <article>
            <p>A lot of the web's content is lists and HTML has special elements for these. Marking up lists always
                consists of at least 2 elements. The most common list types are ordered and unordered lists:
            </p>
            <ol>
                <li>
                    Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list.
                    These are wrapped in a &lt;ul&gt; element.
                </li>
                <li>
                    Ordered lists are for lists where the order of the items does matter, such as a recipe. These are
                    wrapped in an &lt;ol&gt; element.
                </li>
            </ol>
            <p>
                Each item inside the lists is put inside an &lt;li&gt; (list item) element.
            </p>
            <p>
                For example, if we wanted to turn the part of the following paragraph fragment into a list
            </p>
            <div>
                <code>
          &lt;p&gt;At Mozilla, we're a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;
        </code>
            </div>
            <p>
                We could modify the markup to this
            </p>
            <div>
                <code>
                    &lt;p&gt;At Mozilla, we're a global community of&lt;/p&gt;<br>
                    &lt;ul&gt;<br>
                    &nbsp;&lt;li>technologists&lt;/li&gt;<br>
                    &nbsp;&lt;li>thinkers&lt;/li&gt;<br>
                    &nbsp;&lt;li>builders&lt;/li&lt;<br>
                    &lt;/ul&gt;<br>
                    &lt;p&gt;working together ... &lt;/p&gt;<br>
               </code>
            </div>

            <p>
                Try adding an ordered or unordered list to your example page.
            </p>
        </article>
    </section>
    <section class="main-section" id="Link">
        <header>Link</header>
        <article>
            <p>
                Links are very important — they are what makes the web a web! To add a link, we need to use a simple
                element — &lt;a&gt; — "a" being the short form for "anchor". To make text within your paragraph into a
                link, follow these steps:
            </p>
            <ol>
                <li>
                    Choose some text. We chose the text "Mozilla Manifesto".
                </li>
                <li>
                    Wrap the text in an &lt;a&gt; element, as shown below:
                    <div>
                        <code>
                &lt;a&gt;Mozilla Manifesto&lt;/a&gt;
              </code>
                    </div>

                </li>
                <li>
                    Give the &lt;a&gt; element an href attribute, as shown below:
                    <div>
                        <code>
                &lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;
              </code>
                    </div>
                </li>
                <li>
                    Fill in the value of this attribute with the web address that you want the link to:
                    <div>
                        <code>
                &lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Monifesto&lt;/a&gt;
              </code>
                    </div>
                </li>
            </ol>
            <p>
                You might get unexpected results if you omit the <code>https://</code> or <code>http://</code> part,
                called the protocol, at the beginning of the web address. After making a link, click it to make sure it
                is sending you where you wanted it to.
            </p>
            <p>
                Add a link to your page now, if you haven't already done so.
            </p>
        </article>
    </section>
    <section class="main-section" id="conclusion">
        <header>Conclusion</header>
        <article>
            <p>
                If you have followed all the instructions in this article, you should end up with a page that looks like
                the one below (you can also <a href="https://mdn.github.io/beginner-html-site/">view it here</a>):
            </p>
            <img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png"
                atl="">
            <p>
                If you get stuck, you can always compare your work with our <a
                    href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example</a> code
                on GitHub.
            </p>
        </article>
    </section>
    <section class="main-section" id="Reference">
        <header>Reference</header>
        <article>
            <p>
                All the documentation in this page is taken from <a
                    href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a></p>
        </article>
    </section>
</main>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body {
  background-color: #EEE;
  font-family: Roboto, Sans serif;
    
}
#navbar {
  position: fixed;
  background-color: #283593;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  
}
#navbar li {
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar ul {
  height: 80%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#navbar header {
  color: white;
  font-weight: bold;
  font-size: 50px;
}
#navbar a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  
  
}
#navbar a:hover {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

#main-doc {
  position: absolute;
  margin-left: 350px;
  width: 100%;
  max-width: 850px;
  padding: 12px;
}

#main-doc header {
  font-size: 30px;
  font-weight: bold;
}
#main-doc header:hover {
   text-decoration: underline;
  
}
              
            
!

JS

              
                
              
            
!
999px

Console