HyperText Markup Language

lastmod 2025-12-15created 2015-03-1268 edits

HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML not only denotes structural semantics for text such as headings, paragraphs, and lists, but also provides a means to create structured documents with links, quotes, and other items. It can also be used to embed images and objects and to create interactive forms. HTML is written in the form of HTML elements made up of "tags" enclosed in angle brackets within the web page content. HTML can include or load scripts such as JavaScript, which affects the behavior of HTML processors like web browsers, and css, which defines the look and layout of text and other items. The w3c, which is jointly responsible for the HTML and CSS standards, encourages the use of CSS for explicit, presentational markup.

In 1980, physicist Tim Berners-Lee, then a contractor at the European Organization for Nuclear Research (CERN), proposed ENQUIRE, the prototype of HTML. ENQUIRE was a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau jointly requested funding from CERN, but the project was never formally adopted by CERN. In his personal notes from 1990, Berners-Lee listed "some of the many areas in which hypertext is used" and put an encyclopedia first on the list.

The first publicly available description of HTML began in late 1991, when Berners-Lee first referred to a document on the Internet as "HTML Tags". It described 20 elements made up of initialisms, a relatively simple design of HTML. Except for the hyperlink tag, the HTML tags were strongly influenced by SGML GUID, CERN's own SGML-based documentation format. 13 of these elements still exist in HTML 4.

What is HTML?

HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a markup language.
• A markup language is a set of markup tags.
• The purpose of the tags are to describe page content.

Category

• HTML elements reference - HTML: Hypertext Markup Language | MDN
• HTML:Libraries
• HTML:Symbols or HTML Special Characters
• HTML:canvas (Canvas element, WebCanvas; Web Canvas; web canvas)
• Imagemaps - A web editor for easily creating HTML image maps
• HTML:iframe
• HTML:Drag - HTML Drag and Drop
• HTML:VirtualScroll
• HTML:History
• HTML:Tools - Small web tools that put JavaScript and CSS together in a single HTML file and run instantly
• HTML:Examples
• Web standards
• Web accessibility
• WAI-ARIA
• Server-Sent Events
• Web Component
  • Shadow DOM
• Cross-window communication - Explanation of how to communicate between iframes.
• WebSocket
• Semantic HTML
• htmx
• Event Bubbling
• Hyperclay - Single-file, portable, self-updating pure HTML web apps

Layout

• Hero Header

ETC

• Open Graph Protocol (OGP)

HTML Tutorials

• w3schools

Sample

How to redirect using a meta tag:

<meta http-equiv="refresh" content="0; url=http://naver.com/" />

How to use Submit:

<form method="post" action="/">
  <input type="test" name="field1">
  <input type="test" name="field2">
  <input type="submit">
</form>

Defining the mobile screen width:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Coding

• Tags are not case-sensitive, but use lowercase whenever possible. (HTML4 recommends lowercase, and XHTML requires lowercase.)

HTML5

HTML5 is the next major proposed version of HTML and the core markup language of the World Wide Web. Detailed specification work began in June 2004 at the Web Hypertext Application Technology Working Group (WHATWG) under the name Web Applications 1.0. As of April 2012, it is still under development. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0, and DOM Level 2 HTML. It aims to make the latest multimedia content easy to view in the browser.

The document declaration has been simplified to <!DOCTYPE html>. (case-insensitive) The basic document structure is as follows.

<!doctype html> 
<html> 
  <head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link rel="icon" type="image/png" href="webrtc.png" /> -->
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <script src="js/bootstrap.min.js"></script> -->

    <title>Index</title> 
  </head> 
  <body> 
    <div class="container">
      <p>Example paragraph</p>
    </div>
  </body> 
</html>

Layout

• Making a Layout
• Splitting frames using DIV tags

Clear fix

• [Recommended] Let's make 2-column and 3-column skins ¹

Applying the float property to a div can make it overflow its outline. In this case, set the class of the parent layer (the wrapping layer) to the clearfix below.

/* full clearfix */
/* add to floating elements which shall clear floating after themselves */ 
* html .clearfix{
    height: 1%; /* IE5-6 */
}
*+html .clearfix{
    display: inline-block; /* IE7not8 */
}
.clearfix:after{ /* FF, IE8, O, S, etc. */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Vertical align

See Cascading Style Sheets#Vertical Align for details.

Essential tags that make HTML work as expected

• Essential tags that make HTML work as expected | GeekNews
  • [Original] Don’t Forget These Tags to Make HTML Work Like You Expect - Jim Nielsen’s Blog
• To display a web page in the browser as expected, a few basic HTML tags must be included
• <!doctype html> ensures standards mode rendering, preventing layout calculation errors
• <code><html lang="en">

  </code> provides language information, improving accessibility, search, and translation quality

• <code><meta charset="utf-8">

  </code> and <meta name="viewport" ...> control character encoding and the mobile display scale, respectively

• These tags are not mere formalities but core components that keep web standards and the user experience consistent

Troubleshooting

HTML encoding

• Firefox: The character encoding of the HTML document was not declared

The following may be printed in the Firefox console.

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

In this case, add the code below inside head.

<meta charset="utf-8"/>

App not updating to the latest version after deployment unless the browser cache is cleared

See Cache Busting.

See also

• CSS
• JavaScript
• Internet
• World Wide Web (www)
• DOM
• Gomponents - HTML components written in pure Go
• lychee (link checker) - A fast asynchronous link checker written in Rust

Favorite site

• W3C website
• W3C Korea Office
• Wikipedia (en) explanation of HTML
• Wikipedia (en) explanation of HTML5
• w3schools explanation of HTML
• This wiki is for connecting the W3C communities
• This presentation is an HTML5 website ²
  • This presentation is an HTML5 website (ko ver) ³
• Disabling mouse drag and right-click (copy) ⁴
• HTML5 Open Community
• Reading the HTML DTD specification

Guide

• w3schools website ⁵
• Youtube: html5 tutorial notepad++
• HTML 5: Is it
  
  or
  ?
• 3.1.1 Is the primary language attribute (lang) declared in the HTML code?
• HTML URL Encoding Reference
• [Recommended] Practical HTML5 Guide ⁶
• SQLER.com HTML5 course ⁷⁸
• How to read the HTML 4.01 DTD ⁹
• [Recommended] Learn about the DOM Event system through exploration - Lets you see the DOM event propagation order graphically.

Tools

• Open-Source UI elements - made with CSS and HTML - Free UI elements made with HTML/CSS
  • 636 components, including buttons/loaders/checkboxes/switches/inputs/cards
  • 5232 contributors
  • Completely free. Usable for both personal and commercial purposes

HTML Reference

• Clear Both website
  • [Recommended] HTML5 Open Reference
• Complete guide to the HTML TABLE tag ¹⁰

HTML Editor

• http://stackoverflow.com/questions/1163376/html-css-javascript-editor
• http://www.sublimetext.com/
• http://kldp.org/node/117359
• http://www.kompozer.net/

References