HTML stands for HyperText Markup Language. Hypertext means a machine-readable text which is hyperlinked by the web browser and markup means to structure the webpage in a specific format. So, HTML is a language that allows users to structure, organise, improve the appearance of a website and link data, text, images, videos on the internet. HTML is the standard markup language for creating a webpage. HTML is the skeleton of a webpage. HTML code is also known as Markup. HTML was invented by Tim Berners Lee in 1991 and initially released in 1993. HTML5 is the latest version of HTML released in 2017. HTML can be embedded with CSS and JavaScript.
HTML Document
HTML documents can be written in Notepad. We can also use different IDE such as Visual Studio Code, Sublime Text IDE, Notepad++, Eclipse, Kite, PyCharm, Atom IDE, AWS Cloud9, Ruby Mine, Light Table, PHP etc. We always have to save the HTML document using the .html file extension. There is mainly two part of an HTML document – Title and Body. The title part is responsible for the title of the webpage and the body part is responsible for the content of the webpage.
METADATA:
Metadata is data about HTML documents. Metadata is stored in a head tad. Metadata typically define the document title, character set, styles, scripts, viewport, description, keyword, HTTP equivalent of a webpage etc.
HTML TAGS AND ELEMENTS:
HTML consists of a series of elements. HTML elements consist of three parts – starting tag, content, ending tag. Every starting and ending tag starts and ends with angular brackets (< >) and the ending tag has an extra slash (/) at the beginning. Contents are written in between starting and ending tags. HTML tags are not case sensitive.
Some HTML elements do not have end tags and content, they are called Empty Tags or Empty Elements. Some HTML tags also consist of some attribute that is used to provide additional information about the content. Some HTML tags are used as containers of additional details of the content of a webpage, they are known as Container Tags.
There are two types of HTML tags as Semantic Tags and Non-semantic Tags. Semantic tags clearly describe their meaning to both the browser and the developer. The non-semantic tag does not describe its meaning to the browser and the developer.
There are also two another types of HTML elements such as Inline Element and Block Element. Inline element takes content or text as a line, e.g., <p>, <div>, <li>, <th>, <tr> etc. Block elements takes content or text as a block, e.g., <span>, <em>, <strong>, <b>, <i>, <u>, <a>, <img>, <table>, <audio>, <video> etc.
HTML ENTITIES:
HTML entities are used to write some symbolic characters, special characters and include some irregular space in the content of a webpage.
ID AND CLASS:
ID and Class are used to nominate one or more than one element in an HTML document. ID is worked as an identifier that can only be used a single time in a particular Html document. Class is worked as a specifier of one or more than one element in a particular HTML document. We can only use a single ID to a particular element whereas we can use multiple classes to a particular element. ID and class are used to modify and decorate some divisions of the webpage.
WEB BROWSERS:
There are various web browsers such as Google Chrome, Mozilla Firefox, Opera Mini, Microsoft Edge, The Onion Router (TOR) etc. These web browsers are used to view webpages whereas HTML source code is not visible through the web browsers, only we can view the content and title of that webpage which is structured through HTML, CSS, JavaScript, Bootstrap. Whereas we can visit the source code of a webpage by right-clicking the webpage and selecting the view page source option from the drop-down menu. We can also use the ctrl+U shortcut for visiting the source code of a webpage.
VIEWPORT:
The viewport is an important part of HTML. The viewport is used to set the compatibility of a webpage concerning the user’s device.
SEARCH ENGINE OPTIMISATION (SEO):
Search Engine Optimisation (SEO) is a process of taking steps to help a website or webpage to link on different web browsers.
DIFFERENT HTML TAGS WITH PURPOSE :
Tag | Purpose |
<!DOCTYPE> | declaring the version of HTML in which the webpage is written |
<html>……</html> | declaring the starting and ending of html document |
<head>……</head> | declaring the container of meta and title tag of webpage |
<meta…………> | Declaring the metadata of webpage (container tag) |
<title>……</title> | declaring the title of webpage |
<body>……</body> | declaring the content of webpage |
<h1 or h2 or h3 or h4 or strong texth5 or h6 >……</h1 or h2 or h3 or h4 or h5 or h6> | declaring the heading of different size |
<p>……</p> | declaring a block of paragraph |
<span>……</span> | declaring an inline paragraph |
<br> | declaring single line break (empty tag) |
<hr> | declaring horizontal rule (empty tag) |
<pre>……</pre> | declaring pre-formatted text |
<b>……</b> | declaring bold text |
<u>……</u> | declaring underlined text |
<i>……</i> | declaring italic text |
<strong>……</strong> | declaring important text |
<em>……</em> | declaring emphasized text |
<section>……</section> | declaring a section in a document |
<img>………. | use to embedded image from the source |
<a>……</a> | embedding another document as hyperlink from the source (anchor tag) |
<ol>……</ol> | declaring ordered list |
<ul>……</ul> | declaring unordered list |
<li>……</li> | declaring list item |
<table>……</table> | inserting a table |
<thead>……</thead> | declaring container of heading part of table |
<tbody>……</tbody> | declaring container of body part of table |
<caption>……</caption> | declaring table caption |
<tr>……</tr> | specifies table row |
<th>……</th> | declaring table heading |
<td>……</td> | declaring table data |
<abbr>……</abbr> | declaring an abbreviation |
<centre>……</centre> | declaring text in centre alignment |
<left>……</left> | declaring text in left alignment |
<right>……</right> | declaring text in right alignment |
<justify>……</justify> | declaring text in justify alignment |
<col>……</col> | specifies table column from a column group |
<colgroup>……</colgroup> | specifies a column group in table |
<details>……</details> | declaring additional details hide or show as per user action |
<summary>……</summary> | declaring summary of additional details of webpage |
<article>……</article> | declaring independent, self-contained content |
<div……>……</div> | declaring a division |
<header>……</header> | declaring header or introductory part of webpage |
<footer>……</footer> | declaring footer or conclusion part of webpage |
<nav>……</nav> | defines group of navigation elements throughout webpage |
<link…………….> | defining other file links embedded to HTML file |
<q>……</q> | declaring quotation |
<input………..> | takes input from user using webpage (container tag) |
<label>……</label> | creates label for particular input text |
<textarea>…… </textarea> | creates some space to write in form |
<button…………>…… </button> | creates a button in webpage |
<select>……</select> | creates selecting option for input form |
<form>……</form> | creates a form in webpage |
<mark>……</mark> | use to highlight specific text |
<audio>…….. | use to embed audio file from source |
<video>…… | use to embed video file from source |
<time……>……</time> | declaring date and time |
<!–……………..–> | declaring some comment which is hidden in webpage |
DIFFERENT HTML ATTRIBUTES WITH PURPOSE :
ATTRIBUTES | PURPOSE |
lang | specify the language of a webpage |
charset | specify character type of content of a webpage |
name | defines the type of data in the backend |
content | declares the characteristic of data |
description | declares the content as a description of the webpage |
keywords | declares the keywords of the webpage |
robots | decides whether the webpage will rank in browser or not |
HTTP-equiv | provides an HTTP header for the content attribute |
href | declares the source of the hyperlink |
src | declares the source of image, audio and video |
target | declares the target page opening a location |
alt | declares an alternate text for an area |
type | specifies the type of content |
value | declares the content of the button |
rows | declares a total number of row space in the text area |
cols | declares a total number of column space in the text area |
Detailed Information About Front-End Web Development • Scientific World (scientyficworld.org)