Quick overview of html
Tags: webdev, beginners, css, html
Published: 2021-11-23 15:24:31

![Image description](https://media.giphy.com/media/l3vRfNA1p0rvhMSvS/giphy.gif)
HTML which is an abbreviation of hypertext markup language, is the standard markup language used in building websites. At the basic level it defines the structure of the website.
###Syntax
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--ALL OTHER CONTENT GOES HERE-->
</body>
</html>
```

An html document is made up of three sections;
Declaration section which defines the type of the document
The head section enclosed in the `<head>` tags which contains the meta information and the title of document
The body section enclosed between `<body>` and `</body>` which is the part visible on the browser.
##HTML Tags
**Html tags** are keywords used to define how content will be displayed and formatted on a web browser.
Example; `<p>A paragraph..</p>`

Some tags have a closing tag while others do not have. Tags with only opening tags are also referred as *empty tags*. For instance `<hr>` which defines an horizontal line 
There are several types of tags such as;

**Heading tags** used to define headings, ranging from `<h1>` to `<h6>`. `<h1>` defines the **most important heading** while `<h6>` define the **least important heading**.
Example;
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h6>Heading 4</h6>
</body>
</html>
```

Output
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h4>Heading 4</h4>

 
**Paragraph tags** define a paragraph. `<p>A paragraph..</p>`

**Structure tags** that help in defining the structure of the html document. They include; *head*, *html*, and *body* tags.
 **Formatting tags** which are used in defining how the elements should be displayed. For instance the *italics tag* `<i>italics tag</i>` format the content to italics
**Self-closing tags** are tags which do not contain the closing tags. 
##HTML Elements and Attributes
**Html element** is made up of the html tags and the content inside the tag
Example of a HTML elements:
```html 
<h1>My First Heading</h1>
```
 
**Attributes** are used in html documents to provide extra information about elements. The attributes or the extra information is defined inside the opening tag using name value pairs: *name= “value”.* **Note** that the value is inside the quotes.
For instance the `href attribute` is used to specify the URL of a page; 
```html 
<a href="https://twitter.com/lux_academy">Visit our twitter page</a>
```
#Links
Html links allow users to jump to another webpage when they click on it. Links in html are defined using the **anchor tag** `<a>`. The tag has the *href* attribute which defines the web page to be visited
``` html
<a href="https://twitter.com/lux_academy">Follow us on twitter</a>
```
##Lists
Html lists are used to group related items. There are three types of html lists;
     -Ordered lists
     -Unordered lists
     -Description lists
###HTML ordered lists
Ordered list is created using the `<ol> tags` while the items are listed inside the `<li>`tags. The ordered items are marked with numbers by default.

Example:
```html
<ol>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>    
</ol>  
```
ordered list tag, `<ol>`, has a type attribute, which is used to specify the ordering format. below are the different type attributes and there respective ordering formats.
  -*type '1'* -numbers
  -*type 'I'* -upper case roman numbers
  -*type 'i'* -lower case roman numbers
  -*type 'A'*  -upper case letters
  -*type 'a'*  -lower case letters
```html
 <ol type="I">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>  
</ol>  
```
###HTML unordered lists
Unordered list is created using the `<ul> tags` while the items are listed inside the `<li>`tags. Its items are marked with bullets by default.
```html
<ul>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul> 
``` 
It also has a type attribute used to define the type of bulleting;
 -*type "disc"* - items are marked with bullets
 -*type "circle"* -items are marked with circles
 -*type "square"*  -items are marked with circles
 -*type "none"*   -the items are not marked

Example in a code
```html
<ul type="circle">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul>  
```
output
<ul type="disc">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul>  
###Description list
Html description list is a listing style where the items are listed alongside their descriptions. The `<dl>` tag is used to create a description list, the items are listed inside the `<dt>` tags while their descriptions are stated in the `<dd>` tags.
For instance;
<dl>  
  <dt>Html</dt>  
  <dd>-It is a markup language</dd>  
  <dt>Css</dt>  
  <dd>-Its is a styling language</dd>     
</dl>  

**code**

```html
<dl>  
  <dt>Html</dt>  
  <dd>-It is a markup language</dd>  
  <dt>Css</dt>  
  <dd>-Its is a styling language</dd>     
</dl>  

```


##Images
Images are added on webpages to improve their appearance. The `<img>` tag is used to embed the image. This tag has two attributes:
- `src` attribute which defines the location  or the path to the image  
- `alt` attribute used to specify the text to be displayed if the image cannot be accessed.
Syntax;
```html
<img src="path" alt="alternatetext">
```
##Tables
HTML tables are used to display tabular data. Data is contained in the table cells inside the rows and columns.  A table is created in html using the `<table>` tag. Each row is defined by `<tr>` tag, table headings are defined by `<th>` while the data cells are defined by `<td>` tag.
Example of a simple html table;
```html
    <table>
        <tr>
          <th>Company</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>John Doe</td>
          <td>Germany</td>
        </tr>
        </tr>
      </table>
```
##Forms
Forms are used in html to collect the user inputs which is sent to the server for processing. The `<form>` tag is used to define an html form.
Some of the form elements are;
`<input>` , `<label`, `<select>`, `<textarea>`, `<button>`
A simple html form:
```html
<form >
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
```
### Final words
Check on my [Quick CSS overview article](https://dev.to/ericawanja/quick-overview-of-css-5b71)