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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

        <nav id="navbar">
            <header>
              <h1>HTML Documentation</h1>
            </header>
            <div>
                <ul>
                    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
                    <li><a href="#Getting_Started" class="nav-link">Getting Started</a></li>
                    <li><a href="#Elements" class="nav-link">Elements</a></li>
                    <li><a href="#Attributes" class="nav-link">Attributes</a></li>
                    <li><a href="#Headings" class="nav-link">Headings</a></li>
                    <li><a href="#Paragraphs" class="nav-link">Paragraphs</a></li>
                    <li><a href="#Links" class="nav-link">Links</a></li>
                    <li><a href="#Text_Formating" class="nav-link">Text Formating</a></li>
                    <li><a href="#Styles" class="nav-link">Styles</a></li>
                    <li><a href="#Images" class="nav-link">Images</a></li>
                    <li><a href="#References" class="nav-link">References</a></li>
                </ul>
            </div>
        </nav>
        <main id="main-doc">
            <section class="main-section" id="Introduction">
              <header>Introduction</header>
                <article>
                    <p>
                        HTML is the main markup language for describing the structure of web pages.
                    </p>
                    <p>
                        HTML stands for HyperText Markup Language. HTML is the basic building block of World Wide Web.

Hypertext is text displayed on a computer or other electronic device with references to other text that the user can immediately access, usually by a mouse click or key press.

Apart from text, hypertext may contain tables, lists, forms, images, and other presentational elements. It is an easy-to-use and flexible format to share information over the Internet.

Markup languages use sets of markup tags to characterize text elements within a document, which gives instructions to the web browsers on how the document should appear.

HTML was originally developed by Tim Berners-Lee in 1990. He is also known as the father of the web. In 1996, the World Wide Web Consortium (W3C) became the authority to maintain the HTML specifications. HTML also became an international standard (ISO) in 2000. HTML5 is the latest version of HTML. HTML5 provides a faster and more robust approach to web development.
                    </p>
                    <h2>What You Can Do with HTML</h2>
                    <p>There are lot more things you can do with HTML.</p>
                    <ul>
                        <li>You can publish documents online with text, images, lists, tables, etc.</li>
                        <li>You can access web resources such as images, videos or other HTML document via hyperlinks.</li>
                        <li>You can create forms to collect user inputs like name, e-mail address, comments, etc.</li>
                        <li>You can include images, videos, sound clips, flash movies, applications and other HTML documents directly inside an HTML document.</li>
                        <li>You can create offline version of your website that work without internet.</li>
                        <li>You can store data in the user's web browser and access later on.</li>
                        <li>You can find the current location of your website's visitor.</li>
                    </ul>
                    <p>
                        The list does not end here, there are many other interesting things that you can do with HTML. You will learn about all of them in detail in upcoming chapters.
                    </p>
                    <div class="note">
                        <p>
                            <b>Note:</b> HTML as described earlier is a markup language not a programming language, like Java, Ruby, PHP, etc. You need a web browser to view the HTML pages. The web browsers do not display the HTML tags, but uses the tags to interpret the content of the web pages.
                        </p>
                    </div>
                    <h2>What is This Tutorial Covers</h2>
                    <p>
                        This HTML tutorial series covers all the fundamentals of HTML, including the idea of elements and attributes, way of formatting the text using HTML tags, methods of adding the style information to the document, technique of inserting images and tables, process of creating lists and forms as well as method of including other HTML documents inside the current document, and so on.

Once you're familiar with the basics, you'll move on to next level that explains the concept of doctype, methods for creating the web page layouts, importance of adding meta information to the web pages, way of adding scripts, techniques of showing special characters, anatomy of a URL, and more.

