Html
Obaydur Rahman Full Stack Software Engineer
What is HTML?
HTML or HyperText Markup Language is the standard markup language for creating web pages and web applications. It helps to structure and organize the content of a web page for displaying it in a web browser. It is the most basic building block of the web. It was created by Tim Berners-Lee in 1990 and is maintained by the World Wide Web Consortium (W3C). The latest version of HTML is HTML5. HTML is written in plain text and is saved with the .html or .htm extension.
HTML is not a programming language, it does not have any logic or flow control. So to create a complete web application, you need to combine HTML with other technologies like CSS and JavaScript.
The Basics of HTML
HTML is very simple and easy to learn. The basic syntax of HTML is tags. With tags, you can create elements. An element is a piece of content that has a meaning. For example, a paragraph of text is an element, an image is an element, a form is an element and so on.
Tags and Elements
<element>Content</element>
The above syntax is called a tag. It consists of an opening tag, content and a closing tag. The opening tag is denoted by < and >. The closing tag is denoted by </ and >. And in between them is the content that is displayed in the browser. The content can be text or other HTML elements nested inside the element. The name of the tag is called the element name. The element names are case-insensitive. So <p> and <P> are the same.
<p>This is a paragraph.</p>
For example, here the opening tag is <p> and the closing tag is </p>. The content is This is a paragraph.. And the name of the element is p which stands for paragraph.
Self-Closing Tags
<element />
There are some tags that do not have any content. For example, the image tag <img> does not have any content. It gets the content from the src attribute. So the image tag is a self-closing tag. We write self-closing tags like this:
<img src="image.jpg" />
The closing tag is replaced by a slash / after the element name.
Attributes
<element attribute="value">Content</element>
Attributes are used to provide additional information about an element. They are written inside the opening tag. They have a name and a value. The name is separated from the value by an equal sign =. The value is wrapped in double quotes ". The attribute names are also case-insensitive. So onload="" and onLoad="" are the same.
<img
src="image.jpg"
alt="Image"
/>
In the above example, the src attribute provides the source of the image. The alt attribute provides an alternate text for the image. It is displayed if the image is not available.
Comments
<!-- This is a comment -->
Comments are used to add notes to the HTML code. They are not displayed in the browser. They are ignored by the browser. They are used to explain the code or to temporarily remove some code without deleting it.
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is another comment -->
Comments are written between <!-- and -->. They can be written anywhere in the HTML code.
Classes and IDs
<element
class="class-name"
id="one"
>Content</element
>
Classes and IDs are attributes that are used to identify elements. They are used to style elements with CSS and to target elements with JavaScript.
One element can have multiple classes. Classes are separated by a space. Classes are used to identify similar elements. For example, all the paragraphs in the page can have the class paragraph and all the headings can have the class heading.
<h1 class="heading">Heading 1</h1>
<p class="paragraph">This is a paragraph.</p>
<h2 class="heading">Heading 2</h2>
<p class="paragraph">This is another paragraph.</p>
IDs are unique. One element can have only one ID, any other element in the document cannot have the same ID.
IDs are used to identify a single element. For example, the first paragraph in the page can have the ID first.
<p
id="first"
class="paragraph"
>
This is a paragraph.
</p>
<p class="paragraph">This is another paragraph.</p>
Nesting Elements
<element>Content<element>Content</element></element>
Elements can be nested inside other elements. The content of an element can be other elements. The content of an element can be text. The content of an element can be a combination of elements and text.
<p>This is a paragraph with <strong>bold</strong> text.</p>
In the above example, the <strong> element is nested inside the <p> element. The content of the <p> element is a combination of text and another element.
Structure of an HTML Document
Now that we know the basics of HTML, let's see how to create a HTML document.
The structure of an HTML document should be like this:
<!doctype html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
Here the <!DOCTYPE html> declaration is used to tell the browser that the document is written in HTML5. The <html> element is the root element of the document. It contains the <head> and <body> elements. The <head> element contains the metadata of the document that are not displayed in the browser viewport. The <body> element contains the content of the document that is displayed in the browser viewport.
One html document should only have one html element, one head element and one body element.
Common HTML Elements
Here are some of the most commonly used HTML elements:
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Headings are used to organize the content of a document. They are used to create sections and subsections. There are six levels of headings. The <h1> element is the highest level and <h6> is the lowest level.
Paragraphs
<p>Paragraph</p>
Paragraphs are used to group related content. They are used to separate different sections of a document.
Links
<a href="https://example.com">Example Link</a>
Links are used to navigate to another page or to another location on the same page. The href attribute specifies the destination of the link. The content of the link is the anchor text.
Images
<img
src="image.jpg"
alt="Image"
/>
Images are used to display images in a web page. The src attribute specifies the source of the image. The alt attribute provides an alternate text for the image. It is displayed if the image is not available.
Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<dl>
<dt>Item 1</dt>
<dd>Description 1</dd>
<dt>Item 2</dt>
<dd>Description 2</dd>
<dt>Item 3</dt>
<dd>Description 3</dd>
</dl>
Lists are used to display a list of items. There are three types of lists: unordered list, ordered list and description list. The unordered list is displayed with bullets. The ordered list is displayed with numbers. The description list is displayed with terms and descriptions.
Tables
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
Tables are used to display tabular data. The <table> element is used to create a table. The <tr> element is used to create a table row. The <th> element is used to create a table header. The <td> element is used to create a table data cell.
Forms
<form>
<label for="name">Name</label>
<input
type="text"
id="name"
name="name"
/>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
/>
<label for="message">Message</label>
<textarea
id="message"
name="message"
></textarea>
<input
type="submit"
value="Submit"
/>
</form>
Forms are used to collect user input. The <form> element is used to create a form. The <label> element is used to create a label for an input element. The <input> element is used to create an input field. The <textarea> element is used to create a text area. The <input type="submit"> element is used to create a submit button.
Semantic Elements
<header>
Header
<aside>
Sidebar
<nav>Navigation</nav>
</aside>
</header>
<main>
Main Content
<article>Article</article>
<aside>Aside</aside>
<section>
Section
<div>Div</div>
<span>Span</span>
</section>
</main>
<footer>Footer</footer>
The HTML5 specification introduced some new semantic elements. These elements are used to define the structure of a document. They are used by search engines and screen readers to understand the content of a document.
For example, the <header> element is used to define the header of a document. The <main> element is used to define the main content of a document. The <footer> element is used to define the footer of a document. Technically, these elements are just like the <div> element, which is a generic container element.
Other HTML Elements
There are many other HTML elements to structure a web page and to display different types of content. Here are the standard HTML elements with a short description and valid attributes for each element.
| Element | Description | Attributes |
|---|---|---|
<a> | Defines a hyperlink | href, target, download, rel, hreflang, type |
<abbr> | Defines an abbreviation or an acronym | title |
<address> | Defines contact information for the author/owner of a document or an article | |
<area> | Defines an area inside an image-map | alt, coords, download, href, hreflang, media, rel, shape, target, type |
<article> | Defines an article | |
<aside> | Defines content aside from the page content | |
<audio> | Defines sound content | autoplay, controls, loop, muted, preload, src |
<b> | Defines bold text | |
<base> | Specifies the base URL/target for all relative URLs in a document | href, target |
<bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it | |
<bdo> | Overrides the current text direction | dir |
<blockquote> | Defines a section that is quoted from another source | cite |
<body> | Defines the document's body | |
<br> | Defines a single line break | |
<button> | Defines a clickable button | autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value |
<canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) | height, width |
<caption> | Defines a table caption | |
<cite> | Defines the title of a work | |
<code> | Defines a piece of computer code | |
<col> | Specifies column properties for each column within a <colgroup> element | span |
<colgroup> | Specifies a group of one or more columns in a table for formatting | span |
<data> | Links the given content with a machine-readable translation | value |
<datalist> | Specifies a list of pre-defined options for input controls | |
<dd> | Defines a description/value of a term in a description list | |
<del> | Defines text that has been deleted from a document | cite, datetime |
<details> | Defines additional details that the user can view or hide | open |
<dfn> | Represents the defining instance of a term | |
<dialog> | Defines a dialog box or window | open |
<div> | Defines a section in a document | |
<dl> | Defines a description list | |
<dt> | Defines a term/name in a description list | |
<em> | Defines emphasized text | |
<embed> | Defines a container for an external (non-HTML) application | height, src, type, width |
<fieldset> | Groups related elements in a form | disabled, form, name |
<figcaption> | Defines a caption for a <figure> element | |
<figure> | Specifies self-contained content | |
<footer> | Defines a footer for a document or section | |
<form> | Defines an HTML form for user input | accept-charset, action, autocomplete, enctype, method, name, novalidate, target |
<h1> to <h6> | Defines HTML headings | |
<head> | Defines information about the document | |
<header> | Defines a header for a document or section | |
<hr> | Defines a thematic change in the content | |
<html> | Defines the root of an HTML document | manifest |
<i> | Defines a part of text in an alternate voice or mood | |
<iframe> | Defines an inline frame | allow, allowfullscreen, height, name, referrerpolicy, sandbox, src, srcdoc, width |
<img> | Defines an image | alt, crossorigin, decoding, height, ismap, loading, referrerpolicy, sizes, src, srcset, usemap, width |
<input> | Defines an input control | accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width |
<ins> | Defines a text that has been inserted into a document | cite, datetime |
<kbd> | Defines keyboard input | |
<label> | Defines a label for an <input> element | for, form |
<legend> | Defines a caption for a <fieldset> element | |
<li> | Defines a list item | value |
<link> | Defines the relationship between a document and an external resource (most used to link to style sheets) | as, crossorigin, href, hreflang, imagesizes, imagesrcset, integrity, media, referrerpolicy, rel, sizes, title, type |
<main> | Specifies the main content of a document | |
<map> | Defines a client-side image-map | name |
<mark> | Defines marked/highlighted text | |
<meta> | Defines metadata about an HTML document | charset, content, http-equiv, name |
<meter> | Defines a scalar measurement within a known range (a gauge) | form, high, low, max, min, optimum, value |
<nav> | Defines navigation links | |
<noscript> | Defines an alternate content for users that do not support client-side scripts | |
<object> | Defines an embedded object | data, form, height, name, type, typemustmatch, usemap, width |
<ol> | Defines an ordered list | reversed, start, type |
<optgroup> | Defines a group of related options in a drop-down list | disabled, label |
<option> | Defines an option in a drop-down list | disabled, label, selected, value |
<output> | Defines the result of a calculation | for, form, name |
<p> | Defines a paragraph | |
<param> | Defines a parameter for an object | name, value |
<picture> | Defines a container for multiple image resources | |
<pre> | Defines preformatted text | |
<progress> | Represents the progress of a task | max, value |
<q> | Defines a short quotation | cite |
<rb> | Defines a ruby annotation (used in East Asian typography) | |
<rp> | Defines what to show in browsers that do not support ruby annotations | |
<rt> | Defines an explanation/pronunciation of characters (for East Asian typography) | |
<rtc> | Defines a ruby text container for ruby text components (used in East Asian typography) | |
<ruby> | Defines a ruby annotation (used in East Asian typography) | |
<s> | Defines text that is no longer correct | |
<samp> | Defines sample output from a computer program | |
<script> | Defines a client-side script | async, crossorigin, defer, integrity, nomodule, nonce, referrerpolicy, src, type |
<section> | Defines a section in a document | |
<select> | Defines a drop-down list | autofocus, disabled, form, multiple, name, required, size |
<slot> | Defines a slot for an element that you can fill with your own markup | name |
<small> | Defines smaller text | |
<source> | Defines multiple media resources for media elements (<video> and <audio>) | media, sizes, src, srcset, type |
<span> | Defines a section in a document | |
<strong> | Defines important text | |
<style> | Defines style information for a document | media, nonce, scoped, type |
<sub> | Defines subscripted text | |
<summary> | Defines a visible heading for a <details> element | |
<sup> | Defines superscripted text | |
<svg> | Defines a container for SVG graphics | |
<table> | Defines a table | |
<tbody> | Groups the body content in a table | |
<td> | Defines a cell in a table | colspan, headers, rowspan, scope |
<template> | Defines a template | |
<textarea> | Defines a multiline input control (text area) | autocomplete, autofocus, cols, dirname, disabled, form, maxlength, minlength, name, placeholder, readonly, required, rows, wrap |
<tfoot> | Groups the footer content in a table | |
<th> | Defines a header cell in a table | colspan, headers, rowspan, scope |
<thead> | Groups the header content in a table | |
<time> | Defines a date/time | datetime |
<title> | Defines a title for the document | |
<tr> | Defines a row in a table | |
<track> | Defines text tracks for media elements (<video> and <audio>) | default, kind, label, src, srclang |
<u> | Defines text that should be stylistically different from normal text | |
<ul> | Defines an unordered list | |
<var> | Defines a variable | |
<video> | Defines a video or movie | autoplay, controls, crossorigin, height, loop, mediagroup, muted, playsinline, poster, preload, src, width |
<wbr> | Defines a possible line-break |
For more information, see the MDN Web Docs.
Global Attributes
These are the attributes that can be used on any HTML element.
| Attribute | Description | Values |
|---|---|---|
accesskey | Specifies a shortcut key to activate/focus an element | |
class | Specifies one or more classnames for an element (refers to a class in a style sheet) | |
contenteditable | Specifies whether the content of an element is editable or not | true, false |
contextmenu | Specifies a context menu for an element. The context menu appears when a user right-clicks on the element | |
data-* | Used to store custom data private to the page or application | |
dir | Specifies the text direction for the content in an element | ltr, rtl, auto |
draggable | Specifies whether an element is draggable or not | true, false, auto |
dropzone | Specifies whether the dragged data is copied, moved, or linked, when dropped | copy, move, link |
hidden | Specifies that an element is not yet, or is no longer, relevant | |
id | Specifies a unique id for an element | |
lang | Specifies the language of the element's content | |
spellcheck | Specifies whether the element is to have its spelling and grammar checked or not | true, false |
style | Specifies an inline CSS style for an element | |
tabindex | Specifies the tabbing order of an element | |
title | Specifies extra information about an element | |
translate | Specifies whether the content of an element should be translated or not | yes, no |
To learn more about these attributes, see the MDN Web Docs.