HTML stands for Hypertext Markup Language. It is the standard language used to create web pages. It is the most widely used language to design web pages. HTML is the basic building block of the web. It is used for defining the structure of the content of a web page.
HTML is essential for web development, as it forms the backbone of web content and is often used in conjunction with CSS (Cascading Style Sheets) and JavaScript to create fully functional and styled web applications.
Key Features of HTML:
Elements and Tags: HTML is composed of elements, which are defined by tags. For example, <p> is a tag that defines a paragraph, and <h1> defines a top-level heading.
Attributes: HTML elements can have attributes that provide additional information about the element. For example, the <a> tag (anchor tag) can have an href attribute that specifies the URL of the link.
Structure: HTML documents have a hierarchical structure, typically starting with a <!DOCTYPE html> declaration, followed by the <html>, <head>, and <body> tags. The <head> contains meta-information about the document, while the <body> contains the content that is displayed to users.
Hyperlinks: HTML allows the creation of hyperlinks, enabling users to navigate from one page to another.
Multimedia: HTML supports the embedding of images, audio, and video, allowing for rich multimedia content on web pages.
Advantages of HTML (Pros of HTML):
HTML (Hypertext Markup Language) offers several advantages that contribute to its widespread use in web development. Here are the main advantages (pros) of HTML:
Easy to Learn and use: HTML is a beginner-friendly language. Its syntax is very simple with plain English-like tags. Beginners can quickly understand and build web pages.
Platform Independence: HTML code is platform-independent, meaning it can be created and viewed on various operating systems and devices without compatibility issues. HTML files can run on any operating system (Windows, Mac, Linux, Android, iOS).
Compatibility: HTML is highly compatible with other technologies and languages commonly used in web development, such as CSS (Cascading Style Sheets) for styling and JavaScript for interactivity. This compatibility enables developers to create rich, dynamic web experiences.
Hyperlinking: HTML enables the creation of hyperlinks, allowing users to navigate between different web pages and resources seamlessly. This interconnectivity is a fundamental aspect of the web.
Multimedia Support: HTML supports the embedding of images, audio, and video, enabling rich multimedia experiences on web pages.
Disadvantages of HTML (Cons of HTML)
While HTML (HyperText Markup Language) has many advantages, it also has some disadvantages and limitations. Here are the main disadvantages (cons) of HTML:
Static Nature: HTML alone creates static web pages. To make pages dynamic and interactive, we need CSS, JavaScript etc. languages.
Limited Functionality: HTML alone cannot perform complex tasks or calculations. For interactive features, developers must rely on JavaScript or other programming languages, which can complicate development.
Limited Styling Options: HTML by itself has very basic styling (fonts, colors, alignment). For proper design, we must use CSS.
Browser Compatibility Issues: While HTML is generally supported across browsers, there can still be inconsistencies in how different browsers render HTML elements, especially with older versions or less common browsers. Some tags or features may not work the same way in all browsers.
Dependency on Other Technologies: To create fully functional web applications, HTML must be used in conjunction with other technologies like CSS and JavaScript. This can increase the learning curve for new developers.
Tags in HTML:
HTML tags are the fundamental components used to structure and format content on web pages. They provide instructions to web browsers on how to display various elements, such as text, images, links, and other media.
Tags are commands enclosed in angle brackets (e.g., <p> for a paragraph) to mark-up content. HTML (HyperText Markup Language) uses tags to define elements within a web page. Notes: HTML tags are not case sensitive.
Types of HTML Tags:
There are two kinds of tags:
- Paired (Container) Tags
- Unpaired (Empty) Tags
Paired (Container) Tags:
Most HTML tags come in pairs: an opening tag and a closing tag like <HTML> and </HTML>. Such types of tags are called Paired or Container Tags. The closing tag is identical to the opening tag but includes a forward slash before the tag name (e.g., <p> and </p>).
Format of Paired (Container) Tag:
<tagname> Content </tagname>
Example:
<h1>Hello</h1>
<p>Paragraph text</p>
Unpaired (Empty) Tags:
An unpaired or empty tag refers to a tag, which does not have an ending (closing) tag.
Format of Unpaired/Empty Tag:
<tagname>
Example:
<BR> <!– Line break –>
<img src=”image.jpg” alt=”Image”>
<hr> <!– Horizontal line –>
Elements and Attributes:
In HTML, elements and attributes are fundamental concepts that define the structure and behavior of web pages. Understanding HTML elements and attributes is crucial for creating well-structured and functional web pages. Elements define the content and layout, while attributes provide additional information and control over the behavior and appearance of those elements. Here’s a detailed explanation of both:
HTML Elements
An HTML element is a component of a web page defined by a start tag, content, and an end tag such as headings, paragraphs, and images. An element is everything between the opening tag and closing tag (including the content).
Structure of an HTML Element
An HTML element typically consists of:
Start Tag: The opening tag that defines the element, e.g., <p>.
Content: The text or other elements contained within the element, e.g., This is a paragraph.
End Tag: The closing tag that indicates the end of the element, e.g., </p>.
Example of Elements:
<p>This is a paragraph.</p>
<!– Paragraph element –>
<h1>Hello World</h1>
<!– Heading element –>
<img src=”cat.jpg” alt=”Cat”>
<!– Image element –>
HTML Attributes
Attributes are properties that provide additional information about elements. An attribute is used to define the characteristics of an element and is always placed inside the element’s opening tag. Attribute allows us to specify how web browsers should treat a particular tag.
Attributes are important part of HTML elements. They usually come in name/value pairs, separated by an equals sign. Attributes can modify the behavior or appearance of an element.
Example of Attributes:
<img src=”image.jpg” alt=”A beautiful landscape”>
Here, src and alt : attributes
src: Specifies the source URL for an image in an <img> tag.
alt: Provides alternative text for images, improving accessibility.
Structure of HTML Document
Every HTML document or page has a basic structure. An HTML document starts and end with <HTML> and </HTML> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections:
- Header Section
- Body Section
Header Section: This section defines the <HEAD>…</HEAD> elements, which contain information about the document such as title of the document, author of the document etc.
Body Section: This section defines the <BODY>…</BODY> elements, which contain the content of the document that we see on the screen.
Example:
<HTML>
<HEAD>
<TITLE>MY FIRST WEBPAGE</TITLE>
</HEAD>
<BODY>
<H1>Hi….WELCOME TO HTML</H1>
</BODY>
</HTML>
Creating HTML Document:
Creating an HTML document is a very easy process. To create an HTML document, generally we need the following software tools:
- Text Editor
- Web Browser
Text Editor: To write or edit the HTML code, we need a simple text-editor,like Notepad. We can also use some professional HTML editors like Notepad++, Adobe Dreamweaver, Microsoft FrontPage etc.
Web Browser: The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented or displayed to the user.
Here are the simple steps to create a basic HTML document:
Step 1: Open Notepad / Notepad++
Step 2: Write HTML Code
Step 3: Save HTML Code. Save the HTML file with either the .htm or the .html file extension under an appropriate folder.
Step 4: Run HTML File in Web Browser
HTML Document Tags:
All HTML document should include at least these tags:
- <HTML>
- <HEAD>
- <TITLE>
- <BODY>
These tags define what type of document it is, and the major sections of the document.
<HTML>:
The <HTML>tag defines the top-most element, identifying it as an HTML document. It is a container tag that has a start and an end tag and all the other tags nested within it. The <HTML>tag is the main container or containing element for the whole HTML document. It represents the root of an HTML document. It simply tells the browser that this is an HTML document. Each HTML document should have one <HTML>tag and each document should end with a closing </HTML>tag.
Syntax:
<HTML>
…………
</HTML>
<HEAD>:
The <HEAD> tag contains general information about the HTML file. The <HEAD> tag is nested within the HTML tag. It simply defines the header section of the HTML document. Usually, the only tag contained within the head tag is the title tag. Other tags also can be contained within the <HEAD> tag but they are used less often.
Syntax:
<HTML>
<HEAD>
…………
</HEAD>
</HTML>
<TITLE>:
The <TITLE> tag is used to set a title for every HTML document. It represents the document’s title or name. The <TITLE> tag defines a title in the browser’s title bar. It is always good to use titles that identify the document. <TITLE> tag is nested within the <HEAD> tag. It identifies our page to the rest of the world. The tag output is displayed on web browsers title bar but does not appear as part of the page.
Syntax:
<HTML>
<HEAD>
<TITLE>
Title of the Web Page
</TITLE>
</HEAD>
</HTML>
<BODY>:
The <BODY>tag appears after the <HEAD>tag. It defines the body section of HTML document i.e., it simply defines the document’s body. The <BODY>tag contains the web pages actual content such as text, hyperlinks, images, tables, list etc. The <BODY> tag can have the following attributes.
<BODY> Attributes:
| Attributes | Value | Description |
| bgcolor | color_name | Sets the background color of a document |
| background | filename or URL | Sets the background image of a document |
| text | color_name | Sets the color of the text in a document |
| link | color_name | Sets the color for unvisited links in a document |
| alink | color_name | Sets the color for active links in a document |
| vlink | color_name | Sets the color for visited links in a document |
Syntax:
<HTML>
<HEAD>
<TITLE>
My First Web Page
</TITLE>
</HEAD>
<BODY>
………………
</BODY>
</HTML>
Example 1:
<HTML>
<HEAD>
<TITLE>Attributes of the Body Tag</TITLE>
</HEAD>
<BODY BGCOLOR= “AQUA” TEXT= “RED” >
This is an HTMLPage
</BODY>
</HTML>
Example 2: Using a Background Image
<HTML>
<HEAD>
<TITLE>
Attributes of the Body Tag
</TITLE>
</HEAD>
<BODY BACKGROUND= “nature.jpg”>
This is an HTML Page
</BODY>
</HTML>
HTML Headings:
Headings are important in HTML documents. Almost every document starts with a heading. Headings break a document into sections. We can use different sizes for headings. HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
We can use headings to organize our web into hierarchical levels. The top-level heading (H1) actually is the title of our page, i.e., it appears in a browser window at the top of the web page. We can also use a second level heading (denoted by the H2 tag) to define a major division in the page, and a third level heading (using the H3 tag) to define a sublevel division within a major division. The font size decreases as the heading level increases. (Default sizes for first-through sixth-level headings are, respectively, 24, 18, 14, 12, 10, and 8 point font).
Align Attribute in Heading Element:
The align attribute is used to specify the alignment of the heading element.
Syntax
<h1 align=”left | right | center | justify”>
Example:
<HTML>
<HEAD>
<TITLE>Headings in HTML</TITLE>
</HEAD>
<BODY>
<H1 align= “center”> This is a top-level Heading</H1>
<H2> This is a top-level Heading</H2>
<H3> This is a top-level Heading</H3>
<H4> This is a top-level Heading</H4>
<H5> This is a top-level Heading</H5>
<H6> This is a top-level Heading</H6>
</BODY>
</HTML>
HTML Paragraphs:
In HTML, paragraphs are defined with the <p> tag. The <p> tag is a container element, but with an implied ending. We do not have to include the </p> end tag. Any following start tag that defines a new block element implies the end of the tag. So, when we use the <p> tag, just insert the <p> start tag at the beginning of a paragraph but leave of the </p> at the end.
Align Attribute of Paragraph Element:
The align attribute was used to specify how paragraph text should be aligned horizontally within the <p> element.
| Attribute Values | Description |
| left | It sets the text left-align. |
| right | It sets the text right-align. |
| center | It sets the text center-align. |
| justify | It is used to set text to both left and right margin of the page. |
Example:
<HTML>
<HEAD>
<TITLE> Paragraphs in HTML</TITLE>
</HEAD>
<BODY>
<H1> Introduction to HTML </H1>
<P align= “center”> HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.
<P align= “right”> Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.
<P align= “justify”> Markup language describes how HTML works. Markup languages are the languages that build the web. With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents.
</BODY>
</HTML>
HTML Line Breaks:
To break a line <BR> tag is used. Whenever we use the <BR> tag, anything following it starts on the next line. The <BR> tag is an empty tag, it has no end tag.
Example:
<p> For further details contact <BR>
E. Begum <BR> Tinsukia<BR> Assam
HTML Horizontal Rule:
The HTML <HR> tag is used for creating a horizontal line. The <HR> tag is a stand-alone or empty tag that allows us to add horizontal rules to web pages. A horizontal rule is a good option to divide a page into sections or to separate headers and footers from the rest of the page.
Changing the Height of a Horizontal Rule:
To change the height of a horizontal rule, the SIZE attribute value in the <HR> tag can be used. The value we set is the rule’s height or thickness in pixels. The following example is used for creating a horizontal rule that is 10 pixels thick.
Example:
<P>This is a normal rule:
<HR>
<P>This is a 10-pixel thick horizontal rule:
<HR SIZE= “10”>
Changing the width of a Horizontal Rule:
We can change the width of a horizontal rule, either by setting the width in actual pixels or by specifying a percentage of the total width of the browser window. By default, horizontal rules are centered in the browser window. Following is an example of creating a 15-pixel sized horizontal rule with a width that is 75 percent of a browser’s window.
Example:
<P>This is a 75% wide, 15-pixel thick horizontal rule:
<HR WIDTH= “75%” SIZE= “15” >
Changing Between Shaded and Unshaded Horizontal Rule:
The default setting for a rule is “shaded”. To set an “unshaded” horizontal rule, add the NOSHADE attribute to the <HR>tag.
Example:
<P>This is an unshaded, 15-pixel thick horizontal rule:
<HR>
<P>This is a 10-pixel thick horizontal rule:
<HR SIZE= “15” NOSHADE>
Setting the Alignment of a Horizontal Rule:
The ALIGN attribute in the<HR> tag is used to left-align or right-align a horizontal rule (center alignment is the default)
Example:
<P>This is a left-aligned, 50% wide, 20-pixel thick horizontal rule (Shaded)
<HR ALIGN= “LEFT” WIDTH= “50%” SIZE= “20”>
<HR> Attributes:
| Attributes | Value | Description |
| Size | pixels or % | Specifies the height of a <HR> element |
| Width | pixels or % | Specifies the width of a <HR> element |
| Align | Left/ center/ right | Specifies the alignment of a <HR> element |
| Color | color_name | Specifies the color of the <HR> element |
| Noshade | noshade | Specifies that <HR> element should render in one solid color (noshaded), instead of a shaded color. |
Example: HTML Line Breaks and Horizontal Rule
<HTML>
<HEAD>
<TITLE>Line Break and Horizontal Rule</TITLE>
</HEAD>
<BODY>
GOOD MORNING <BR>
HAVE A NICE DAY<BR>
<HR ALIGN= “LEFT” SIZE= “10%” WIDTH= “80%”>
GOOD NIGHT <BR>
SWEET DREAMS<BR>
<HR ALIGN= “LEFT” SIZE= “20%” WIDTH= “90%” NOSHADE COLOR= “BLUE”>
</BODY>
</HTML>
HTML Comments:
Comments can be inserted in the HTML code to make it more readable and understandable. We can use comments to explain code, which can help us when we edit the source code at a later stage. This is especially useful if we have a lot of code. Comments are ignored by the browser and are not displayed.
HTML comments line are indicated by the special beginning tag <!–and ending tag –>. We can comment multiple lines by the special beginning tag <!–and ending tag –>.
Example:
<HTML>
<HEAD>
<TITLE>HTML Comments </TITLE>
</HEAD>
<BODY>
<!– Comments are ignored by the browser –>
<!– This Single Line Comment will not be displayed.–>
<!– This Multi Line Comment
will not be displayed
–>
<P> This is a regular paragraph
</BODY>
</HTML>
Text Formatting (Formatting Texts):
When it comes to formatting a web page using HTML code, we can think of it in the same way we would look at formatting a document formatted by a word processor.
HTML uses tags like <B> and <I> for formatting output, like bold or italic text. These HTML tags are called Formatting tags.HTML has two ways to include italic or bold text on web page. The first way involves using literal tags: the B (Bold) tags and I (Italic). The second way is to use logical tags: the EM (emphasis) and Strong tags. Most browsers displays the I (italic) and EM (Emphasis) tags identically, just as they display the B (Bold) and strong tags identically.
The following table depicts a list of Formatting tags commonly used in HTML:
| Tag | Description |
| <B> | To Bold Text |
| <I> | To Italic Text |
| <U> | To Underline Text |
| <STRONG> | To define important text, same visual effect as the as the <B> tag. |
| <EM> | Emphasizes the text, provides same visual effect as the <I> tag. |
| <BIG> | To define Bigger Text |
| <SMALL> | To define Smaller Text |
| <SUB> | Formats text as subscript. |
| <SUP> | Formats text as superscript. |
| <MARK> | To mark or highlight the important text |
| <STRIKE> | To strike through text |
| <DIV> | To set alignment of text/Image as Left/Center/Right |
| <CENTER> | To set text/image as Center Aligned |
| <DEL> | To identify text that has been deleted from a document but retained to show the history of modifications made to the document. |
| <INS> | used to identify text that has been inserted into a document. It is often paired with a <del> element which identifies deleted text replaced by the text contained in the <ins> element. |
Example:
<HTML>
<HEAD>
<TITLE>Formatting Texts</TITLE>
</HEAD>
<BODY>
<B>Bold Text</B><BR>
<I>Italic Text</I><BR>
<U>Underline Text</U><BR>
<STRONG> Strong Text usually rendered bold</STRONG><BR>
<EM>Emphasized text, usually rendered italic</EM><BR>
<BIG> Puts text in bigger font</BIG><BR>
<SMALL> Puts text in smaller font</SMALL><BR>
H<SUB>2</SUB>O<BR>
X<SUP>2</SUP>Y<BR>
<STRIKE>Strike through text</STRIKE><BR>
<CENTER>Center-Aligned</CENTER><BR>
<DIV ALIGN= “LEFT”>Left-Aligned</DIV><BR>
</BODY>
</HTML>
<ADDRESS>, <BLOCKQUOTE> and <PRE> Tags:
The <ADDRESS> tag is used to write addresses and contact information in a document. It generally appears in italics.
Example:
The <BLOCKQUOTE> tag indents the entire paragraph from the left as well as right. It is mainly used to write quotations. The <BLOCKQUOTE> tag double-indents a block of text from both margins.
Example:
The <PRE> tag displays the text exactly in the same way, as we typed it. One of the primary uses of the <PRE> tag is to display text in a tabular or columnar format in which we want to make sure that the column remains properly aligned.
Example:
Working with Texts:
Text alignment:
We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.
Example:
To center align a level-two heading
<H2 ALIGN= “CENTER”> Heading </H2>
To right align a level-two heading
<H2 ALIGN= “RIGHT”> Heading </H2>
CENTERING TEXT and Other Elements using the <CENTER> tag:
The <CENTER> tag is used to center-align text and other document elements.
Example:
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 >Level-One Heading</H1>
<p> This paragraph and the level-one heading above it is centered using the center tag. We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.
</CENTER>
</BODY>
</HTML>
Specifying Fonts and Font sizes
The <FONT> tag allows to specify the size and color of a section of text.
The following table describes the tag and attributes one may use to set font characteristics.
| Tag/Attribute | Description |
| <FONT> | Sets font characteristics for text |
| SIZE= “………” | Specifies font sizes from 1 to 7, 3 is the default size. |
| COLOR= “………” | Specifies font colour. This colour applies only to the text surrounded by <FONT> tag. |
| FACE= “………” | Specifies type faces. |
Setting Font Sizes:
The <FONT> tag uses the SIZE attribute to change the size of a font. There are seven “absolute” (or fixed) sizes, numbered from 1 to 7, that we can set using the SIZE attribute of the <FONT> tag. The default is 3, which is the same as regular paragraph text; 1 is the smallest and 7 is the largest.
Example:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<P>
<FONT SIZE= “1”> Font Size 1.</FONT> <BR>
<FONT SIZE= “2”> Font Size 2.</FONT> <BR>
<FONT SIZE= “3”> Font Size 3.</FONT> <BR>
<FONT SIZE= “4”> Font Size 4.</FONT> <BR>
<FONT SIZE= “5”> Font Size 5.</FONT> <BR>
<FONT SIZE= “6”> Font Size 6.</FONT> <BR>
<FONT SIZE= “7”> Font Size 7.</FONT> <BR>
</BODY>
</HTML>
Changing the FONT Color:
The <FONT> tag uses the COLOR attribute to change the color of a font.
Example:
<HTML>
<HEAD>
<TITLE> Paragraphs in HTML</TITLE>
</HEAD>
<BODY>
<H1> HTML </H1>
<P> <FONT SIZE= “5” COLOR= “GREEN” FACE= “MONOTYPE CORSIVA”>Welcome to Beautiful World</FONT>HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.
<P> <FONT SIZE= “6” COLOR= “BLUE” FACE= “MV BOLI”>Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.
</BODY>
</HTML>
Inserting Special Characters:
In HTML, special characters that have special meanings (such as <, >, &, etc.) need to be represented using character entities to avoid parsing errors. There are literally hundreds of special character entities currently available. HTML special characters were introduced with HTML 4.0 in December 1997. They provided a standardized way of representing characters outside the commonly used ASCII encoding.
In HTML, these special characters are referred to as entities, and they are created by using codes beginning with an ampersand (&), followed by an entity name or an entity number, and ending with a semicolon. The entity names and entity numbers both represent the same thing; we can use either one.
HTML special characters are assigned an entity name and an entity number, both of which can be used to render the character in an HTML document. These codes and names have a specific format, which is generally represented as &#xxxx; for numbers and &xxxx; for names, where xxxx is either a name or a number. Numbers are valid in both decimal and hexadecimal format.
For example, the code for a right-facing arrow, also known as the ‘greater than’ sign, is > for the entity number and > for the entity name. Inserting the code for either of those into an HTML document will render a ‘>’ when displayed to the user.
Common HTML Special Characters:
| Character | Description | Number code | Entity code |
| “ | Double quotation | " | " |
| ‘ | Single quoation | ' | ' |
| & | ampersand | & | & |
| © | copyright | © | © |
| ® | Registered symbol | ® | ® |
| ™ | trademark | ™ | ™ |
| non-breaking space |   | | |
| < | less than | < | < |
| > | greater than | > | > |
Note: Entity names are case sensitive.
Example:
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1> Special Characters </h1>
<p>Copyright symbol: ©</p>
<p>Ampersand symbol: &</p>
<p>Trademark symbol: ™</p>
<p>Registered symbol: ®</p>
</body>
</html>
Adding Emojis to Webpage:
We can also display emojis using an entity code. All emojis have a numeric entity code in HTML, but not all of them have a named entity code. Some examples include:
| Symbol | Numeric Entity Code |
| 😀 | |
| 😁 | |
| 😂 | |
| 😃 | |
| 😄 | |
| 😅 | |
| 😆 | |
| 😇 | |
| 😈 | |
| 😉 | |
| 😐 | |
| 😑 | |
| 😒 | |
| 😓 | |
| 😔 | |
| 😕 | |
| 😖 | |
| 😗 | |
| 😘 | |
| 😙 | |
| 😠 | |
| 😡 | |
| 😢 | |
| 😣 | |
| 😤 | |
| 😥 | |
| 😦 | |
| 😧 | |
| 😨 | |
| 😩 | |
| 😰 | |
| 😱 |
Example:
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Smiling Face: 😃</p>
<p>Laughing Face: 😆</p>
</body>
</html>