Html 5 Basic Example
Tags: html, webdev, codenewbie, tutorial
Published: 2021-05-21 16:38:31

---
title: Html 5 Basic Example
published: true
date: 2021-01-10 01:16:04 UTC
tags: [html, webdev, codenewbie, tutorial]
canonical_url: https://www.devwares.com/blog//html-basic-example
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ifpnq55griuklaa2uwy.png
series: Devwares Web development Free Course
---

In this chapter, we are going to look at some of the examples in html. We are going to go through all the tags that will be used one by one so that you can fellow.

![AD-BANNER](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41meil9ho9yx2ulb535m.png)

**HTML BASIC EXAMPLE**

**HTML DOCUMENT**

All Html document must always start with a document type declaration `<!DOCTYPE html>`. The HTML document itself must begin with `<html>` and end with the `</html>` closing tags. This is to indicate that it is an HTML document. The visible part of the HTML document is between `<body>` and `</body>`.

**HTML CODE:**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

```

The `<!DOCTYPE>` Declaration

  

The `<!DOCTYPE>` declaration stands for the document type, and helps browsers to display web pages correctly. Its features include that it must always appear once at the top of the page (before ant HTML tags). It is not case sensitive and is written as `<!DOCTYPE html>` in HTML5.

**HTML Headings**

The HTML heading is defined from `<h1>` till `<h6>`The `<h1>` is usually the biggest heading and is the most important heading. The `<h6>` is usually the smallest heading and is the least important heading.

**HTML CODE:**

```html
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

```

Heres what it looks like:

# This is a heading

## This is a heading

### This is a heading

#### This is a heading

##### This is a heading

###### This is a heading
  
  

**HTML Paragraphs**

HTML paragraphs are defined with `<p>` tag

**HTML CODE:**

```html
<p>This is a paragraph</p>
<p>This is another paragraph</p>

```

Heres what it looks like:

This is a paragraph

This is another paragraph

  
  

**HTML LINK**

The HTML link is usually defined with `<a>` tag:

**HTML CODE:**

```html
<a href="https://www.google.com">
  This is a link
</a>

```

Heres what it looks like:

[This is a link](https://www.google.com)  
  

The links destination is specified in the href attribute. Attribute will be looked at in a later lesson. It provides additional information about that HTML element.

**HTML Images**

HTML images is defined with the `<img>` tag. The attribute has the source file(src), alternative text (alt), width, and height.

**HTML CODE:**

```html
<img src="" alt="" width="164" height="144" />

```

How to view HTML source? If you have a web page. You will probably wonder how they do that. At the web page right-click and select “View Page Source” (in Chrome). This will open a window containing the HTML source code of the page. Inspect an HTML Element Right-click on the element (or a blank area), and choose “inspect” or “inspect Element” to see what elements are made up of (you will see both the HTML and CSS) don’t worry we are going to learn of CSS in another lesson. You will be able to edit the codes (HTML and CSS).

**HTML Tables**

The `<table>` tag defines an HTML table. Each table row is defined with `<tr>` tag. Each table header is defined with `<th>` tag. Each table data/cell is defined with a `<td>` tag. These tags have default which include having the text in `<th>` element in bold and centered. Equally, the text in `<td>` element is regular and left-aligned.

**HTML CODE:**

```html
<table style="width:100%">
<tr>
      <th>firstName</th>
        <th>LastName</th>
          <th>age</th>
</tr>
<tr>
       <td>tommay</td>
         <td>Okon</td>
           <td>24</td>
</tr>
<tr>
         <td>Jenny</td>
         <td>kwon</td>
           <td>22</td>
</tr>
</table>

```

Heres what it looks like:

| firstName | LastName | age |
| --- | --- | --- |
| tommay | Okon | 24 |
| Jenny | kwon | 22 |

  
  

**HTML List**

The html list is usually donated with the `<ul>` (unordered/bullet list) or the `<ol>` (ordered/numbered list) tag, followed by the `<li>` tags (list items)

**HTML CODE:**

```html
<ul>
  <li>mango</li>
  <li>orange</li>
  <li>apple</li>
</ul>

```

Heres what it looks like:

- mango
- orange
- apple
  
  

How it will appear

**HTML Button**

the html button is defined with the `<button>` tag

**HTML CODE:**

```html
<button>Click me</button>

```

Heres what it looks like:

<button>Click me</button>  
  

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


###Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)

## Resources 

- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)