HyperText Markup Language - HTML

HyperText Markup Language - HTML

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.

<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.

References


1 Comment

Andrewbut

<a href=http://a1realtyspb.ru/>Первоклассная недвижимость Санкт-Петербурга</a>. Фешенебельная двухуровневая квартира с дизайнерским ремонтом в лучшей части Санкт- Петербурга

Leave a comment