HTML - Hypertext Markup Language
HTML - Hypertext Markup Language is the standard markup language for creating web applications.
Hypertext is simply a piece of text that works as a link.
Markup Language is a way of writing layout information within documents. Another way, It is a system for annotating a document in a way that is syntactically distinguishable from the text. Basically an HTML document is a plain text file that contains text and nothing else.
When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor.
Semantics - One important aspect in HTML creation is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. The term "semantics" is, that words can be manipulated to influence human thought and action. Lets look at how to use HTML to break a block of text up into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
- An HTML document begins with a Document-Type declaration <!DOCTYPE html> (Line 1) to identify itself as an HTML document to the browser.
- The HTML content is contained within a pair of <html>...</html> tags. You can specify the default language of your document via attribute lang="en" (for English) in the <html> opening tag.
- There are two sections in the document: HEAD and BODY, marked by <head>...</head> and <body>...</body> tags, respectively.
- In the HEAD section:
- The <meta charset="utf-8"> element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the UTF-8 character encoding scheme, which is compatible with ASCII code for English alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and Korean) efficiently.
- When saving your file, you need to choose "UTF-8 encoding" in the "save-as" dialog menu.
- The <title>...</title> element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window.
- In the BODY section:
- The <h1>...</h1> container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from <h1>...</h1> (largest) to <h6>...</h6>. Line 11 uses a <h3>...</h3> (Heading Level-3).
- The <hr> standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line).
- The <p>...</p> container tags (Line 10 and 12) mark the enclosing texts as a paragraph. <p>...</p> is the most frequently-used tag in HTML.
- The <strong>...<strong> tags (nested under the <p>...</p> in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested <em>...</em> tags (Line 12) specify "emphasis" - rendered in italic by the browser.
- Unordered List <ul>...</ul>: An un-ordered list is shown with a bullet in front of each item. The <ul>...</ul> contains an un-ordered list. Each of items in the list is enclosed in <li>...</li>
- List Item <li>...</li>: Items in an ordered list are numbered automatically by the browser. The container tag <ol>...</ol> contains an ordered list.
This article introduce fundamental concepts and syntax you need to know to understand HTML.