Introduction
In this series, I will try to discuss Web Basics Topics. In the first episode, the HTML Basics are covered.
Table of Contents
- What is HTML?
- HTML Document structure
- HTML Tags
- HTML Header Section
- HTML Body section
- Conclusion
- References
What is HTML?
HTML (Hyper Text Markup Language) is the language for describing the structure of Web pages. HTML gives authors the means to:
- Publish online documents with headings, text, tables, lists, photos, etc.
- Retrieve online information via hypertext links, at the click of a button.
- Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
- Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
HTML Document structure
This is a rough structure of an HTML document.
<!DOCTYPE html>
<html>
<head>
Document Header
</head>
<body>
Document Body
</body>
</html>
HTML Tags
HTML is a markup language and makes use of various tags to format the content. Except few tags, most of the tags have their corresponding closing tags. For example, <body> has its closing tag <\body.
Some Basic Tags
| Tag | Description |
|---|---|
<!DOCTYPE...> |
This tag defines the document type and HTML version. |
<html> |
This tag encloses the complete HTML document and comprises of document header and body. |
<head> |
This tag represents the document's header. |
<title> |
This tag is used inside the <head> tag to mention the document title. |
<body> |
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p>, etc. |
<h1> |
This tag represents the top level heading. The tags <h2>, <h3>, <h3>, <h4>, <h5>, <h6> also represents other sizes of headings in which <h1> is the biggest and <h6> is the smallest. |
<p> |
This tag represents a paragraph. |
Singleton Tags
The singleton tags don't require a closing tag to be valid. These elements are usually ones that stand alone on the page.
Important Singleton Tags
| Tag | Description |
|---|---|
<br> |
A line break which is used in text content to create a single line break instead of a paragraph. |
<hr> |
A horizontal rule, which is a straight line on a page. These can be used to separate sections in a webpage. |
<img> |
Used to embed an image in an HTML page. Technically, this tag creates a holding space for the image whose path can be referenced through src attribute. |
<meta> |
Meta tags are "information about content." They are found in the head of a document and used to convey page information to the browser. There are many different meta tags that you can use on a web-page. |
<input> |
A form element that is used to capture information from visitors. |
Semantic and Unsemantic Tags
Semantic tags describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span>. These tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> . These clearly defines its content.
Semantic Page Example
HTML Header Section
Difference between <header> and <head>
The <header> element is a structural element that outlines the heading of a segment of a page. It falls within the <body> element.
The <head> element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the <html> element.
Navigation Section
The <nav> element identifies a section of major navigational links on a page. This allows us to link to other pages within the same website or to parts of the same web page
Title
<title> is used to give titles to web-pages. It is shown in browser's title bar.
Favicon
A favicon is a file containing one or more small icons, associated with a particular website or web page.
Now favicon.ico is used to display icon in our web-page (Typically can be seen close to the title in the title bar).
Charset
A character set (charset) refers to the composite number of different characters that are being used and supported by the html document.
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag.
UTF-8, ASCII and UNICODE
| ASCII | UNICODE | UTF-8 |
|---|---|---|
| ASCII defines 128 characters, which map to the numbers 0–127 | Unicode defines (less than) 221 characters, which, similarly, map to numbers 0–221 | UTF-8 is one possible encoding scheme of Unicode characters |
| ASCII is subset of UNICODE | UNICODE is super set of ASCII | |
| Invented to accommodate non-English characters |
Viewport
The view-port is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
This is defined using <meta tags in HTML
HTML Body section
Block Level tags
<h1> to <h6>
<h1> to <h6> tags are used for headings with <h1> being the largest and <h6> being the smallest.
Lists
<ul>, <ol> and <li> are used to list items in a web-page.
The list is started with either <ul> or <ol> and then <li> is used to list the elements.
<ul> aka unordered list
- Item 1
- Item 2
- Item 3
<ol> aka ordered list
- Item 1
- Item 2
- Item 3
Page Divisions or Sections
-
<div>is a non-semantic tag used to divide page contents. -
<section>tag is a semantic tag used to define sections in a document. -
<header>tag is a semantic tag used for header section in the document. -
<footer>tag is a semantic tag used for footer contents in the document. -
<nav>tag is a semantic tag used for navigation contents of the document. -
<main>is a semantic tag used to define contents that are unique to the document. It should not contain any content that repeats across documents such as sidebars, navigation links, copyright information, site logos, and search forms. -
<aside>tag is a semantic tag that is used to set aside the content it is placed in from the section. -
<article>is used to specify independent, self-contained content. -
<canvas>tag is used to draw graphics, on the fly, via scripting (usually JavaScript). It is transparent, and is only a container for graphics, you must use a script to actually draw the graphics. -
<form>tag is used to create an HTML form for user input. -
<table>tag is used to create tables in the document.
Inline Tags
An inline element does not start on a new line. An inline element only takes up as much width as necessary.
-
<span>is an inline container used to mark up a part of a text, or a part of a document. -
<label>tag defines a label for several grouped elements, such as in drop-down, input-area etc. -
<input>tag is used to create input field where users can enter the data. -
<b>tag is used to bold the text. -
<i>tag is used to make the text italic. -
<img>tag is used to embed image in the web-page. -
<button>tag creates a button create a clickable button in the web-page. -
<a>tag is used to create links in the web-page.
Conclusion
That concludes the HTML basics. In the next episode, I will cover the Basics of CSS.
Top comments (0)