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> 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> 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> 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> 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> 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> 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> 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> 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> 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> Images
Images are added on webpages to improve their appearance. The <img> tag is used to embed the image. This tag has two attributes:
-
srcattribute which defines the location or the path to the image -
altattribute used to specify the text to be displayed if the image cannot be accessed. Syntax;
<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;
<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:
<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