Technical Documentation Page

A technical documentation page is a web page that provides technical information about a product or process.

It is typically written for technical users, such as developers, engineers, or IT professionals.

In this tutorial, we will learn how to style the header, sidebar menu, and main content of our documentation page.


Prerequisites

To understand this tutorial, you should have a basic understanding of HTML and CSS. If you are not familiar with HTML and CSS, read our comprehensive HTML Tutorial and CSS Tutorial.

CSS concepts to design our technical documentation page:


Layout of HTML Documentation Page

The final layout of our HTML documentation page will look like this:

CSS HTML Documentation Layout

Approach

To develop our technical documentation, we will have the following steps:

1. First, create a header having our logo and main heading.

2. Create a sidebar with a table of contents.

3. Create a main section with all content.

4. Finally, add a footer to our technical documentation page.

Let's start building our page.


Resetting Browser Stylesheet Rule

Before we jump to build our technical documentation page, let's reset the browser's default stylesheet in our CSS to gain greater control over the layout.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Resetting the browser's padding and margins to 0 ensures precise control over the width and height of elements.

Additionally, setting the box-sizing property to border-box allows both padding and border to be added within the width and height of the element.


Step 1: Create a Header

In the first step, let's create a header containing a logo and a main heading.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HTML Tutorial</title>
    </head>

    <body>
     
   <!-- header element consisting of a logo and a heading -->
        <header>
            <div class="logo-wrapper">
                <img
                    src="https://cdn.programiz.com/sites/tutorial2program/files/pc_logo.svg"
                    alt="Programiz Logo"
                />
            </div>
            <h1>HTML Tutorial</h1>
        </header>

    </body>
</html>
/* resets the browser default spacing */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* styles the header element */
header {
    height: 80px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
    background-color: aliceblue;
}