Finally, you'll explore some advanced features introduced in HTML5 such as new input types, drawing graphics on the webpage, including audios and videos in the document, storing data on client-side using web storage, caching files, performing background work with web worker, as well as getting user's geographical coordinates, creating drag and drop application, and so on.
                    </p>
                    <div class="tip">
                        <p>
                            <b>Tip:</b> Every chapter in this tutorial contains lots of real-world examples that you can try and test using an online editor. These examples will help you to better understand the concept or topic. It also contains smart workarounds as well as useful tips and important notes.
                        </p>
                    </div>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Getting_Started">
              <header>Getting Started</header>
                <article>
                    <p>
                        In this tutorial you will learn how easy it is to create an HTML document or a web page. To begin coding HTML you need only two stuff: a simple-text editor and a web browser.
                        <br>
                        Well, let's get started with creating your first HTML page.
                    </p>
                    <h2>Creating Your First HTML Document</h2>
                    <p>
                        Let's walk through the following steps. At the end of this tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.
                    </p>
                    <h3>Step 1: Creating the HTML file</h3>
                    <p>Open up your computer's plain text editor and create a new file.</p>
                    <div class="tip">
                        <p>
                            <b>Tip: </b>We suggest you to use Notepad (on Windows), TextEdit (on Mac) or some other simple text editor to do this; don't use Word or WordPad! Once you understand the basic principles, you may switch to more advanced tools such as Adobe Dreamweaver.
                        </p>
                    </div>
                    <h3>Step 2: Type some HTML code</h3>
                    <p>
                        Start with an empty window and type the following code:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122577265_1325084001203262_7826644804403155505_n.jpg?_nc_cat=108&ccb=2&_nc_sid=730e14&_nc_ohc=SAWz1blcvIcAX-rezBK&_nc_ht=scontent.fmdl4-3.fna&oh=bb813574a7ad164788fc85f9a10fd2f4&oe=5FB9022C" alt="Code Picture">
                    </code>
                    <h3>Step 3: Saving the file</h3>
                    <p>Now save the file on your desktop as "myfirstpage.html ".</p>
                    <div class="note">
                        <p><b>Note: </b> It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.</p>
                    </div>
                    <p>To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. If it does not, open your browser and drag the file to it.</p>
                    <h3>Explanation of code</h3>
                    <p>You might think what that code was all about. Well, let's find out.</p>
                    <ul>
                        <li>The first line &lt;!DOCTYPE html> is the document type declaration. It instructs the web browser that this document is an HTML5 document. It is case-insensitive.</li>
                        <li>The &lt;head> element is a container for the tags that provides information about the document,for example, &lt;title> tag defines the title of the document.</li>
                        <li>The &lt;body> element contains the document's actual content (paragraphs, links, images, tables, and so on) that is rendered in the web browser and displayed to the user.</li>
                    </ul>
                    <p>
                        You will learn about the different HTML elements in detail in the upcoming chapters. For now, just focus on the basic structure of the HTML document.
                    </p>
                    <div class="note">
                        <p><b><i class="fa fa-sticky-note" aria-hidden="true"></i>Note: </b> A DOCTYPE declaration appears at the top of a web page before all other elements; however the doctype declaration itself is not an HTML tag. Every HTML document requires a document type declaration to insure that your pages are displayed correctly.</p>
                    </div>
                    <div class="tip">
                        <p><b>Tip: </b>The &lt;html>, &lt;head>, and &lt;body> tags make up the basic skeleton of every web page. Content inside the &lt;head> and &lt;/head> are invisible to users with one exception: the text between &lt;title> and &lt;/title> tags which appears as the title on a browser tab.</p>
                    </div>
                    <h3>HTML Tags and Elements</h3>
                    <p>
                        HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets, such as &lt;html>, &lt;head>, &lt;body>, &lt;title>, &lt;p>, and so on.<br>
                        HTML tags normally come in pairs like &lt;html> and &lt;/html>. The first tag in a pair is often called the opening tag (or start tag), and the second tag is called the closing tag (or end tag).<br>
                        An opening tag and a closing tag are identical, except a slash (/) after the opening angle bracket of the closing tag, to tell the browser that the command has been completed.
                        <br>In between the start and end tags you can place appropriate contents. For example, a paragraph, which is represented by the p element, would be written as:

                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122446024_1325083997869929_3261444485714370873_n.jpg?_nc_cat=108&ccb=2&_nc_sid=730e14&_nc_ohc=R06X9phBcuAAX-68oyg&_nc_ht=scontent.fmdl4-3.fna&oh=48ccd7a040bc6096c9610cae5cfb9a1d&oe=5FB9755B" alt="Code Picture">
                    </code>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Elements">
                <header>Elements</header>
                <article>
                    <p>In this tutorial you will learn about HTML tags and elements.</p>
                    <h2>HTML Element Syntax</h2>
                    <p>An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.</p>
                    <p>
                        Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the p element, would be written as:
                    </p>
                    <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122201638_1325083994536596_4046742861896962311_n.jpg?_nc_cat=102&ccb=2&_nc_sid=730e14&_nc_ohc=fEwau5yLemAAX-tMg5g&_nc_ht=scontent.fmdl4-2.fna&oh=6618692b28fb7be6fbf847b2bf535171&oe=5FB80AB2">
                    <P>We will learn about the HTML attributes in the next chapter.</P>
                    <div class="note">
                        <p><b></i>Note: </b>All elements don't require the end tag or closing tag to be present. These are referred as empty elements, self-closing elements or void elements.

                        </p>
                    </div>
                    <h2>HTML Tags Vs Elements</h2>
                    <p>
                        Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.
                        <br>
                        However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity's sake of this website, the terms "tag" and "element" are used to mean the same thing — as it will define something on your web page.
                    </p>
                    <h2>Case Insensitivity in HTML Tags and Attributes</h2>
                    <p>In HTML, tag and attribute names are not case-sensitive (but most attribute values are case-sensitive). It means the tag &lt;P>, and the tag &lt;p> defines the same thing in HTML which is a paragraph.</p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122322182_1325084071203255_9166034261403618348_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=o78rdv85d3QAX_R86PI&_nc_ht=scontent.fmdl4-3.fna&oh=354d2a6dead6bd07354d3cc6dfef86ec&oe=5FB82DB9">
                    </code>
                    <div class="tip">
                        <p><b>Tip: </b>We recommend using lowercase for tag and attributing names in HTML, since by doing this you can make your document more compliant for future upgrades.</p>
                    </div>
                    <h2>Empty HTML Elements</h2>
                    <p>Empty elements (also called self-closing or void elements) are not container tags — that means, you can not write &lt;hr>some content &lt;/hr> or &lt;br>some content &lt;/br>.</p>
                    <p>A typical example of an empty element, is the &lt;br> element, which represents a line break. Some other common empty elements are &lt;img>, &lt;input>, &lt;link>, &lt;meta>, &lt;hr>, etc.</p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122115383_1325084047869924_7895238975451451075_n.jpg?_nc_cat=110&ccb=2&_nc_sid=730e14&_nc_ohc=XH-QryFEAQgAX_Oi2Vp&_nc_ht=scontent.fmdl4-3.fna&oh=3e2a70ba1d5d4be6cad205b74e803026&oe=5FB803F9">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>In HTML, a self-closing element is written simply as &lt;br>. In XHTML, a self-closing element requires a space and a trailing slash, such as &lt;br />.</p>
                    </div>
                    <h2>Nesting HTML Elements</h2>
                    <p>The following example shows some elements nested inside the &lt;p> element.</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122174383_1325084057869923_8130098319804852838_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=xypd3cH5RxcAX81EDYi&_nc_ht=scontent.fmdl4-2.fna&oh=5f8bf80518d2bb830358c18973549e66&oe=5FB7B0DB">
                    </code>
                    <div class="tip">
                        <p><b>Tip: </b>Placing one element inside another is called nesting. A nested element, also called a child element, can be a parent element too if other elements are nested within it.</p>
                    </div>
                    <p>
                        HTML tags should be nested in correct order. They must be closed in the inverse order of how they are defined, that means the last tag opened must be closed first.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122569758_1325084097869919_5595578120227089268_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=G9VMITreOLkAX9e1Zyc&_nc_ht=scontent.fmdl4-2.fna&oh=86140a521ba28e74aaec633edb5b254a&oe=5FB78100">
                    </code>
                    <h2>Writing Comments in HTML</h2>
                    <p>
                        Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the HTML. Comments are not displayed in the browser.
                    </p>
                    <p>An HTML comment begins with &lt;!--, and ends with -->, as shown in the example below:</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122152031_1325084114536584_5324229260442164622_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=tTjdicAM238AX_tNXtv&_nc_ht=scontent.fmdl4-2.fna&oh=089e9b3db4311c408876e3dadeb72e70&oe=5FB8F264">
                    </code>
                    <p>You can also comment out part of your HTML code for debugging purpose, as shown here:</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122044394_1325084117869917_7939064621655384384_n.jpg?_nc_cat=106&ccb=2&_nc_sid=730e14&_nc_ohc=XexldKdcvFkAX9nH_Jz&_nc_ht=scontent.fmdl4-2.fna&oh=b0f269e67bf82ac21eb22bd4c3dae98b&oe=5FB7C09B">
                    </code>
                    <h2>HTML Elements Types</h2>
                    <p>
                        Elements can be placed in two distinct groups: block level and inline level elements. The former make up the document's structure, while the latter dress up the contents of a block.<br>

