HTML Basics
Hello reader,
in this article, we will cover the basic theory behind HTML markup language.
HTML (HyperText Markup Language) is a simple language used to execute Internet applications. It's standard for Internet documents so an HTML document is equal to a Web page. HTML is platform-neutral language and is executed and displayed using a Web browser. Files have the extension .html or .htm and they are located in a specific directory of the server that is connected to the Internet.
The table below shows the development of HTML over the years:
| HTML | Version | Year |
| HTML | 1991. | |
| HTML | + | 1993. |
| HTML | 2.0 | 1995. |
| HTML | 3.2 | 1997. |
| HTML | 4.01 | 1999. |
| XHTML | 1.0 | 2000. |
| HTML | 5 | 2012. |
| XHTML | 5 | 2013. |
HTML Tags
HTML commands are written in the form of tags. A single tag is a command that tells the reader (web browser) how and in what way to display the content of the described page. Most tags have both a start and end tag. The final tag is obtained by adding the "/" sign and indicates the place where the initial tag ends. Start and end are paired: <html> and </html>.
HTML tags are not "case sensitive", ie. it doesn't matter if they are lowercase or uppercase, so the meaning of the previous <html> tag is the same as the next <HTML>. Besides that, a widely used practice is to write HTML in lowercase.
Tag division
Simple tags are used to describe simple elements of HTML like <x>. Complex tags are written in pairs, where a closed tag represents a tag with the slash / character and it represents the end of the command: <x> example </x>. Attribute within the tag: < x a1 = a a2 = 5 ...> example </x> which provide additional information for the given tag. The name and value pair is written: name = "value"
Quotation marks
Double quotation marks are used for attribute values. In some situations, the value needs to contain double quotation marks, so single quotation marks (apostrophes) are written. Example:
<p title = "M. Pupin - From Immigrant To Inventor">
<p title = 'M. Pupin - "From Immigrant To Inventor"'>
HTML Visual Structure
The image below represents the minimal structure of the HTML page.
<html> is a tag that defines the HTML page (beginning and end),
<head> is a tag header, contains meta-definitions of the HTML document and information that does not appear explicitly within the document,
<title> is a tag name of the HTML document (displayed in the browser),
<body> is a tag that defines the body of the document (what it shows to the user).
Declaration <! DOCTYPE>
The declaration is the first tag, which is stated before the <html> tag. This declaration is not an HTML tag, but a tag that tells the web reader in which version the given HTML page is written, so that the reader displays the given page correctly.
For HTML 4.01:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
For HTML 5:
<! DOCTYPE html>
This declaration is not necessary, it only helps the reader to read the content of the page correctly!
Text editors
There is a lot of tools and text editors in which we can write HTML code. Some of the most popular are:
- Notepad++
- Sublime
- Atom
- Visual Studio Code
- NetBeans
- Eclipse etc
Web browsers
Web browsers are tools for reading HTML pages. In popular browsers, we can view the source code of every page that is loaded.
Google Chrome - right-click, then View page source
Mozilla Firefox - View -> Page Source (Ctrl + U)
Internet Explorer 9 - View -> Source
Opera - View -> Source (Ctrl + F3)
Safari - View -> View Source (Ctrl + Alt + U)
Four steps to execute HTML:
1. Open code editor (Notepad++)
2. Write code in HTML
3. Save a page with HTML extension (.html)
4. View HTML page in web browser
What is <head>?
<head> is a header element, which includes scripts, instructs the reader where to find styles for the loaded page, provides meta-information, etc. The following tags can be added to the head section:
<title>
<style>
<link>
<meta>
<script>
<noscript>
<base>
<style> tag
The <style> tag is used to define the style. Using it affects the appearance of individual HTML elements on the page.
Example:
<style type = "text / css">
body {
background-color: yellow;
}
p {
color: blue;
}
</style>
<link> tag
The <link> tag is used to define the relationship between the HTML document and the external resource. It is most commonly used to define style templates (eg CSS).
Example:
<link rel="stylesheet" type="text/css" href="/mystyle.css">
<meta> tag
Metadata is data about data. The <meta> tag provides information about the HTML document. Metadata is not displayed on the page but is suitable for parsing. Meta elements are typically used to specify page descriptions, keywords, page author information, last modified page, and other metadata. Metadata can be used by Internet browsers.
Examples:
<meta name="keywords" content="Software Developer, HTML Tutorial, HTML Basics"><meta name="description" content="This is an example description for HTML tutorial"><meta name="author" content="Ivan Zarkovic"><meta http-equiv="refresh" content="30">
<base> and <script> tags
The <base> tag defines the default address or default destination for all links on the page. The <script> tag is used for scripting languages (e.g. loading JavaScript code).
Formatting text in HTML
Headers
In HTML, headers are displayed according to the relative level of numbers from 1 to 6. The general form of the title tag is: <Hn> Text for level title n </Hn> - where n is obtained from 1 to 6
Example:
<h1> Title H1 </h1> <h2> Title H2 </h2> <h3> Title H3 </h3>
Paragraph <p> and section <div>
The text is divided into logical units. The basic units in HTML are a paragraph and a section. A new paragraph is given by a <p> tag. This tag separates text with line spacing. At the end of the paragraph, it is recommended to insert its final tag (but not necessary).
Example:
<p> This is paragraph.</p> <p> This is second paragraph.
Text and centering
HTML is not a case-sensitive language, but the text displayed within the page is case-sensitive! Unless otherwise emphasized, the text within the HTML page is left-aligned. Centering text or any other page element is obtained using the <center> and </center> tags:
<center> This is centered text </center>Division <div>
The division is obtained by using the <div> and </div> tags. The text representing the section is separated from the rest of the text by a new line without spaces. This tag may have an ALIGN positioning attribute with the same values as the <p> tag.
<div> This is a section. </div>
New line <br>
Text printed in the editor will not always be copied to the HTML page as it appears in the editor. Examples for these special cases are new lines, tab, and blank characters. For new line (ENTER): tag <br> in HTML tag <br/> in XHTML. This is a simple tag, there is no "end of tag" "</br>
Special characters
Blank space (SPACE) - the command gives one blank space. If you want 8 blank spaces, simply write eight such commands one after the other separated by a semicolon:
More special HTML commands
| Character | Description | HTML | ASCII |
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
Tag <pre>
The preformatted text between <pre> and </pre> preserves newline and blank characters. It has fixed-width font (Courier) and is good for displaying program code.
Text formatting
The table below shows simple tags for text formatting.
| Format look | Tag and text |
| Bold | <b>Bold</b> |
| Strong | <strong>Strong</strong> |
| Italic | <i>Italic</i> |
| Emphasized | <em>Emphasized</em> |
| Underline | <u>Underline</u> |
| Strike | <strike>Strike</strike> |
Small and colored text
Text written in lower font. Example: this is <small> small text </small>
Text written in clearly marked color. Example: this is <mark> highlighted text </mark>
Inserting and deleting text
Instead of <u>, use a tag to insert text: <ins>. Instead of <strike>, use a tag to delete (delete) text: <del>
Example: Font <del> red </del> <ins> blue </ins> colors.
Index and exponent
You can also write letters in an index or exponent. The index is added using the <sub> tag and the exponent is added using the <sup> tag.
| Format look | Tag and text |
| H2O | H<sub>2</sub>O |
| 23=8 | 2<sup>3</sup>=8 |
Horizontal line <hr>
<hr> or horizontal rule with optional NOSHADE attribute. You can use <hr /> for XHTML standard • Simple tag - doesn't need end of tag </hr>.
Example:
<hr size = "4" width = "50%">HR attributes
- width - line length either in pixels or as a percentage of the page width
- size - line thickness in pixels
- color - attribute determines the color of the line
- align - attribute to which the same value can be assigned as for paragraph alignment
- noshade - if you want the line to be shaded, not transparent (this attribute is used when there are no color attributes)
These attributes are not supported in HTML5, but use via CSS is recommended:
<style>
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #FF0000;
width: 50%;
}
</style>
Citation
For short citations: tag <q> puts text under quotation marks. For long citations: tag <blockquote> uses the attribute cite = "URL_address" to link a particular citation to the corresponding website. Tag <cite> indicates the name of someone works. There are closed tags in these tags.
Example:
<blockquote cite="https://www.ivanzarkovic.com">This is quote</blockquote>
Tag <header>
The <header> tag is a container for introductory content. It usually contains: one or more titles (<h1> - <h6>), logo, information about the author.
Example:
<article>
<header>
<h1>First headline</h1>
<h3>Second headline</h3>
<p>More info about author</p>
</header>
<p>Some text outside of header</p>
</article>
Tag <footer>
The <footer> tag defines the end of the document or section. It usually contains information about the author, copyright, contact information, site map, links to return to the top of the document, other related documents.
Example:
<footer>
<p>Author: Ivan Zarkovic</p>
<p>Contact: <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a>. </p>
</footer>
Address on the page
Tag <address> is usually written in the bottom header of the page (footer). It provides information about the author/owner of the document.
Example:
<address>
Visit us: Novi Beograd
<br>
Jurija Gagarina 263,
<br>
Belgrade, 11070
<br>
Serbia
</address>
Developer tags
- <code> - Represents a computer code (font: Courier)
- <kbd> - Defines the keyboard text
- <var> - Indicates a variable
These were the basic terms and tags of a standard HTML5 document that were generally accepted and used by developers. I hope this tutorial helped you.
