Basics of HTML
In this article, we explain the basics of HTML.
This explains the main tags such as DOCTYPE declaration, <html>, <head>, and <body> tags. It also describes tags, attributes, and special characters.
YouTube Video
Basics of HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>At the beginning of the file, we declare that this is an HTML5 document, indicating that it follows the rules of HTML5.
-
<html>The
<html>tag is the outermost element in an HTML document that wraps the entire content. Each HTML file contains only one<html>tag, and all other tags are nested inside this tag. Thelang="en"inside the opening<html>tag is called an attribute and informs the browser that the document is written in English. This helps notify screen readers and search engines of the document's language. -
<head>The
<head>tag defines the metadata (information) for the page. This includes the page title, character encoding, and responsive design settings. Responsive design refers to a method designed for websites or apps to adapt and display well on various devices and screen sizes. This allows users to comfortably view content on different devices such as smartphones, tablets, and desktops.<meta charset="UTF-8">sets the document's character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">is a setting that optimizes the display for mobile devices. The page adjusts to the width of the device's screen.<title>represents the title of the page displayed in the browser tab. In this example, the title 'Basics of HTML' is set. -
<body>The
<body>tag contains the part that displays content to users. Within this tag, text, images, links, etc. are written. -
<main>The
<main>tag represents the main content of the page. This includes headings and paragraphs. -
<h1>The
<h1>tag represents the most important heading on the page. It's common to use the<main>tag and<h1>tag only once in a document. -
<p>The
<p>tag represents a paragraph. -
<!-- Comment -->You can write comments in HTML in this format. Since client-side HTML can be viewed by anyone, do not include sensitive information such as passwords or API keys in comments.
HTML has many tags, but pay attention to the following points here. An HTML file consists of a DOCTYPE declaration and one <html> tag. The <html> tag contains one <head> tag and one <body> tag. In HTML, all tags are contained within the <html> tag, expressing the structure of text through parent, child, and sibling relationships, similar to a tree structure. When writing HTML, focus on the document structure as well.
Tags and Attributes
Next, let's take a look at HTML tags and attributes.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tags are enclosed in angle brackets (<, >) and typically consist of a pair of opening and closing tags. However, there are also single tags, such as the <meta> tag and <img> tag, which do not contain content. Single tags do not require a closing tag.
Tags can have attributes, which provide additional information to the tag. Attributes are written inside the opening tag in the format attributeName="value".
Here, <div> is referred to as a tag, and <div>Content</div> as an element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Common attributes in HTML include id, class, and style. The id attribute is used to give an element a unique identifier, and there can only be one element with the same id on a page. It's useful when manipulating specific elements with JavaScript or CSS. The class attribute allows you to group multiple elements with CSS or JavaScript by assigning a class name. You can assign the same class to multiple elements, allowing styles to be shared. The style attribute specifies CSS styles inline for an element. Normally, styles are defined in an external stylesheet or within the <style> tag, but this attribute is used when you want to specify styles directly for individual elements.
Special characters in HTML
Next, let's look into special characters in HTML.
In HTML, there are special characters used to display specific symbols and characters. These special characters are called entities. Special characters start with & (ampersand), followed by a name or number, and end with ; (semicolon).
Representative special characters in HTML
Here are some common special characters.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Examples of using special characters in HTML
Particularly, angle brackets (<, >) and double quotes need to be used correctly in HTML.
Angle brackets (<, >) and double quotation marks should be represented as special characters in HTML, as shown below.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML Versions
Let's take a look at HTML versions here.
HTML versions have evolved to define the structure and functionality of web pages. Here are the main versions:.
-
HTML 1.0 (1993)
The first HTML version had only very basic markup features. It defined elements such as links, headings, paragraphs, and lists.
-
HTML 2.0 (1995)
The first standardized version, with more elements added, including support for forms and tables.
-
HTML 3.2 (1997)
More layout features were added, allowing the embedding of style elements and scripts. Additionally, layout using the
<table>element became common. -
HTML 4.01 (1999)
The separation of structure and presentation advanced, and CSS was introduced. The creation of standards-compliant sites became recommended. Moreover, internationalization and accessibility of documents were improved.
-
HTML5 (2014)
The latest major version, introducing support for video and audio, canvas, local storage, geolocation, and other new APIs. It is mobile-friendly, enabling the development of more interactive web applications.
HTML5.2 is a version of HTML recommended in 2017, and is an improved version of HTML5. Since HTML5.2, it is continuously updated as the HTML Living Standard, rather than having a static version number.
HTML has evolved through these versions, developing into more flexible and powerful web technology.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.