Also, a block element occupies 100% of the available width and it is rendered with a line break before and after. Whereas, an inline element will take up only as much space as it needs.
                    </p>
                    <p>
                        The most commonly used block-level elements are &lt;div>, &lt;p>, &lt;h1> through &lt;h6>, &lt;form>, &lt;ol>, &lt;ul>, &lt;li>, and so on. Whereas, the commonly used inline-level elements are &lt;img>, &lt;a>, &lt;span>, &lt;strong>, &lt;b>, &lt;em>, &lt;i>, &lt;code>, &lt;input>, &lt;button>, etc.

                            <br>You will learn about these elements in detail in upcoming chapters.
                    </p>
                    <div class="note">
                        <p><b>Note: </b>The block-level elements should not be placed within inline-level elements. For example, the &lt;p> element should not be placed inside the &lt;b> element.</p>
                    </div>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Attributes">
                <header>Attributes</header>
                <article>
                    <p>In this tutorial you will learn how to use attributes to give more meaning to HTML tags.</p>
                    <h2>What are Attributes</h2>
                    <p>
                        Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value". Attribute values should always be enclosed in quotation marks.<br>

Also, some attributes are required for certain elements. For instance, an <img> tag must contain a src and alt attributes. Let's take a look at some examples of the attributes usages:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122189423_1325084141203248_893583760092324246_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=BzUEk5wWPq0AX80bMDG&_nc_oc=AQlCR_yYYnW3rZwoG9UP0gkksvfAgtahhMkSzRs6ACdtXMfG7Y8AtAN5LNsMCOICnFRLL0xkYfPwGT65lfXaEZ8f&_nc_ht=scontent.fmdl4-3.fna&oh=a6a47c6fdf76490645cdc82409c504c4&oe=5FB88473">
                    </code>
                    <p>
                        In the above example src inside the &lt;img> tag is an attribute and image path provided is its value. Similarly href inside the &lt;a> tag is an attribute and the link provided is its value, and so on.
                    </p>
                    <div class="tip">
                        <p><b>Tip: </b>Both single and double quotes can be used to quote attribute values. However, double quotes are most common. In situations where the attribute value itself contains double quotes it is necessary to wrap the value in single quotes, e.g., value='John "Williams" Jr.'</p>
                    </div>
                    <p>
                        There are several attributes in HTML5 that do not consist of name/value pairs but consists of just name. Such attributes are called Boolean attributes. Examples of some commonly used Boolean attributes are checked, disabled, readonly, required, etc.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122525243_1325084174536578_3425388102402788465_n.jpg?_nc_cat=110&ccb=2&_nc_sid=730e14&_nc_ohc=qobjkiPQZWUAX-zTzly&_nc_ht=scontent.fmdl4-3.fna&oh=329a8656d0b2c59c302d6639af1e5fe4&oe=5FB7FAA8">
                    </code>
                    <p>
                        You will learn about all these elements in detail in upcoming chapters.
                    </p>
                    <div class="note">
                        <p>
                            <b>Note: </b>Attribute values are generally case-insensitive, except certain attribute values, like the id and class attributes. However, World Wide Web Consortium (W3C) recommends lowercase for attributes values in their specification.
                        </p>
                    </div>
                    <h2>General Purpose Attributes</h2>
                    <p>There are some attributes, such as id, title, class, style, etc. that you can use on the majority of HTML elements. The following section describes their usages.</p>
                    <h3>The id Attribute</h3>
                    <p>The id attribute is used to give a unique name or identifier to an element within a document. This makes it easier to select the element using CSS or JavaScript.</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122041486_1325084167869912_2143060876072130929_n.jpg?_nc_cat=100&ccb=2&_nc_sid=730e14&_nc_ohc=ZtwZrA0vGc8AX8GGzUd&_nc_ht=scontent.fmdl4-2.fna&oh=957df10e41b22a92ec5068b1cceb1852&oe=5FB8C4DC">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>The id of an element must be unique within a single document. No two elements in the same document can be named with the same id, and each element can have only one id.</p>
                    </div>
                    <h3>The class Attribute</h3>
                    <p>Like id attribute, the class attribute is also used to identify elements. But unlike id, the class attribute does not have to be unique in the document. This means you can apply the same class to multiple elements in a document, as shown in the following example:</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122140457_1325084201203242_3964185737385308470_n.jpg?_nc_cat=106&ccb=2&_nc_sid=730e14&_nc_ohc=SmmY1zv8q4kAX-nlxKC&_nc_ht=scontent.fmdl4-2.fna&oh=894beb66f9477942073940786013bd2a&oe=5FB8A1F1">
                    </code>
                    <div class="tip">
                        <p><b>Tip: </b>Since a class can be applied to multiple elements, therefore any style rules that are written to that class will be applied to all the elements having that class.</p>
                    </div>
                    <h3>The title Attribute</h3>
                    <p>The title attribute to is used to provide advisory text about an element or its content. Try out the following example to understand how this actually works.</p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122052419_1325084214536574_7979951580719714214_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=WXrZlEoE-8wAX8Xb9qT&_nc_ht=scontent.fmdl4-3.fna&oh=58ad972f2a41d3c0bfad5408bd427722&oe=5FB987CD">
                    </code>
                    <p><b>Tip: </b>The value of the title attribute (i.e. title text) is displayed as a tooltip by the web browsers when the user place mouse cursor over the element.</p>
                    <h3>The style Attribute</h3>
                    <p>The style attribute allows you to specify CSS styling rules such as color, font, border, etc. directly within the element. Let's check out an example to see how it works:</p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122482939_1325084227869906_2337513077494862493_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=wp3oYuhtXboAX8y61AM&_nc_ht=scontent.fmdl4-3.fna&oh=956dca927077f0b8951d8a85e30af948&oe=5FB89F47">
                    </code>
                    <p>You will learn more about styling HTML elements in HTML styles chapter.</p>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Headings">
                <header>Headings</header>
                <article>
                    <p>In this tutorial you will learn how to create headings in HTML</p>
                    <h2>Organizing Content with Headings</h2>
                    <p>
                        Headings help in defining the hierarchy and the structure of the web page content.<br>

