HTML basics
This tutorial represents all of the HTML tags that are mostly used to make a web page. The following topics enable you to make a web page and they cover most of the material of HTML.
HTML syntax
Every language has its own syntax. The syntax is an arrangement of words according to the rules of language. Similarly, there is also basic syntax to write HTML.
Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>This is a new paragraph.</p>
</body>
</html>
Try </>
The basic syntax of HTML has been given above. Its structure is very simple and resembles a human being. Like a human being, it consists of a head (serves as the brain of the page) and body (serves as the visible portion of a page).
<!DOCTYPE> represents the type of document. It means that this document is of HTML.
Elements
An element usually consists of opening and closing tags. For example, <h1> is opening and </h1> is closing tag.
Example
<tag_name>Content</tag_name>
<code>This is code element.</code>
<p>This is a paragraph element.</p>
Try </>
Tags
There are three kind of tags. Opening, closing and self-closing tags.Opening and closing tags alway come in pair(<p>-</p>).
And self-closing tag is always single with the optional forward slash after tag name. (<br/>)
Attributes
An attribute provides the additional information about the tag and make it more useable. For example, title, contenteditable, readonly, width, height etc.
Example
<p title="new paragraph">This is a paragraph</p>
<p contenteditable> content is editable.</p>
Try </>
The attribute is always written in opening tag with the name-value pair.
Headings
<h1> to <h6> tags are used for headings. The purpose of these headings is to represent the topic. The headings are ranked from h1 to h6.
Example
<h1>The heading1</h1>
<h2>The heading2</h2>
<h3>Third level heading</h3>
<h4>The heading4</h4>
<h5>The heading5</h5>
<h6>Least important heading</h6>
Try </>
<p> tag represents the paragraph.
Images
<img> element adds an image on the page. The 'src' attribute contains the address of the image.
Example
<img src="directory/name of image" alt="alternate text">
<img src="/images/codingb-32x32.png" alt="image logo">
Try </>
width and height attributes set the dimension of the image.
Links
The anchor link (<a>) connects the current document to the other pages or resources.
Example
<a href="address of the external" target="_blank">anchor text</a>
<a href="https://www.web4college.com/" target="_blank">web4college</a>
Try </>
href attribute contains the address of external page or resource.
target="_blank" means the link opens in new window.
Lists
These lists may be used , to wirte components in an unordered form and represent the term-definition pairs.
Example
Ordered list
- Mix both solutions
- Stir them well.
- Add a few drops of the sulphuric acid.
Unordered list
- Sulphuric Acid
- Temperature
- Solution1
Definition lists
- String
- The string is the group of characters in the double quotation marks.
- Operators
- The operators perform operations on operands and do calculations.
Unordered list
Unordered lists are used where the order of items is not necessary. For example, it may be used to write the components of a recipe.
Ordered list
Ordered lists are used where order of items is necessary. For example, it is used to instruct someone for a specific task (recipe).
Definition list
It is used for the terms and their definitions.
Tables
Tables are used to represent the data in the form of columns or rows. The basic data cells contain the data.
tr represents table row. td is for table data. th is an abbreviation of table head.
Text formatting
There are many elements that format the text.
<b>, <i>, <strong>, <em>, <u>, <mark>, <del>, <insert>, <sub>, <sup>, <var> elements format the text.
Comments
Comment is used to provide the information why this code has been written especially in complex coding. Comments are not visible in the web page. It may be a single line or multi-line comment.
Example
<!---This is the syntax to write a comment ---->
<!---This is multi-line
comment ---->
Try </>
Colors
The colors may be represented in decimal notation or hexadecimal notation. The named colors may also be used.
Example
color:green; <!--- name color -->
color:rgb(255,0,0); <!--- decimal notation -->
color:#ff0000; <!--- hexadecimal notation --->
Try </>
Head
Head element contains the meta data, the addresses of external resources such as <link> tag to import css file and <script> tag to import script file.
Example
<title>title of page</title>
<link href="test.css" rel="stylesheet"> <!--- imports external css file --->
<base href="https://www.web4college.com/"> <!--- The default url of the page --->
<meta name="keywords" value="html basics, html codes, html page">
Try </>
Click on the head to learn more.
Video
<video> tag adds a video on the page. We write the address of the video in the 'src' attribute of video tag.
Example
Try </>controls attribute adds controls on the video.
Audio
<audio> tag adds an audio on the page. We write the address of audio in the 'src' attribute.
Example
Try </>Iframe
HTML iframe is used to browse the other HTML files or other browsing content in a specified frame. It is an inline element.
Example
<iframe src="files/value.html" ></iframe>
iframe can embed website
<iframe src="https://www.web4college.com" ></iframe>
Try </>
Form
HTML form is used to collect the data from the user. It consists of normal content, other input controls (text, number, buttons, checkbox etc.) and context menus (select, option, optgroup etc).
Example
Try </>Previous
Was this article helpful?
