Basic HTML examples


Note: Do not worry if any of the following examples are unclear to you. All details will be discussed in the next lessons.


HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Here's what the HTML code looks like:


                <!DOCTYPE html>
                <html>
                <body>
                
                <h1>My First Heading</h1>
                <p>My first paragraph.</p>
                
                </body>
                </html>
            

And here's what the above code looks like in your web browser:

My First Heading

My first paragraph.


HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading. 

HTML code of the headings:



                  <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>
  
              

How the above code looks like in the web browser:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

HTML code of the paragraphs:



                  <p>This is a paragraph.</p>
                  <p>This is another paragraph.</p>
  
            

How the above code looks like in the web browser:

This is a paragraph.

This is another paragraph.


HTML Links

HTML links are defined with the <a> tag.

HTML code of the link:



                <a href="https://mdbootstrap.com/">This is a link to https://mdbootstrap.com</a>
  
            

How the above code looks like in the web browser:

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.


HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes.

HTML code of the images:



                  <img src="https://mdbootstrap.com/img/logo/mdb-transparent-big.png" alt="MDB" width="184" height="122">
  
              

How the above code looks like in the web browser:

MDB

HTML Buttons

HTML buttons are defined with the <button> tag.

HTML code of the button:



                <button>Click me</button>
  
            

How the above code looks like in the web browser:


HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items).

HTML code of the list:



                  <ul>
                      <li>Coffee</li>
                      <li>Tea</li>
                      <li>Milk</li>
                    </ul>
  
            

How the above code looks like in the web browser:

  • Coffee
  • Tea
  • Milk

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.