HTML offers six levels of heading tags, &lt;h1> through &lt;h6>; the higher the heading level number, the greater its importance — therefore &lt;h1> tag defines the most important heading, whereas the &lt;h6> tag defines the least important heading in the document.

By default, browsers display headings in larger and bolder font than normal text. Also, &lt;h1> headings are displayed in largest font, whereas &lt;h6> headings are displayed in smallest font.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122008302_1325084277869901_1486992980164033101_n.jpg?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=qfAaF7Cz0TgAX-Jql8n&_nc_ht=scontent.fmdl4-3.fna&oh=d3925981cd809eb4fd248f053199f28f&oe=5FB8DD9A">
                    </code>
                    <P>--the output above example will look something like this:</P>
                    <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122170899_1325084261203236_2606213645648650701_n.jpg?_nc_cat=103&ccb=2&_nc_sid=730e14&_nc_ohc=l--9D4bwLewAX-SQYcN&_nc_ht=scontent.fmdl4-2.fna&oh=513996444c313154f0f97357fc863416&oe=5FB9E70F">
                    <div class="note">
                        <p><b>Note: </b>Each time you place a heading tag on a web page, the web browser built-in style sheets automatically create some empty space (called margin) before and after each heading. You can use the CSS margin property to override the browser's default style sheet.</p>
                    </div>
                    <div class="tip">
                        <p><b>Tip: </b>You can easily customize the appearance of HTML heading tags such as their font size, boldness, typeface, etc. using the CSS font properties.</p>
                    </div>
                    <h2>Importance of Headings</h2>
                    <ul>
                        <Li>HTML headings provide valuable information by highlighting important topics and the structure of the document, so optimize them carefully to improve user engagement.</Li>
                        <li>Don't use headings to make your text look BIG or bold. Use them only for highlighting the heading of your document and to show the document structure.</li>
                        <li>Since search engines, such as Google, use headings to index the structure and content of the web pages so use them very wisely in your webpage.</li>
                        <li>Use the &lt;h1> headings as main headings of your web page, followed by the &lt;h2> headings, then the less important &lt;h3> headings, and so on.</li>
                    </ul>
                    <div class="tip">
                        <p><b>Tip: </b>Use the &lt;h1> tag to mark the most important heading which is usually at the top of the page. An HTML document generally should have exactly one &lt;h1> heading, followed by the lower-level headings such as &lt;h2>, &lt;h3>, &lt;h4>, and so on.</p>
                    </div>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Paragraphs">
                <header>Paragraphs</header>
                <article>
                    <p>In this tutorial you will learn how to create paragraphs in HTML.</p>
                    <h2>Creating Paragraphs</h2>
                    <p>
                        Paragraph element is used to publish text on the web pages.<br>

Paragraphs are defined with the <p> tag. Paragraph tag is a very basic and typically the first tag you will need to publish your text on the web pages. Here's an example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122207333_1325084257869903_1549665410152729371_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=3i9eFU8KEFYAX9d7ram&_nc_oc=AQnu7x1vr3vV1fjjDozJ4ZoOLrQOT4Lb2UlThJKftwxvYG1N9yBCBh6W1x8UxbvKnqnvWkIXqlY4x9D92ABy3QAf&_nc_ht=scontent.fmdl4-3.fna&oh=b19325947e688a3520b560f70a388fff&oe=5FB80A09">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>Browsers built-in style sheets automatically create some space above and below the content of a paragraph (called margin), but you can override it using CSS.</p>
                    </div>
                    <h2>Creating Line Breaks</h2>
                    <p>
                        The &lt;br> tag is used to insert a line break on the web page.