/* styles for logo wrapper*/
header .logo-wrapper {
    width: 100px;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* styles to fit logo image within the logo wrapper */
.logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* style for the main heading of page */
header h1 {
    line-height: 80px;
    color: #25265e;
}

Browser Output

Programiz Logo

HTML Tutorial

Here,

  • Setting position: relative in the header allows the .logo-wrapper (child element) to be positioned relative to it. Otherwise, it would be positioned relative to the document, i.e., the body element.
  • Using position: absolute moves the .logo-wrapper out of the header flow and allows for precise positioning within the header.
  • The value of top: 50% positions the logo from 50% of the height of the header, and left: 20px moves the logo 20px from the left of the document.
  • Setting line-height: 80px for the h1 element makes its line height equal to the height of the header, which centers the text vertically within the header.

Step 2: Create a sidebar

Now, let's add a sidebar with a table of content for our page.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HTML Tutorial</title>
    </head>

    <body>
        <!--     header is  here -->

        <main class="main">
            <!-- a sidebar consisting of menu of documentation page -->
            <aside class="table-of-content">
                <h2 class="menu-heading">Table of Contents</h2>

                <!-- main menu of table of content -->
                <ul class="main-menu">
                    <li class="menu-sub-heading">Introduction</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li><a href="#what-is-html">What is HTML?</a></li>
                        <li><a href="#html-basics">HTML Basics</a></li>
                        <li>
                            <a href="#web-design-basics">Web Design Basics</a>
                        </li>
                    </ul>

                    <li class="menu-sub-heading">HTML Basics</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li>
                            <a href="#html-paragraphs">HTML Paragraphs</a>
                        </li>
                        <li><a href="#html-headings">HTML Headings</a></li>
                    </ul>

                    <li class="menu-sub-heading">HTML Inline</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li>
                            <a href="#block-and-inline">Block and Inline</a>
                        </li>
                        <li><a href="#html-links">HTML Links</a></li>
                    </ul>
                </ul>
            </aside>

            <!-- main content of documentation page will be here -->
        </main>

        <!-- footer will be here -->
    </body>
</html>
.table-of-content {
    /* remaining width for the main content of page */
    width: 30%;
    height: 450px;
    border: 1px solid rgba(0, 0, 0, 0.137);
    color: #25265e;
    padding: 8px;

    /* makes the sidebar sticky */
    position: sticky;
    top: 0px;
}

.menu-heading {
    margin-bottom: 20px;
    font-size: 18px;
}

.table-of-content ul {
    /* removes the bullet points in list items */
    list-style-type: none;

    /* list item marker is placed within the content area of the list item */
    list-style-position: inside;

    padding-left: 20px;
    margin-bottom: 12px;
}

/* styles for sub-heading inside our menu */
.menu-sub-heading {
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 12px;
    color: #25265e;
}

/* provides the bottom spacing for each list item in menu */
.sub-menu li {
    margin-bottom: 16px;
}

/* color the menu item */
.table-of-content a {
    color: #0556f3;
    text-decoration: none;
}

/* change color of menu items while hovering */
.table-of-content a:hover {
    color: #03338f;
}

Browser Output

Programiz Logo

HTML Tutorial

In the above step,

  • Setting width: 30% allows the sidebar to occupy 30% width of the viewport or device.
  • Using position: sticky makes the sidebar sticky at the top (0px) of the page, making it easier to navigate the entire content.
  • Pseudo-class selector a:hover styles links based on being hovered.

Step 3: Add a Main Section

In this step, we will add all the content to our technical documentation page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HTML Tutorial</title>
    </head>

    <body>
        <!--     header is here -->

        <main class="main">
            <!-- a sidebar consisting of menu of documentation page -->

            <!-- main content of the documentation page -->
            <section class="main-content">
                <h2 id="what-is-html">What is HTML?</h2>
                <p>
                    HTML (HyperText Markup Language) is used to structure and
                    format the content of websites on the World Wide Web. Web
                    Developers use it to create a skeleton of modern websites
                    and web apps.
                </p>

                <p>
                    In simple words, HTML is the primary building block to
                    create and structure website content.
                </p>
                <h3>HyperText</h3>
                <p>
                    HyperText is a way of organizing text that allows the reader
                    to easily navigate and access related information. It takes
                    the reader to a different part of the same web page, or to a
                    different web page altogether.
                </p>
                <h3>Markup Language</h3>
                <p>
                    A markup language is a computer language that is used to add
                    structure and formatting to a text document. Markup
                    languages use a system of tags to define the structure and
                    content of a document. These tags are interpreted by a
                    program or application to display the document in a specific
                    way.
                </p>
                <hr class="section-break" />
                <h2>Example of HTML</h2>
                <p>Let's see a simple example of HTML.</p>
                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;programiz&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;HTML Tutorial&lt;/h1&gt;
                            &lt;p&gt;You'll learn about HTML.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;                  
                </code>
           </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-example-on-browser.png"
                    alt="Browser Output"
                />

                <hr class="section-break" />

                <h2 id="html-basics">HTML Basics</h2>
                <p>
                    HTML (HyperText Markup Language) is a markup language used
                    to structure and organize the content on a web page. It uses
                    various tags to define the different elements on a page,
                    such as headings, paragraphs, and links.
                </p>
                <h3>HTML Hierarchy</h3>
                <p>
                    HTML elements are hierarchical, which means that they can be
                    nested inside each other to create a tree-like structure of
                    the content on the web page.
                </p>
                <p>
                    This hierarchical structure is called the DOM (Document
                    Object Model), and it is used by the web browser to render
                    the web page. For example,
                </p>
                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;My web page&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Hello, world!&lt;/h1&gt;
                            &lt;p&gt;This is my first web page.  &lt;/p&gt;
                            &lt;p&gt;
                              It contains a &lt;strong&gt;main heading  &lt;/strong&gt; and
                                &lt;em&gt; paragraph &lt;/em&gt;.
                            &lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                </code>
            </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-basics-hierarchy.png"
                    alt="HTML Example"
                />
                <p>
                    In this example, the html element is the root element of the
                    hierarchy and contains two child elements: head and body.
                    The head element, in turn, contains a child element called
                    the title, and the body element contains child elements: h1
                    and p.
                </p>

                <hr class="section-break" />
                <h2 id="web-design-basics">Web Design Basics</h2>
                <p>
                    Web design refers to the process of creating and styling the
                    appearance of a website. There are 3 fundamental
                    technologies to build the modern website and web
                    applications. They are:
                </p>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                </ul>
                <p>
                    These technologies work together to provide the structure,
                    style, and interactivity of a web page.
                </p>

                <h3>HTML</h3>
                <p>
                    HTML (HyperText Markup Language) is a markup language used
                    to structure and organize the content on a web page. It uses
                    various tags to define the different elements on a page,
                    such as headings, paragraphs, and links. Let's see an
                    example:
                </p>

                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;Page Title&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Programiz&lt;/h1&gt;
                            &lt;p&gt;We create easy to understand programming tutorials.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/web-design-basics-html-example.png"
                    alt="HTML example"
                />
                <p>Here, we have an HTML document where:</p>
                <ul>
                    <li>
                        <span>&lt;h1&gt;</span>&mdash; heading of the document
                    </li>
                    <li>
                        <span>&lt;p&gt;</span>&mdash;paragraph of the document
                    </li>
                </ul>
                <p>
                    The heading and paragraph tag in the above code help create
                    a webpage structure.
                </p>

                <h3>CSS</h3>
                <p>
                    CSS (Cascading Style Sheets) is a stylesheet language. It is
                    used to style HTML documents.
                </p>
                <p>
                    It specifies how the elements of HTML look including their
                    layout, colors, and fonts. We use &lt;style&gt; tag to add
                    CSS to HTML documents. Let's add some CSS to our previous
                    HTML code.
                </p>

                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;Page Title&lt;/title&gt;
                            &lt;style&gt;
                                h1 {
                                    color: blue;
                                }
                                p {
                                    color: red;
                                }
                            &lt;/style&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Programiz&lt;/h1&gt;
                            &lt;p&gt;We create easy to understand programming tutorial.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                     
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/web-design-basics-css-example.png"
                    alt="HTML example"
                />

                <p>
                    In the above code, we've applied CSS to &lt;h1&gt; and
                    &lt;p&gt; tags to change their text color. Notice the code,
                </p>
                <pre class="code-block">
                <code>
                    h1 {
                        color: blue;
                    }
                </code>
            </pre>

                <p>
                    This CSS code turns the text color of every &lt;h1&gt;
                    element into blue.
                </p>
                <hr class="section-break" />
                <h2 id="html-paragraphs">HTML Paragraphs</h2>
                <p>The HTML tag is used to create paragraphs. For example,</p>
                <pre class="code-block">
                <code>&lt;p&gt;HTML is fun to learn.&lt;/p&gt;</code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-paragraph.png"
                    alt="HTML Example"
                />

                <p>
                    As we can see, a paragraph starts with the &lt;p&gt; and
                    ends with the &lt;/p&gt; tag.
                </p>
                <hr class="section-break" />
                <h2 id="html-headings">HTML Headings</h2>
                <p>
                    The HTML heading tags (&lt;h1&gt; to &lt;h6&gt;) are used to
                    add headings to a webpage. For example,
                </p>

                <pre class="code-block">
                <code>
                    &lt;h1&gt;This is heading 1.&lt;/h1&gt;
                    &lt;h2&gt;This is heading 2.&lt;/h2&gt;
                    &lt;h3&gt;This is heading 3.&lt;/h3&gt;
                    &lt;h4&gt;This is heading 4.&lt;/h4&gt;
                    &lt;h5&gt;This is heading 5.&lt;/h5&gt;
                    &lt;h6&gt;This is heading 6.&lt;/h6&gt;
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/headings-in-html.png"
                    alt="HTML Example"
                />

                <p>
                    In the example, we have used tags h1 to h6 to create
                    headings of varying sizes and importance.
                </p>
                <p>
                    The h1 tag denotes the most important heading on a webpage.
                    Similarly, h6 denotes the least important heading.
                </p>
                <p>
                    The difference in sizes of heading tags comes from the
                    browser's default styling. And, you can always change the
                    styling of heading tags, including font size, using CSS.
                </p>
                <hr class="section-break" />
                <h2 id="block-and-inline">HTML Inline and Block Elements</h2>
                <p>
                    HTML elements can be broadly categorized into one of two
                    categories:
                </p>
                <ul>
                    <li>
                        Inline Elements: &lt;span&gt;, &lt;a&gt;,
                        &lt;strong&gt;, &lt;img&gt; etc.
                    </li>
                    <li>
                        Block Elements: &lt;p&gt;, &lt;div&gt;, &lt;h1&gt;,
                        &lt;figure&gt; etc.
                    </li>
                </ul>

                <h3>HTML Inline Elements</h3>
                <p>
                    Inline elements are displayed on the same line. They do not
                    start on a new line and take up only as much width as their
                    contents require. An example of an inline element is the
                    &lt;span&gt; tag.
                </p>
                <pre class="code-block">
                <code>
                   &lt;p&gt;This is how &lt;span style="border: 1px solid black"&gt;span&lt;/span&gt; works. &lt;/p&gt;
            </code>
        </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-inline-example.png"
                    alt="HTML Example"
                />
                <hr class="section-break" />
                <h2 id="html-links">HTML Links</h2>

                <p>
                    HTML links or hyperlinks connect one resource on the web to
                    another. The resource may be an image, a web page, a
                    program, a video clip, an audio clip, an element within a
                    web page, etc, or anything that can be hosted on the
                    internet.
                </p>
                <p>
                    We use the HTML &lt;a&gt; tag to create hyperlinks. The
                    syntax for the &lt;a&gt; tag is
                </p>

                <pre class="code-block">
            <code>
                &lt;a href="URL"&gt; Text  &lt;/a&gt;
            </code>
        </pre>

                <p>Here,</p>
                <ul>
                    <li>URL - the destination of the link</li>
                    <li>Text - the part that will be visible as a link</li>
                </ul>

                <p>
                    Clicking on the text will navigate you to the resource in
                    the URL. For example,
                </p>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-link-example.png"
                    alt="HTML example"
                />
                <p>
                    Here, clicking on the Swift Continue Statement will take you
                    to
                </p>
                <p>
                    <a
                        href="https://www.programiz.com/swift-programming/continue-statement"
                        >https://www.programiz.com/swift-programming/continue-statement.</a
                    >
                </p>
            </section>
            <!-- main content of documentation page will be here -->
        </main>

        <!-- footer will be here -->
    </body>
</html>
.main {
    /* default width is always 100% */
    width: 100%;

    /* aligns the sidebar and main content horizontally next to each other */
    display: flex;
    flex-direction: row;

    /* adds 20px space between sidebar and main content */
    gap: 20px;

    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
    position: relative;
}

/* styes for the main content */
.main-content {
    /* sets 70% width of the document, 25% is occupied by sidebar earlier,
      and remaining for spacing between them */

    width: 70%;
    padding: 10px;
    margin-left: auto;
}

h2,
h3 {
    color: #25265e;
    margin-bottom: 12px;
}

p {
    margin-bottom: 24px;
    line-height: 24px;
}

/* styles the under ordered list in main element */
.main ul {
    list-style-position: inside;
    padding-left: 20px;
    margin-bottom: 12px;
}

/* adds a margin to top and bottom for hr element for spacing */
.section-break {
    margin: 24px 0px;
}

/* styles the code block */
pre.code-block {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    background-color: aliceblue;
    margin-bottom: 24px;
    white-space: pre-line;
}

/* images are allowed to shrink for smaller screen sizes */
.main-content img {
    max-width: 100%;
}

Browser Output

Programiz Logo

HTML Tutorial

What is HTML?

HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.

In simple words, HTML is the primary building block to create and structure website content.

HyperText

HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.

Markup Language

A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.


Example of HTML

Let's see a simple example of HTML.

                
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <title>programiz</title>
                        </head>
                        <body>
                            <h1>HTML Tutorial</h1>
                            <p>You'll learn about HTML.</p>
                        </body>
                    </html>                  
                
           

Browser Output

Browser Output

HTML Basics

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,

                
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <title>My web page</title>
                        </head>
                        <body>
                            <h1>Hello, world!</h1>
                            <p>This is my first web page.  </p>
                            <p>
                              It contains a <strong>main heading  </strong> and
                                <em> paragraph </em>.
                            </p>
                        </body>
                    </html>
                
            

Browser Output

HTML Example

In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.


Web Design Basics

Web design refers to the process of creating and styling the appearance of a website. There are 3 fundamental technologies to build the modern website and web applications. They are:

  • HTML
  • CSS
  • JS

These technologies work together to provide the structure, style, and interactivity of a web page.

HTML

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links. Let's see an example:

                
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <title>Page Title</title>
                        </head>
                        <body>
                            <h1>Programiz</h1>
                            <p>We create easy to understand programming tutorials.</p>
                        </body>
                    </html>
                
            

Browser Output

HTML example

Here, we have an HTML document where:

  • <h1>— heading of the document
  • <p>—paragraph of the document

The heading and paragraph tag in the above code help create a webpage structure.

CSS

CSS (Cascading Style Sheets) is a stylesheet language. It is used to style HTML documents.

It specifies how the elements of HTML look including their layout, colors, and fonts. We use <style> tag to add CSS to HTML documents. Let's add some CSS to our previous HTML code.

                
                    <!DOCTYPE html>
                    <html>
                        <head>
                            <title>Page Title</title>
                            <style>
                                h1 {
                                    color: blue;
                                }
                                p {
                                    color: red;
                                }
                            </style>
                        </head>
                        <body>
                            <h1>Programiz</h1>
                            <p>We create easy to understand programming tutorial.</p>
                        </body>
                    </html>
                     
                
            

Browser Output

HTML example

In the above code, we've applied CSS to <h1> and <p> tags to change their text color. Notice the code,

                
                    h1 {
                        color: blue;
                    }
                
            

This CSS code turns the text color of every <h1> element into blue.


HTML Paragraphs

The HTML tag is used to create paragraphs. For example,

                <p>HTML is fun to learn.</p>
            

Browser Output

HTML Example

As we can see, a paragraph starts with the <p> and ends with the </p> tag.


HTML Headings

The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

                
                    <h1>This is heading 1.</h1>
                    <h2>This is heading 2.</h2>
                    <h3>This is heading 3.</h3>
                    <h4>This is heading 4.</h4>
                    <h5>This is heading 5.</h5>
                    <h6>This is heading 6.</h6>
                
            

Browser Output

HTML Example

In the example, we have used tags h1 to h6 to create headings of varying sizes and importance.

The h1 tag denotes the most important heading on a webpage. Similarly, h6 denotes the least important heading.

The difference in sizes of heading tags comes from the browser's default styling. And, you can always change the styling of heading tags, including font size, using CSS.


HTML Inline and Block Elements

HTML elements can be broadly categorized into one of two categories:

  • Inline Elements: <span>, <a>, <strong>, <img> etc.
  • Block Elements: <p>, <div>, <h1>, <figure> etc.

HTML Inline Elements

Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span> tag.

                
                   <p>This is how <span style="border: 1px solid black">span</span> works. </p>
            
        

Browser Output

HTML Example

HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

            
                <a href="URL"> Text  </a>
            
        

Here,

  • URL - the destination of the link
  • Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

Browser Output

HTML example

Here, clicking on the Swift Continue Statement will take you to

https://www.programiz.com/swift-programming/continue-statement.

In the above step,

  • Setting display: flex for the <main> element allows its immediate child elements (sidebar and main-content section) to be aligned horizontally next to each other.
  • Setting width: 70% on the .main-content element allows the document information to occupy 70% of the available width, while the sidebar, which was previously assigned 30%, takes up the remaining space.
  • Setting the white-space property to pre-line for the pre tag eliminates the line spacing within a single line.
  • Setting max-width: 100% on images means images will never be wider than its parent container.

In this step, we will add a footer to our page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HTML Tutorial</title>
    </head>
    <body>
        <!-- header goes in here -->

        <!-- main element wrapping the sidebar menu and content -->

        <!-- Adding a footer  -->
        <footer>
            <p>HTML Documentation Page &copy; Programiz, 2023</p>
        </footer>
    </body>
</html>
/* reset browsers style */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* style for footer */
footer {
    height: 50px;
    font-size: 14px;
    text-align: center;
    color: #25265e;
    background-color: aliceblue;
    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
}

/* provide line-height same as height of footer to vertically center */
footer p {
    line-height: 50px;
}

Browser Output

Programiz Logo

HTML Tutorial

HTML Documentation Page © Programiz, 2023

Here,

  • Setting the footer's height to 50px and applying the same line-height to its child paragraph element allows the content to be vertically centered.
  • Setting the text-align property to center aligns the content horizontally in the middle.

Step 5: Optimize Page for Mobile Devices

Finally, let's add media queries to make our HTML Documentation Page responsive for mobile devices.

@media screen and (max-width: 672px) {

/* the sidebar and content are stacked on top of each other */
    .main {
        flex-direction: column;
    }

/* takes the full width of the document */
    .table-of-content {
        width: 100%;
        position: relative;
    }

/* takes the full width of document */
    .main-content {
        width: 100%;
    }
}

Browser Output

Programiz Logo

HTML Tutorial

What is HTML?

HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.

In simple words, HTML is the primary building block to create and structure website content.

HyperText

HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.

Markup Language

A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.


Example of HTML

Let's see a simple example of HTML.

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>programiz</title>
            </head>
            <body>
                <h1>HTML Tutorial</h1>
                <p>You'll learn about HTML.</p>
            </body>
        </html>                  
    

Browser Output

Browser Output

HTML Basics

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>My web page</title>
            </head>
            <body>
                <h1>Hello, world!</h1>
                <p>This is my first web page.  </p>
                <p>
                  It contains a <strong>main heading  </strong> and
                    <em> paragraph </em>.
                </p>
            </body>
        </html>
    

Browser Output

HTML Example

In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.


Web Design Basics

Web design refers to the process of creating and styling the appearance of a website. There are 3 fundamental technologies to build the modern website and web applications. They are:

  • HTML
  • CSS
  • JS

These technologies work together to provide the structure, style, and interactivity of a web page.

HTML

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links. Let's see an example:

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>Page Title</title>
            </head>
            <body>
                <h1>Programiz</h1>
                <p>We create easy to understand programming tutorials.</p>
            </body>
        </html>
    

Browser Output

HTML example

Here, we have an HTML document where:

  • <h1>— heading of the document
  • <p>—paragraph of the document

The heading and paragraph tag in the above code help create a webpage structure.

CSS

CSS (Cascading Style Sheets) is a stylesheet language. It is used to style HTML documents.

It specifies how the elements of HTML look including their layout, colors, and fonts. We use <style> tag to add CSS to HTML documents. Let's add some CSS to our previous HTML code.

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>Page Title</title>
                <style>
                    h1 {
                        color: blue;
                    }
                    p {
                        color: red;
                    }
                </style>
            </head>
            <body>
                <h1>Programiz</h1>
                <p>We create easy to understand programming tutorial.</p>
            </body>
        </html>
         
    

Browser Output

HTML example

In the above code, we've applied CSS to <h1> and <p> tags to change their text color. Notice the code,

    
        h1 {
            color: blue;
        }
    

This CSS code turns the text color of every <h1> element into blue.


HTML Paragraphs

The HTML tag is used to create paragraphs. For example,

    <p>HTML is fun to learn.</p>

Browser Output

HTML Example

As we can see, a paragraph starts with the <p> and ends with the </p> tag.


HTML Headings

The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

    
        <h1>This is heading 1.</h1>
        <h2>This is heading 2.</h2>
        <h3>This is heading 3.</h3>
        <h4>This is heading 4.</h4>
        <h5>This is heading 5.</h5>
        <h6>This is heading 6.</h6>
    

Browser Output

HTML Example

In the example, we have used tags h1 to h6 to create headings of varying sizes and importance.

The h1 tag denotes the most important heading on a webpage. Similarly, h6 denotes the least important heading.

The difference in sizes of heading tags comes from the browser's default styling. And, you can always change the styling of heading tags, including font size, using CSS.


HTML Inline and Block Elements

HTML elements can be broadly categorized into one of two categories:

  • Inline Elements: <span>, <a>, <strong>, <img> etc.
  • Block Elements: <p>, <div>, <h1>, <figure> etc.

HTML Inline Elements

Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span> tag.

    
       <p>This is how <span style="border: 1px solid black">span</span> works. </p>

Browser Output

HTML Example

HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is


    <a href="URL"> Text  </a>

Here,

  • URL - the destination of the link
  • Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

Browser Output

HTML example

Here, clicking on the Swift Continue Statement will take you to

https://www.programiz.com/swift-programming/continue-statement.

HTML Documentation Page © Programiz, 2023

Here,

  • max-width: 672px switches the layout from desktop to mobile when the viewport reaches a maximum width of 672px.
  • flex-direction: column vertically stacks the sidebar and main content on top of each other.
  • Setting width to 100% for both the sidebar and main content allows them to take up the full width of the document.
  • Finally, position: relative allows the table of content to move with scroll, ensuring a good user experience for smaller mobile devices.

Note: For the desktop layout, the table of content (sidebar) and main content (.main-content) were positioned beside each other, while for the mobile layout, they are stacked vertically.


Complete Code of Documentation Page

Here is the final code of our HTML Documentation Page built in this tutorial.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HTML Tutorial</title>
    </head>

    <body>
        <!-- header element consisting of a logo and a heading -->
        <header>
            <div class="logo-wrapper">
                <img
                    src="https://cdn.programiz.com/sites/tutorial2program/files/pc_logo.svg"
                    alt="Programiz Logo"
                />
            </div>
            <h1>HTML Tutorial</h1>
        </header>
        <main class="main">
            <!-- a sidebar consisting of menu of documentation page -->
            <aside class="table-of-content">
                <h2 class="menu-heading">Table of Contents</h2>

                <!-- main menu of table of content -->
                <ul class="main-menu">
                    <li class="menu-sub-heading">Introduction</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li><a href="#what-is-html">What is HTML?</a></li>
                        <li><a href="#html-basics">HTML Basics</a></li>
                        <li>
                            <a href="#web-design-basics">Web Design Basics</a>
                        </li>
                    </ul>

                    <li class="menu-sub-heading">HTML Basics</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li>
                            <a href="#html-paragraphs">HTML Paragraphs</a>
                        </li>
                        <li><a href="#html-headings">HTML Headings</a></li>
                    </ul>

                    <li class="menu-sub-heading">HTML Inline</li>
                    <!-- submenu  -->
                    <ul class="sub-menu">
                        <li>
                            <a href="#block-and-inline">Block and Inline</a>
                        </li>
                        <li><a href="#html-links">HTML Links</a></li>
                    </ul>
                </ul>
            </aside>

            <!-- main content of documentation page will be here -->

            <section class="main-content">
                <h2 id="what-is-html">What is HTML?</h2>
                <p>
                    HTML (HyperText Markup Language) is used to structure and
                    format the content of websites on the World Wide Web. Web
                    Developers use it to create a skeleton of modern websites
                    and web apps.
                </p>

                <p>
                    In simple words, HTML is the primary building block to
                    create and structure website content.
                </p>
                <h3>HyperText</h3>
                <p>
                    HyperText is a way of organizing text that allows the reader
                    to easily navigate and access related information. It takes
                    the reader to a different part of the same web page, or to a
                    different web page altogether.
                </p>
                <h3>Markup Language</h3>
                <p>
                    A markup language is a computer language that is used to add
                    structure and formatting to a text document. Markup
                    languages use a system of tags to define the structure and
                    content of a document. These tags are interpreted by a
                    program or application to display the document in a specific
                    way.
                </p>
                <hr class="section-break" />
                <h2>Example of HTML</h2>
                <p>Let's see a simple example of HTML.</p>
                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;programiz&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;HTML Tutorial&lt;/h1&gt;
                            &lt;p&gt;You'll learn about HTML.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;                  
                </code>
           </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-example-on-browser.png"
                    alt="Browser Output"
                />

                <hr class="section-break" />

                <h2 id="html-basics">HTML Basics</h2>
                <p>
                    HTML (HyperText Markup Language) is a markup language used
                    to structure and organize the content on a web page. It uses
                    various tags to define the different elements on a page,
                    such as headings, paragraphs, and links.
                </p>
                <h3>HTML Hierarchy</h3>
                <p>
                    HTML elements are hierarchical, which means that they can be
                    nested inside each other to create a tree-like structure of
                    the content on the web page.
                </p>
                <p>
                    This hierarchical structure is called the DOM (Document
                    Object Model), and it is used by the web browser to render
                    the web page. For example,
                </p>
                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;My web page&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Hello, world!&lt;/h1&gt;
                            &lt;p&gt;This is my first web page.  &lt;/p&gt;
                            &lt;p&gt;
                              It contains a &lt;strong&gt;main heading  &lt;/strong&gt; and
                                &lt;em&gt; paragraph &lt;/em&gt;.
                            &lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                </code>
            </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-basics-hierarchy.png"
                    alt="HTML Example"
                />
                <p>
                    In this example, the html element is the root element of the
                    hierarchy and contains two child elements: head and body.
                    The head element, in turn, contains a child element called
                    the title, and the body element contains child elements: h1
                    and p.
                </p>

                <hr class="section-break" />
                <h2 id="web-design-basics">Web Design Basics</h2>
                <p>
                    Web design refers to the process of creating and styling the
                    appearance of a website. There are 3 fundamental
                    technologies to build the modern website and web
                    applications. They are:
                </p>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                </ul>
                <p>
                    These technologies work together to provide the structure,
                    style, and interactivity of a web page.
                </p>

                <h3>HTML</h3>
                <p>
                    HTML (HyperText Markup Language) is a markup language used
                    to structure and organize the content on a web page. It uses
                    various tags to define the different elements on a page,
                    such as headings, paragraphs, and links. Let's see an
                    example:
                </p>

                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;Page Title&lt;/title&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Programiz&lt;/h1&gt;
                            &lt;p&gt;We create easy to understand programming tutorials.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/web-design-basics-html-example.png"
                    alt="HTML example"
                />
                <p>Here, we have an HTML document where:</p>
                <ul>
                    <li>
                        <span>&lt;h1&gt;</span>&mdash; heading of the document
                    </li>
                    <li>
                        <span>&lt;p&gt;</span>&mdash;paragraph of the document
                    </li>
                </ul>
                <p>
                    The heading and paragraph tag in the above code help create
                    a webpage structure.
                </p>

                <h3>CSS</h3>
                <p>
                    CSS (Cascading Style Sheets) is a stylesheet language. It is
                    used to style HTML documents.
                </p>
                <p>
                    It specifies how the elements of HTML look including their
                    layout, colors, and fonts. We use &lt;style&gt; tag to add
                    CSS to HTML documents. Let's add some CSS to our previous
                    HTML code.
                </p>

                <pre class="code-block">
                <code>
                    &lt;!DOCTYPE html&gt;
                    &lt;html&gt;
                        &lt;head&gt;
                            &lt;title&gt;Page Title&lt;/title&gt;
                            &lt;style&gt;
                                h1 {
                                    color: blue;
                                }
                                p {
                                    color: red;
                                }
                            &lt;/style&gt;
                        &lt;/head&gt;
                        &lt;body&gt;
                            &lt;h1&gt;Programiz&lt;/h1&gt;
                            &lt;p&gt;We create easy to understand programming tutorial.&lt;/p&gt;
                        &lt;/body&gt;
                    &lt;/html&gt;
                     
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/web-design-basics-css-example.png"
                    alt="HTML example"
                />

                <p>
                    In the above code, we've applied CSS to &lt;h1&gt; and
                    &lt;p&gt; tags to change their text color. Notice the code,
                </p>
                <pre class="code-block">
                <code>
                    h1 {
                        color: blue;
                    }
                </code>
            </pre>

                <p>
                    This CSS code turns the text color of every &lt;h1&gt;
                    element into blue.
                </p>
                <hr class="section-break" />
                <h2 id="html-paragraphs">HTML Paragraphs</h2>
                <p>The HTML tag is used to create paragraphs. For example,</p>
                <pre class="code-block">
                <code>&lt;p&gt;HTML is fun to learn.&lt;/p&gt;</code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-paragraph.png"
                    alt="HTML Example"
                />

                <p>
                    As we can see, a paragraph starts with the &lt;p&gt; and
                    ends with the &lt;/p&gt; tag.
                </p>
                <hr class="section-break" />
                <h2 id="html-headings">HTML Headings</h2>
                <p>
                    The HTML heading tags (&lt;h1&gt; to &lt;h6&gt;) are used to
                    add headings to a webpage. For example,
                </p>

                <pre class="code-block">
                <code>
                    &lt;h1&gt;This is heading 1.&lt;/h1&gt;
                    &lt;h2&gt;This is heading 2.&lt;/h2&gt;
                    &lt;h3&gt;This is heading 3.&lt;/h3&gt;
                    &lt;h4&gt;This is heading 4.&lt;/h4&gt;
                    &lt;h5&gt;This is heading 5.&lt;/h5&gt;
                    &lt;h6&gt;This is heading 6.&lt;/h6&gt;
                </code>
            </pre>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/headings-in-html.png"
                    alt="HTML Example"
                />

                <p>
                    In the example, we have used tags h1 to h6 to create
                    headings of varying sizes and importance.
                </p>
                <p>
                    The h1 tag denotes the most important heading on a webpage.
                    Similarly, h6 denotes the least important heading.
                </p>
                <p>
                    The difference in sizes of heading tags comes from the
                    browser's default styling. And, you can always change the
                    styling of heading tags, including font size, using CSS.
                </p>
                <hr class="section-break" />
                <h2 id="block-and-inline">HTML Inline and Block Elements</h2>
                <p>
                    HTML elements can be broadly categorized into one of two
                    categories:
                </p>
                <ul>
                    <li>
                        Inline Elements: &lt;span&gt;, &lt;a&gt;,
                        &lt;strong&gt;, &lt;img&gt; etc.
                    </li>
                    <li>
                        Block Elements: &lt;p&gt;, &lt;div&gt;, &lt;h1&gt;,
                        &lt;figure&gt; etc.
                    </li>
                </ul>

                <h3>HTML Inline Elements</h3>
                <p>
                    Inline elements are displayed on the same line. They do not
                    start on a new line and take up only as much width as their
                    contents require. An example of an inline element is the
                    &lt;span&gt; tag.
                </p>
                <pre class="code-block">
                <code>
                   &lt;p&gt;This is how &lt;span style="border: 1px solid black"&gt;span&lt;/span&gt; works. &lt;/p&gt;
            </code>
        </pre>
                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-inline-example.png"
                    alt="HTML Example"
                />
                <hr class="section-break" />
                <h2 id="html-links">HTML Links</h2>

                <p>
                    HTML links or hyperlinks connect one resource on the web to
                    another. The resource may be an image, a web page, a
                    program, a video clip, an audio clip, an element within a
                    web page, etc, or anything that can be hosted on the
                    internet.
                </p>
                <p>
                    We use the HTML &lt;a&gt; tag to create hyperlinks. The
                    syntax for the &lt;a&gt; tag is
                </p>

                <pre class="code-block">
            <code>
                &lt;a href="URL"&gt; Text  &lt;/a&gt;
            </code>
        </pre>

                <p>Here,</p>
                <ul>
                    <li>URL - the destination of the link</li>
                    <li>Text - the part that will be visible as a link</li>
                </ul>

                <p>
                    Clicking on the text will navigate you to the resource in
                    the URL. For example,
                </p>

                <h3>Browser Output</h3>
                <img
                    src="https://www.programiz.com/sites/tutorial2program/files/html-link-example.png"
                    alt="HTML example"
                />
                <p>
                    Here, clicking on the Swift Continue Statement will take you
                    to
                </p>
                <p>
                    <a
                        href="https://www.programiz.com/swift-programming/continue-statement"
                        >https://www.programiz.com/swift-programming/continue-statement.</a
                    >
                </p>
            </section>
        </main>
        <footer>
            <p>HTML Documentation Page &copy; Programiz, 2023</p>
        </footer>
    </body>
</html>
/* resets the browser default spacing */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* styles the header element */
header {
    height: 80px;
    text-align: center;
    position: relative;
    background-color: aliceblue;

    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
}

/* styles for logo wrapper*/
header .logo-wrapper {
    width: 100px;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* styles to fit logo image within the logo wrapper */
.logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* style for the main heading of page */
header h1 {
    line-height: 80px;
    color: #25265e;
}

.table-of-content {
    /* remaining width for the main content of page */
    width: 30%;
    border: 1px solid rgba(0, 0, 0, 0.137);
    color: #25265e;
    padding: 8px;
    height: 450px;
    /* makes the sidebar sticky */
    position: sticky;
    top: 0;
}

.menu-heading {
    margin-bottom: 20px;
}

.table-of-content ul {
    /* removes the bullet points in list items */
    list-style-type: none;

    /* list item marker is placed within the content area of the list item */
    list-style-position: inside;

    padding-left: 20px;
    margin-bottom: 12px;
}

/* styles for sub-heading inside our menu */
.menu-sub-heading {
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 12px;
    color: #25265e;
}

/* provides the bottom spacing for each list item in menu */
.sub-menu li {
    margin-bottom: 16px;
}

/* color the menu item */
.table-of-content a {
    color: #25265e;
}

/* change color of menu items while on hovering */
.table-of-content a:hover {
    color: blue;
}

/* changes color while menu items are clicked */
.table-of-content a:active {
    color: red;
}

.main {
    /* default width is always 100% */
    width: 100%;

    /* aligns the sidebar and main content horizontally next to each other */
    display: flex;
    flex-direction: row;
    gap: 20px;
    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
}

/* styes for the main content */
.main-content {
    /* sets 70% width of the document, 25% is occupied by sidebar earlier,
    and remaining for spacing between them */

    width: 70%;
    padding: 10px;
}

h2,
h3 {
    color: #25265e;
    margin-bottom: 12px;
}

p {
    margin-bottom: 24px;
    line-height: 24px;
}

/* styles the under ordered list in main element */
.main ul {
    list-style-position: inside;
    padding-left: 20px;
    margin-bottom: 12px;
}

/* adds margin to top and botton for hr element for spacing */
.section-break {
    margin: 24px 0px;
}

/* styles the code block */
pre.code-block {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    background-color: aliceblue;
    margin-bottom: 24px;
    white-space: pre-line;
}

/* images are allowed to shrink for smaller screen sizes */
.main-content img {
    max-width: 100%;
}

/* style for footer */
footer {
    height: 50px;
    font-size: 14px;
    text-align: center;
    color: #25265e;
    background-color: aliceblue;
    border: 1px solid rgba(0, 0, 0, 0.26);
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.116);
}

/* provide line-height same as height of footer to vertically center */
footer p {
    line-height: 50px;
}

/* adding media query for responsiveness  */

@media screen and (max-width: 672px) {
    /* the sidebar and content are stacked on top of each other */
    .main {
        flex-direction: column;
    }

    /* takes the full width of the document */
    .table-of-content {
        width: 100%;
        position: relative;
    }

    /* takes the full width of document */
    .main-content {
        width: 100%;
    }
}

Browser Output

Programiz Logo

HTML Tutorial

What is HTML?

HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.

In simple words, HTML is the primary building block to create and structure website content.

HyperText

HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.

Markup Language

A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.


Example of HTML

Let's see a simple example of HTML.

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>programiz</title>
            </head>
            <body>
                <h1>HTML Tutorial</h1>
                <p>You'll learn about HTML.</p>
            </body>
        </html>                  
    

Browser Output

Browser Output

HTML Basics

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>My web page</title>
            </head>
            <body>
                <h1>Hello, world!</h1>
                <p>This is my first web page.  </p>
                <p>
                  It contains a <strong>main heading  </strong> and
                    <em> paragraph </em>.
                </p>
            </body>
        </html>
    

Browser Output

HTML Example

In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.


Web Design Basics

Web design refers to the process of creating and styling the appearance of a website. There are 3 fundamental technologies to build the modern website and web applications. They are:

  • HTML
  • CSS
  • JS

These technologies work together to provide the structure, style, and interactivity of a web page.

HTML

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links. Let's see an example:

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>Page Title</title>
            </head>
            <body>
                <h1>Programiz</h1>
                <p>We create easy to understand programming tutorials.</p>
            </body>
        </html>
    

Browser Output

HTML example

Here, we have an HTML document where:

  • <h1>— heading of the document
  • <p>—paragraph of the document

The heading and paragraph tag in the above code help create a webpage structure.

CSS

CSS (Cascading Style Sheets) is a stylesheet language. It is used to style HTML documents.

It specifies how the elements of HTML look including their layout, colors, and fonts. We use <style> tag to add CSS to HTML documents. Let's add some CSS to our previous HTML code.

    
        <!DOCTYPE html>
        <html>
            <head>
                <title>Page Title</title>
                <style>
                    h1 {
                        color: blue;
                    }
                    p {
                        color: red;
                    }
                </style>
            </head>
            <body>
                <h1>Programiz</h1>
                <p>We create easy to understand programming tutorial.</p>
            </body>
        </html>
         
    

Browser Output

HTML example

In the above code, we've applied CSS to <h1> and <p> tags to change their text color. Notice the code,

    
        h1 {
            color: blue;
        }
    

This CSS code turns the text color of every <h1> element into blue.


HTML Paragraphs

The HTML tag is used to create paragraphs. For example,

    <p>HTML is fun to learn.</p>

Browser Output

HTML Example

As we can see, a paragraph starts with the <p> and ends with the </p> tag.


HTML Headings

The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

    
        <h1>This is heading 1.</h1>
        <h2>This is heading 2.</h2>
        <h3>This is heading 3.</h3>
        <h4>This is heading 4.</h4>
        <h5>This is heading 5.</h5>
        <h6>This is heading 6.</h6>
    

Browser Output

HTML Example

In the example, we have used tags h1 to h6 to create headings of varying sizes and importance.

The h1 tag denotes the most important heading on a webpage. Similarly, h6 denotes the least important heading.

The difference in sizes of heading tags comes from the browser's default styling. And, you can always change the styling of heading tags, including font size, using CSS.


HTML Inline and Block Elements

HTML elements can be broadly categorized into one of two categories:

  • Inline Elements: <span>, <a>, <strong>, <img> etc.
  • Block Elements: <p>, <div>, <h1>, <figure> etc.

HTML Inline Elements

Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span> tag.

    
       <p>This is how <span style="border: 1px solid black">span</span> works. </p>

Browser Output

HTML Example

HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is


    <a href="URL"> Text  </a>

Here,

  • URL - the destination of the link
  • Text - the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

Browser Output

HTML example

Here, clicking on the Swift Continue Statement will take you to

https://www.programiz.com/swift-programming/continue-statement.

HTML Documentation Page © Programiz, 2023

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges