DEV Community

Ericawanja
Ericawanja

Posted on • Edited on

Quick overview of html

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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;

<!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>
Enter fullscreen mode Exit fullscreen mode

Output

Heading 1

Heading 2

Heading 4

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:

<h1>My First Heading</h1>
Enter fullscreen mode Exit fullscreen mode

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;

<a href="https://twitter.com/lux_academy">Visit our twitter page</a>
Enter fullscreen mode Exit fullscreen mode

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

<a href="https://twitter.com/lux_academy">Follow us on twitter</a>
Enter fullscreen mode Exit fullscreen mode

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:

<ol>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>    
</ol>  
Enter fullscreen mode Exit fullscreen mode

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

 <ol type="I">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>  
</ol>  
Enter fullscreen mode Exit fullscreen mode

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.

<ul>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul> 
Enter fullscreen mode Exit fullscreen mode

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

<ul type="circle">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul>  
Enter fullscreen mode Exit fullscreen mode

output

  • HTML
  • Css
  • Javascript

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;

Html
-It is a markup language
Css
-Its is a styling language

code

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

Enter fullscreen mode Exit fullscreen mode

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;
<img src="path" alt="alternatetext">
Enter fullscreen mode Exit fullscreen mode

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;

    <table>
        <tr>
          <th>Company</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>John Doe</td>
          <td>Germany</td>
        </tr>
        </tr>
      </table>
Enter fullscreen mode Exit fullscreen mode

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:

<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>
Enter fullscreen mode Exit fullscreen mode

Final words

Check on my Quick CSS overview article

Top comments (0)