Since the &lt;br> is an empty element, so there is no need of corresponding &lt;/br> tag.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122062165_1325084307869898_3409091286774188751_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=RPSt3hrliT4AX-YJ9wD&_nc_ht=scontent.fmdl4-3.fna&oh=4f2a9313ef1bbb1e9c24267d3a15b578&oe=5FB6B386">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>Don't use the empty paragraph i.e. &lt;p>&lt;/p> to add extra space in your web pages. The browser may ignore the empty paragraphs since it is logical tag. Use the CSS margin property instead to adjust the space around the elements.</p>
                    </div>
                    <h2>Creating Horizontal Rules</h2>
                    <p>You can use the &lt;hr> tag to create horizontal rules or lines to visually separate content sections on a web page. Like &lt;br>, the &lt;hr> tag is also an empty element. Here's an example:</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/121992730_1325084314536564_736613857476247378_n.jpg?_nc_cat=104&ccb=2&_nc_sid=730e14&_nc_ohc=4NIzbezLAhMAX80N4Qe&_nc_ht=scontent.fmdl4-2.fna&oh=a8774fb48f9ee35eba7b183f36d1a027&oe=5FB6D0C3">
                    </code>
                    <h2>Managing White Spaces</h2>
                    <p>
                        Normally the browser will display the multiple spaces created inside the HTML code by pressing the space-bar key or tab key on the keyboard as a single space. Multiple line breaks created inside the HTML code through pressing the enter key is also displayed as a single space.
<br>
The following paragraphs will be displayed in a single line without any extra space:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122117048_1325084334536562_165373163118880036_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=AueboSeUNN8AX8TDq1V&_nc_ht=scontent.fmdl4-2.fna&oh=ace3928adcc8222bc3ca85920b97627d&oe=5FB9A35F">
                    </code>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Links">
                <header>Links</header>
                <article>
                    <p>In this tutorial you will learn how to create links to other pages in HTML.</p>
                    <h2>Creating Links in HTML</h2>
                    <p>
                        A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.
                        
                        By default, links will appear as follow in most of the browsers:
                    </p>
                    <ul>
                        <Li>An unvisited link is underlined and blue.</Li>
                        <li>A visited link is underlined and purple.</li>
                        <li>An active link is underlined and red.</li>
                    </ul>
                    <p>However, you can overwrite this using CSS. Learn more about styling links.</p>
                    <h2>HTML Link Syntax</h2>
                    <p>
                        Links are specified in HTML using the &lt;a> tag.

                        <br>   A link or hyperlink could be a word, group of words, or image.
                    </p>
                    <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122064676_1325084351203227_4109176087047308191_n.jpg?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=2qeNkvjx5PIAX_hOA5t&_nc_ht=scontent.fmdl4-3.fna&oh=c0b9d57ae3fd1d54eaf07d27c559aa2f&oe=5FBA6174">
                    <P>
                        Anything between the opening &lt;a> tag and the closing &lt;/a> tag becomes the part of the link that the user sees and clicks in a browser. Here are some examples of the links:
                    </P>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122261145_1325084387869890_3427681800615634086_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=6h5Og2oYwbsAX_kLLFs&_nc_ht=scontent.fmdl4-3.fna&oh=6ad21e8c5d977900058444547ded495d&oe=5FB8D8FC">
                    </code>
                    <p>
                        The href attribute specifies the target of the link. Its value can be an absolute or relative URL.

