Introduction
Section 1.1: Hello World
HTML (Hypertext Markup Language) uses a markup system composed of elements which represent specific content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented. Visual representations are defined by Cascading Style Sheets (CSS) and realized by browsers. Still existing elements that allow for such, like e.g. font, "are entirely obsolete, and must not be used by authors"[1].
HTML is sometimes called a programming language but it has no logic, so is a markup language. HTML tags provide semantic meaning and machine-readability to the content in the page.
An element usually consists of an opening tag (<element_name>), a closing tag (</element_name>), which contain the element's name surrounded by angle brackets, and the content in between:
<element_name>...content...</element_name>
There are some HTML elements that don't have a closing tag or any contents. These are called void elements. Void elements include <img>, <meta>, <link> and <input>.
Element names can be thought of as descriptive keywords for the content they contain, such as video, audio, table, footer.
A HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable or audible content on the screen.
For this document it is important to note the difference between elements and tags:
Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>
Element insight
Let's break down a tag...
The <p> tag represents a common paragraph.
Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash ( / ) between the opening bracket and the element's name (</p>).
Content can then go between these two tags: <p>This is a simple paragraph.</p>.
Creating a simple page
The following HTML example creates a simple "Hello World" web page.
HTML files can be created using any text editor. The files must be saved with a .html or .htm[2] extension in order to be recognized as HTML files.
Once created, this file can be opened in any web browser.:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Simple page break down
These are the tags used in the example:
|
Tag name |
Description |
|
<!-- --> |
This tag is used to apply comment in an HTML document. |
|
<!DOCTYPE> |
This tag is
used to specify the version of HTML |
|
A |
|
|
<a> |
It is
termed as anchor tag and it creates a hyperlink or link. |
|
<abbr> |
It defines an abbreviation for a phrase or longer word. |
|
<acronym> |
It defines
acronym for a word. (Not
supported in HTML5) |
|
<address> |
It defines the author's contact information of the HTML article |
|
<applet> |
It defines
an embedded Java applet. (Not supported in HTML5) |
|
<area> |
It defines the area of an image map. |
|
<article> |
It defines
the self-contained content. |
|
<aside> |
It defines content aside from main content. Mainly represented as
sidebar. |
|
<audio> |
It is used
to embed sound content in HTML document. |
|
B |
|
|
<b> |
It is used
to make a text bold. |
|
<base> |
This tag defines the base URL for all relative URL within the
document. |
|
<basefont> |
This tag is
used to set default font, size and color for all elements of document. (Not supported in HTML5) |
|
<bdi> |
This tag is used to provide isolation for that part of text which may
be formatted in different directions from its surrounding text. |
|
<bdo> |
It is used
to override the current text direction. |
|
<big> |
This tag is used to make font size one level larger than its
surrounding content. (Not
supported in HTML5) |
|
<blockquote> |
It is used
to define a content which is taken from another source. |
|
<body> |
It is used to define the body section of an HTML document. |
|
<br> |
It is used
to apply single line break. |
|
<button> |
It is used to represent a clickable button |
|
C |
|
|
<canvas> |
It is used to provide a graphics space within a web document. |
|
<caption> |
It is used
to define a caption for a table. |
|
<center> |
It is used to align the content in center. (Not supported in HTML5) |
|
<cite> |
It is used
to define the title of the work, book, website, etc. |
|
<code> |
It is used to display a part of programming code in an HTML document. |
|
<col> |
It defines
a column within a table which represent common properties of columns and used
with the <colgroup> element. |
|
<colgroup> |
It is used to define group of columns in a table. |
|
D |
|
|
<data> |
It is used to link the content with the machine-readable translation. |
|
<datalist> |
It is used
to provide a predefined list for input option. |
|
<dd> |
It is used to provide definition/description of a term in description
list. |
|
<del> |
It defines
a text which has been deleted from the document. |
|
<details> |
It defines additional details which user can either view or hide. |
|
<dfn> |
It is used
to indicate a term which is defined within a sentence/phrase. |
|
<dialog> |
It defines a dialog box or other interactive components. |
|
<dir> |
It is used
as container for directory list of files. (Not supported in HTML5) |
|
<div> |
It defines a division or section within HTML document. |
|
<dl> |
It is sued
to define a description list. |
|
<dt> |
It is used to define a term in description list. |
|
E |
|
|
<em> |
It is used to emphasis the content applied within this element. |
|
<embed> |
It is used
as embedded container for external file/application/media, etc. |
|
F |
|
|
<fieldset> |
It is used
to group related elements/labels within a web form. |
|
<figcaption> |
It is used to add a caption or explanation for the <figure>
element. |
|
<figure> |
It is used
to define the self-contained content, and s mostly refer as single unit. |
|
<font> |
It defines the font, size, color, and face for the content. (Not supported in HTML5) |
|
<footer> |
It defines
the footer section of a webpage. |
|
<form> |
It is used to define an HTML form. |
|
<frame> |
It defines
a particular area of webpage which can contain another HTML file. (Not supported in HTML5) |
|
<frameset> |
It defines group of Frames. (Not supported in HTML5) |
|
H |
|
|
<h1> to <h6> |
It defines headings for an HTML document from level 1 to level 6. |
|
<head> |
It defines
the head section of an HTML document. |
|
<header> |
It defines the header of a section or webpage. |
|
<hr> |
It is used
to apply thematic break between paragraph-level elements. |
|
<html> |
It represents root of an HTML document. |
|
I |
|
|
<i> |
It is used to represent a text in some different voice. |
|
<iframe> |
It defines
an inline frame which can embed other content. |
|
<img> |
It is used to insert an image within an HTML document. |
|
<input> |
It defines
an input field within an HTML form. |
|
<ins> |
It represent text that has been inserted within an HTML document. |
|
<isindex> |
It is used
to display search string for current document. (Not supported in HTML5) |
|
K |
|
|
<kbd> |
It is used
to define keyboard input. |
|
L |
|
|
<label> |
It defines
a text label for the input field of form. |
|
<legend> |
It defines a caption for content of <fieldset> |
|
<li> |
It is used
to represent items in list. |
|
<link> |
It represents a relationship between current document and an external
resource. |
|
M |
|
|
<main> |
It represents the main content of an HTML document. |
|
<map> |
It defines
an image map with active areas. |
|
<mark> |
It represents a highlighted text. |
|
<marquee> |
It is used
to insert the scrolling text or an image either horizontally or vertically. (Not supported in HTML5) |
|
<menu> |
It is used for creating a menu list of commands. |
|
<meta> |
It defines
metadata of an HTML document. |
|
<meter> |
It defines scalar measurement with known range or fractional value. |
|
N |
|
|
<nav> |
It represents section of page to represent navigation links. |
|
<noframes> |
It provides
alternate content to represent in browser which does not support the
<frame> elements. (Not supported in HTML5) |
|
<noscript> |
It provides an alternative content if a script type is not supported
in browser. |
|
O |
|
|
<object> |
It is used to embed an object in HTML file. |
|
<ol> |
It defines
an ordered list of items. |
|
<optgroup> |
It is used to group the options of a drop-down list. |
|
<option> |
It is used
to define options or items in a drop-down list. |
|
<output> |
It is used as container element which can show result of a
calculation. |
|
P |
|
|
<p> |
It represents a paragraph in an HTML document. |
|
<param> |
It defines
parameter for an <object> element |
|
<picture> |
It defines more than one source element and one image element. |
|
<pre> |
It defines
preformatted text in an HTML document. |
|
<progress> |
It defines the progress of a task within HTML document. |
|
Q |
|
|
<q> |
It defines short inline quotation. |
|
R |
|
|
<rp> |
It defines an alternative content if browser does not supports ruby
annotations. |
|
<rt> |
It defines
explanations and pronunciations in ruby annotations. |
|
<ruby> |
It is used to represent ruby annotations. |
|
S |
|
|
<s> |
It render text which is no longer correct or relevant. |
|
<samp> |
It is used
to represent sample output of a computer program. |
|
<script> |
It is used to declare the JavaScript within HTML document. |
|
<section> |
It defines
a generic section for a document. |
|
<select> |
It represents a control which provides a menu of options. |
|
<small> |
It is used
to make text font one size smaller than document?s base font size. |
|
<source>> |
It defines multiple media recourses for different media element such
as <picture>, <video>, and <audio> element. |
|
<span> |
It is used
for styling and grouping inline. |
|
<strike> |
It is used to render strike through the text. (Not supported in HTML5) |
|
<strong> |
It is used
to define important text. |
|
<style> |
It is used to contain style information for an HTML document. |
|
<sub> |
It defines
a text which displays as a subscript text. |
|
<summary> |
It defines summary which can be used with <details> tag. |
|
<sup> |
It defines
a text which represent as superscript text. |
|
<svg> |
It is used as container of SVG (Scalable Vector Graphics). |
|
T |
|
|
<table> |
It is used to present data in tabular form or to create a table within
HTML document. |
|
<tbody> |
It
represents the body content of an HTML table and used along with
<thead> and <tfoot>. |
|
<td> |
It is used to define cells of an HTML table which contains table data |
|
<template> |
It is used
to contain the client side content which will not display at time of page
load and may render later using JavaScript. |
|
<textarea> |
It is used to define multiple line input, such as comment, feedback,
and review, etc. |
|
<tfoot> |
It defines
the footer content of an HTML table. |
|
<th> |
It defines the head cell of an HTML table. |
|
<thead> |
It defines
the header of an HTML table. It is used along with <tbody> and
<tfoot> tags. |
|
<time> |
It is used to define data/time within an HTML document. |
|
<title> |
It defines
the title or name of an HTML document. |
|
<tr> |
It defines the row cells in an HTML table |
|
<track> |
It is used
to define text tracks for <audio> and <video> elements. |
|
<tt> |
It is used to define teletype text. (Not supported in HTML5) |
|
U |
|
|
<u> |
It is used to render enclosed text with an underline. |
|
<ul> |
It defines
unordered list of items. |
|
V |
|
|
<var> |
It defines
variable name used in mathematical or programming context. |
|
<video> |
It is used to embed a video content with an HTML document |
|
W |
|
|
<wbr> |
It defines a position within text where break line is possible. |
1. ↑ HTML5, 11.2 Non-conforming features
2. ↑ .htm is inherited from the legacy DOS three character file extension limit.
HTML Page Structure
0 Comments
If you are a good learner please leave a challenging question on comment box for us when you visited this website ( Coding with Fun).