An absolute URL is the URL that includes every part of the URL format, such as protocol, host name, and path of the document, e.g., https://www.google.com/, https://www.example.com/form.php, etc. While, relative URLs are page-relative paths, e.g., contact.html, images/smiley.png, and so on. A relative URL never includes the http:// or https:// prefix.


                    </p>
                    <h2>Setting the Targets for Links</h2>
                    <p>
                        The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(_) character:
                    </p>
                    <ul>
                        <li>_blank — Opens the linked document in a new window or tab.</li>
                        <li>_parent — Opens the linked document in the parent window.</li>
                        <li>_self — Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value.</li>
                        <li>_top — Opens the linked document in the full browser window.</li>
                    </ul>
                    <p>Try out the following example to understand how the link's target basically works:</p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122450546_1325084384536557_6118445185579686253_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=XOYGjogAADwAX_j_9_0&_nc_ht=scontent.fmdl4-3.fna&oh=882c5c7ae835f0d963384bfe22aed121&oe=5FB9CEC6">
                    </code>
                    <div class="tip">
                        <p><b>Tip :</b>If your web page is placed inside an iframe, you can use the target="_top" on the links to break out of the iframe and show the target page in full browser window.</p>
                    </div>
                    <h2>Creating Bookmark Anchors</h2>
                    <p>
                        You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks are especially helpful if you have a very long web page.
                      
Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump, then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the &lt;a> tag, as shown in the following example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122124169_1325084407869888_1072246751923368018_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=2FK9v1_eB64AX84MYIB&_nc_ht=scontent.fmdl4-3.fna&oh=4e97a76c613df6a9c7e54e7acd8b5386&oe=5FB86449">
                    </code>
                    <div class="tip">
                        <p><b>Tip: </b>You can even jump to a section of another web page by specifying the URL of that page along with the anchor (i.e. #elementId) in the href attribute, for example, &lt;a href="mypage.html#topicA">Go to TopicA&lt;/a>.</p>
                    </div>
                    <h2>Creating Download Links</h2>
                    <p>
                        You can also create the file download link in exactly the same fashion as placing text links. Just point the destination URL to the file you want to be available for download.
                        <br>
                        In the following example we've created the download links for ZIP, PDF and JPG files.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122196783_1325084431203219_5107990074558298542_n.jpg?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=ZnlR0fgVDm0AX_SZNeC&_nc_ht=scontent.fmdl4-3.fna&oh=a2c54c5dd4654af7e887b115cb14419b&oe=5FB96A8C">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>When you click a link that points to a PDF or image file, the file is not downloaded to your hard drive directly. It will only open the file in your web browser. Further you can save or download it to your hard drive on a permanent basis.</p>
                    </div>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Text_Formating">
                <header>Text Formating</header>
                <article>
                    <p>In this tutorial you will learn how to format the text on the web pages using HTML tags.</p>
                    <h2>Formatting Text with HTML</h2>
                    <p>
                        HTML provides several tags that you can use to make some text on your web pages to appear differently than normal text, for example, you can use the tag &lt;b> to make the text bold, tag &lt;i> to make the text italic, tag &lt;mark> to highlight the text, tag &lt;code> to display a fragment of computer code, tags &lt;ins> and &lt;del> for marking editorial insertions and deletions, and more.
                        <br><br>
                            The following example demonstrates the most commonly used formatting tags in action. Now, let's try this out to understand how these tags basically work:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/121996815_1325084444536551_5566356460700094751_n.jpg?_nc_cat=110&ccb=2&_nc_sid=730e14&_nc_ohc=I3QI8YMJ3m4AX-uETNz&_nc_ht=scontent.fmdl4-3.fna&oh=4f02455cec3daeead204bf8589363d71&oe=5FB8CA24">
                    </code>
                    <p>
                        By default, the &lt;strong> tag is typically rendered in the browser as &lt;b>, whereas the &lt;em> tag is rendered as &lt;i>. However, there is a difference in the meaning of these tags.
                    </p>
                    <h2>Difference between &lt;strong> and &lt;b> tag</h2>
                    <p>
                        Both &lt;strong> and &lt;b> tags render the enclosed text in a bold typeface by default, but the &lt;strong> tag indicates that its contents have strong importance, whereas the &lt;b> tag is simply used to draw the reader's attention without conveying any special importance.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122466592_1325084451203217_5635220674593719356_n.jpg?_nc_cat=104&ccb=2&_nc_sid=730e14&_nc_ohc=vU989fmhzvAAX_HAbaH&_nc_ht=scontent.fmdl4-2.fna&oh=07e7f6feaf3dd145b8ff38bd06878397&oe=5FB90714">
                    </code>
                    <h2>Difference between &lt;em> and &lt;i> tag</h2>
                    <p>
                        Similarly, both &lt;em> and &lt;i> tags render the enclosed text in italic type by default, but the &lt;em> tag indicates that its contents have stressed emphasis compared to surrounding text, whereas the &lt;i> tag is used for marking up text that is set off from the normal text for readability reasons, such as a technical term, an idiomatic phrase from another language, a thought, etc.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122112321_1325084494536546_7972277048558465889_n.jpg?_nc_cat=100&ccb=2&_nc_sid=730e14&_nc_ohc=L_HaGjnqnDMAX-9fTvi&_nc_ht=scontent.fmdl4-2.fna&oh=e2b4686e677c6ac5e849b5b1219d0d98&oe=5FB6E1F1">
                    </code>
                    <div class="note">
                        <p><b>Note: </b>Use the &lt;em> and &lt;strong> tags when the content of your page requires that certain words or phrases should have strong emphasis or importance. Also, in HTML5 the &lt;b> and &lt;i> tags have been redefined, earlier they don't have semantic meaning.</p>
                    </div>
                    <h2>Formatting Quotations</h2>
                    <p>
                        You can easily format the quotation blocks from other sources with the HTML &lt;blockquote> tag.
                        <br>
                            Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below. Let's try an example to see how it works:    
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122154794_1325084524536543_7292566666958511949_n.jpg?_nc_cat=101&ccb=2&_nc_sid=730e14&_nc_ohc=qPLUJPSj4yAAX8l39-Q&_nc_ht=scontent.fmdl4-2.fna&oh=6fc53089b0c3e643445ed7528f57a117&oe=5FB93437">
                    </code>
                    <div class="tip">
                        <p><b>Tip: </b>The cite tag is used to describe a reference to a creative work. It must include the title of that work or the name of the author (people or organization) or an URL reference.</p>
                    </div>
                    <p>
                        For short inline quotations, you can use the HTML &lt;q> tag. Most browsers display inline quotes by surrounding the text in quotation marks. Here's an example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122457335_1325084521203210_7475114118916846997_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=rYeWZbML5D8AX-Vojm2&_nc_ht=scontent.fmdl4-3.fna&oh=cfccecffad29b58d98ddbff95eb9a2c7&oe=5FB8C112">
                    </code>
                    <h2>Showing Abbreviations</h2>
                    <p>
                        An abbreviation is a shortened form of a word, phrase, or name.
                        <br>
                        You can use the &lt;abbr> tag to denote an abbreviation. The title attribute is used inside this tag to provide the full expansion of the abbreviation, which is displayed by the browsers as a tooltip when the mouse cursor is hovered over the element. Let's try out an example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122134553_1325084551203207_6914702045067951673_n.jpg?_nc_cat=103&ccb=2&_nc_sid=730e14&_nc_ohc=ZyaoJfIMykIAX-NNq-J&_nc_ht=scontent.fmdl4-2.fna&oh=1b3ada1f8a97a92c63441f8b340a1c6b&oe=5FB87368">
                    </code>
                    <h2>Marking Contact Addresses</h2>
                    <p>
                        Web pages often include street or postal addresses. HTML provides a special tag &lt;address> to represent contact information (physical and/or digital) for a person, people or organization.
                        <br>
                            This tag should ideally used to display contact information related to the document itself, such as article's author. Most browsers display an address block in italic. Here's an example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122113199_1325084571203205_3218509344511700236_n.jpg?_nc_cat=102&ccb=2&_nc_sid=730e14&_nc_ohc=w8yVOehRBKMAX-PdOX6&_nc_ht=scontent.fmdl4-2.fna&oh=4ed354371d60e6632651cc987c2d1b66&oe=5FB93E64">
                    </code>
                </article>
          </section>
            <hr>
            <section class="main-section" id="Styles">
                <header>Styles</header>
                <article>
                    <p>In this tutorial you will learn how to apply style rules to HTML elements.</p>
                    <h2>Styling HTML Elements</h2>
                    <p>
                        HTML is quite limited when it comes to the presentation of a web page. It was originally designed as a simple way of presenting information. CSS (Cascading Style Sheets) was introduced in December 1996 by the World Wide Web Consortium (W3C) to provide a better way to style HTML elements.
<br><br>
With CSS, it becomes very easy to specify the things like, size and typeface for the fonts, colors for the text and backgrounds, alignment of the text and images, amount of space between the elements, border and outlines for the elements, and lots of other styling properties.
                    </p>
                    <h2>Adding Styles to HTML Elements</h2>
                    <p>
                        Style information can either be attached as a separate document or embedded in the HTML document itself. These are the three methods of implementing styling information to an HTML document.
                    </p>
                    <ul>
                        <li><b>Inline styles</b> — Using the style attribute in the HTML start tag.</li>
                        <li><b>Embedded style</b> — Using the &lt;style> element in the head section of the document.</li>
                        <li><b>External style sheet</b>Using the &lt;link> element, pointing to an external CSS files.</li>
                    </ul>
                    <p>In this tutorial we will cover all these different types of style sheet one by one.</p>
                    <div class="note">
                        <p>
                            <b>Note: </b>The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for your paragraphs in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet.
                        </p>
                    </div>
                    <h2>Inline Styles</h2>
                    <p>
                        Inline styles are used to apply the unique style rules to an element, by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.
<br><br>
The style attribute includes a series of CSS property and value pairs. Each property: value pair is separated by a semicolon (;), just as you would write into an embedded or external style sheet. But it needs to be all in one line i.e. no line break after the semicolon.
<br><br>
The following example demonstrates how to set the color and font-size of the text:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122080460_1325084577869871_649327443521332743_n.jpg?_nc_cat=106&ccb=2&_nc_sid=730e14&_nc_ohc=Wla_rNQ-B3cAX_qGZ4r&_nc_ht=scontent.fmdl4-2.fna&oh=6d2ce9e81b037bf32cb3597e7922c67a&oe=5FBA5F20">
                    </code>
                    <p>
                        Using the inline styles are generally considered as a bad practice. Because style rules are embedded directly inside the html tag, it causes the presentation to become mixed with the content of the document, which makes updating or maintaining a website very difficult.
<br><br>
To learn about the various CSS properties in detail, please check out CSS tutorial section.
                    </p>
                    <div class="note">
                        <p><b>Note: </b>It's become impossible to style pseudo-elements and pseudo-classes with inline styles. You should, therefore, avoid the use of style attributes in your markup. Using external style sheet is the preferred way to add style information to an HTML document.</p>
                    </div>
                    <h2>Embedded Style Sheets</h2>
                    <p>
                        Embedded or internal style sheets only affect the document they are embedded in.
<br><br>
Embedded style sheets are defined in the &lt;head> section of an HTML document using the &lt;style> tag. You can define any number of &lt;style> elements inside the &lt;head> section.
<br><br>
The following example demonstrates how style rules are embedded inside a web page.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122483951_1325084601203202_3070920848136928025_n.jpg?_nc_cat=106&ccb=2&_nc_sid=730e14&_nc_ohc=GrVnIK_Zta0AX_Cyhu5&_nc_ht=scontent.fmdl4-2.fna&oh=89d3ea95d0b21b8e1258937cbf051830&oe=5FB8AAF8">
                    </code>
                    <h2>External Style Sheets</h2>
                    <p>
                        An external style sheet is ideal when the style is applied to many pages.
<br><br>
An external style sheet holds all the style rules in a separate document that you can link from any HTML document on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by updating just one file.
<br><br>
You can attach external style sheets in two ways — linking and importing:
                    </p>
                    <h2>Linking External Style Sheets</h2>
                    <p>
                        An external style sheet can be linked to an HTML document using the &lt;link> tag.
<br><br>
The &lt;link> tag goes inside the &lt;head> section, as shown here:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122382159_1325084621203200_5842403064053602974_n.jpg?_nc_cat=107&ccb=2&_nc_sid=730e14&_nc_ohc=mzrAIfr1O6wAX_7lMqt&_nc_ht=scontent.fmdl4-3.fna&oh=bc10001e8151022be90149dee0a21e30&oe=5FB8E8A4">
                    </code>
                    <h2>Importing External Style Sheets</h2>
                    <p>
                        The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles.

You can use it in two ways. The simplest way is to use it within the &lt;style> element in your &lt;head> section. Note that, other CSS rules may still be included in the &lt;style> element.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122590658_1325084627869866_8774493472622966898_n.jpg?_nc_cat=104&ccb=2&_nc_sid=730e14&_nc_ohc=jILPFueUtNAAX_Pm-5t&_nc_ht=scontent.fmdl4-2.fna&oh=6bab1f6ad650adc8c16aa80d4a5474e6&oe=5FB8AB62">
                    </code>
                    <p>Similarly, you can use the @import rule to import a style sheet within another style sheet.</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122326186_1325084651203197_1064149643311540659_n.jpg?_nc_cat=102&ccb=2&_nc_sid=730e14&_nc_ohc=re7G22EY55wAX-Nm9-0&_nc_ht=scontent.fmdl4-2.fna&oh=b08c15a24c7fae27d343402c3503646f&oe=5FB8CC8D">
                    </code>
                </article>
            </section>
            <hr>
            <section class="main-section" id="Images">
                <header>Images</header>
                <article>
                  <p>In this tutorial you will learn how to include images in an HTML document.</p>
                    <h2>Inserting Images into Web Pages</h2>
                    <p>Images enhance visual appearance of the web pages by making them more interesting and colorful.
                        <br><br>
                        The &lt;img> tag is used to insert images in the HTML documents. It is an empty element and contains attributes only. The syntax of the &lt;img> tag can be given with:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122502593_1325084661203196_288181662748406137_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=yyv8qLqv2vAAX_L2QSh&_nc_ht=scontent.fmdl4-3.fna&oh=79d8821dfb67cfd9a6cb8e28d1dabf35&oe=5FB98DEE">
                    </code>
                    <p>The following example inserts three images on the web page:</p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/122630926_1325084671203195_102740468709442068_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=bVZmFoLm4gMAX9pSVjp&_nc_ht=scontent.fmdl4-2.fna&oh=f1e9de3da39399a9e65767da8d062ae5&oe=5FBA3603">
                    </code>
                    <p>
                        Each image must carry at least two attributes: the src attribute, and an alt attribute.
<br><br>
The src attribute tells the browser where to find the image. Its value is the URL of the image file.
<br><br>
Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be displayed for some reason. Its value should be a meaningful substitute for the image.
                    </p>
                    <div class="note">
                        <p><b>Note: </b> Like &lt;br> , the &lt;img> element is also an empty element, and does not have a closing tag. However, in XHTML it closes itself ending with "/>".</p>
                    </div>
                    <div class="tip">
                        <p><b>Tip: </b>The required alt attribute provides alternative text description for an image if a user for some reason cannot able to view it because of slow connection, image is not available at the specified URL, or if the user uses a screen reader or non-graphical browser.</p>
                    </div>
                    <h2>Setting the Width and Height of an Image</h2>
                    <p>
                        The width and height attributes are used to specify the width and height of an image.
<br><br>
The values of these attributes are interpreted in pixels by default.
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-3.fna.fbcdn.net/v/t1.0-9/122173559_1325084697869859_3833422529915958974_n.jpg?_nc_cat=109&ccb=2&_nc_sid=730e14&_nc_ohc=WcdOalP6yPEAX_SxmSV&_nc_ht=scontent.fmdl4-3.fna&oh=7c621ad756b717306d400c9604697bbe&oe=5FB74559">
                    </code>
                    <div class="note">
                        <p>
                            <b>Note: </b>It's a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.
                        </p>
                    </div>
                    <h2>Using the HTML5 Picture Element</h2>
                    <p>
                        Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as expected. Also, reducing the image dimension using the width and height attribute or property doesn't reduce the original file size. To address these problems HTML5 has introduced the &lt;picture> tag that allows you to define multiple versions of an image to target different types of devices.

                            The &lt;picture> element contains zero or more &lt;source> elements, each referring to different image source, and one &lt;img> element at the end. Also each &lt;source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used. Let's try out an example:
                    </p>
                    <code>
                        <img src="https://scontent.fmdl4-2.fna.fbcdn.net/v/t1.0-9/121971133_1325084704536525_7609056237870512287_n.jpg?_nc_cat=105&ccb=2&_nc_sid=730e14&_nc_ohc=pgNAdcFepNsAX8OfQxW&_nc_ht=scontent.fmdl4-2.fna&oh=a74b48494363ad689d9183ff3a92213d&oe=5FB7C941">
                    </code>
                    <div class="note">
                        <p>
                            <b>Note: </b>The browser will evaluate each child &lt;source> element and choose the best match among them; if no matches are found, the URL of the &lt;img> element's src attribute is used. Also, the &lt;img> tag must be specified as the last child of the &lt;picture> element.
                        </p>
                    </div>
                </article>
            </section>
            <hr>
            <section class="main-section" id="References">
                <header>References</header>
                <article>
                  <p>these articles are from www.tutorialrepublic.com</p>
                    <ul>
                        <li>
                            <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">www.tutorialrepublic.com</a>
                        </li>
                    </ul>
                </article>
            </section>
        </main>

              
            
!

CSS

              
                *{
    box-sizing: border-box;
}
body{
    padding:0;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
}
#navbar{
    background-color: #ccc;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    z-index: 1;
    overflow-y:auto;
    overflow-x: hidden;
}
#navbar header{
    padding:10px;
}
#navbar h3{
    padding:8px;
    margin: 0;
}
#navbar ul{
    margin:0;
    padding:5px;
}
#navbar li{
    cursor: pointer;
    padding:10px 0px 10px 5px;
    list-style-type:none;
    border-bottom: 1px solid white;
}
#navbar li a{
    text-decoration: none;
    color:black;
}

/* Main Doc */
#main-doc{
    background-color: #ddd;
    margin-left:269px;
    padding:10px 25px;
    
}
#main-doc header{
  font-size:28px;
  font-weight:bold;
}
#main-doc header h1{
    font-size:28px;
}
.main-section{
    margin-bottom: 30px;
}
.main-section p{
    text-align: justify;
    line-height:1.5em;
    word-spacing: 2px;
}
.main-section li{
    margin:5px 0px;
}
.main-section .note{
    background-color: rgba(114, 194, 255, 0.8);
    border:2px solid white;
    padding:0px 15px;
    border-radius: 15px 0px 15px 0px;
    margin:10px 0px;
}
.main-section .tip{
    background-color: rgba(216, 255, 102, 0.8);
    border:2px solid white;
    padding:0px 15px;
    border-radius: 15px 0px 15px 0px;
    margin:10px 0px;
}
.main-section img{
    max-width: 100%;
}
.main-section article ul li a{
    text-decoration: none;
    color:black;
}

@media (max-width:1000px){
    #main-doc{
        margin-left: 228px;
    }
    #navbar header h1{
        font-size:20px;
    }
    #navbar h3{
        font-size:18px;
    }
    #navbar ul li a{
        font-size:15px;
    }

}
@media (max-width:500px){
    #main-doc{
        position: relative;
        margin-left:0;
        margin-top:180px;
    }
    #navbar{
        position: fixed;
        height:200px;
        width:100%;
        top:0;
    }
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console