HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It is a markup language, which means it uses tags or elements to define the structure, layout, and content of a web page. HTML documents are plain text files that can be created using any text editor and can be viewed in a web browser.
HTML consists of a series of elements, each represented by a tag, such as <html>, <head>, <body>, <p>, <h1>, <a>, <img>, etc. These tags are used to define the structure and layout of the web page, such as headings, paragraphs, links, images, and other types of content.
HTML also supports attributes which provide additional information or control the behavior of the element. For example, the “src” attribute is used to specify the source of an image, and the “href” attribute is used to specify the destination of a link.
HTML has gone through several versions since its creation, with the latest being HTML5. HTML5 introduced new elements and attributes that make it easier to create and structure web content, such as the <video> and <audio> elements for multimedia, and the <canvas> element for drawing graphics. It also introduced new semantic elements, like <header>, <nav>, <main>, <article>, <aside>, <footer>, <figure>, <figcaption>, and <mark>, which help to define the structure of the web page.
HTML is constantly evolving, and new features and capabilities are added with each new version to improve the functionality and accessibility of web pages.
What is A Markup Language?
A markup language is a type of computer language used to create and define the structure and layout of documents, such as web pages, electronic books, and other types of digital content. It uses tags or elements to mark certain parts of the text, indicating how they should be displayed or interpreted. The tags are not visible to the end-user, but are used by the software to format and display the content.
HTML (Hypertext Markup Language) is the most widely used markup language for creating web pages. It uses tags such as <p> for paragraphs, <h1> for headings, <a> for links, and <img> for images, to define the structure and layout of a web page.
XML (Extensible Markup Language) is another example of a markup language, it is used to create documents with custom tags that can be used to define the structure and meaning of the content.
Markup languages differ from programming languages, as they don’t contain any logic or processing instructions, they simply define how the content should be displayed. It’s used in conjunction with other languages such as CSS (Cascading Style Sheets) and JavaScript to enhance the presentation and behavior of the web page.
What is An HTML Tag?
An HTML tag is a markup code used to define the structure, layout, and content of a web page. It consists of a pair of angle brackets (< and >), with a keyword inside that describes the type of element.
For example, the <html> tag is the container for all other HTML elements on the page, and the <head> tag contains metadata about the document, such as the title of the page. The <body> tag contains the visible content of the page, such as text, images, and links.
Each HTML tag has a specific purpose and some have attributes that can be used to provide additional information or to control the behavior of the element. For example, the <a> tag is used to create links and the “href” attribute is used to specify the destination of the link.
HTML tags can be nested inside one another to create a hierarchical structure, which helps to organize and present the content in a logical and meaningful way.
It’s important to use the correct HTML tags, with the correct syntax, to ensure that the web page is properly structured and can be correctly interpreted by web browsers and other devices such as search engine crawlers or assistive technologies
HTML Documents
An HTML document is a text file that contains the structure and content of a web page. It is written using HTML tags and elements, which are used to describe the structure and layout of the page. Every HTML document must start with a declaration that it is an HTML document, using the <!DOCTYPE> tag. The <!DOCTYPE> declaration represents the document type and assists browsers in correctly displaying web pages.
It must appear only once, at the top of the page (before any HTML tags).
The basic structure of an HTML document consists of a head and a body. The head contains information about the document, such as the title of the page (displayed in the browser’s title bar or tab), and meta information such as keywords and descriptions used by search engines. The body contains the content of the page, including text, images, and other elements.
An HTML document can also include links to other pages or resources using the <a> tag, and can embed multimedia using the <img>, <video>, and <audio> tags. it also can use CSS and JavaScript to control the presentation and behavior of the page.
A basic example of a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
This document contains a head with a title, and a body with an h1 heading and a paragraph.
In this tutorial, we will go over some fundamental HTML examples.
Don’t worry if we use tags you haven’t seen before.
HTML HEADINGS
HTML headings are used to create different levels of headings and subheadings on a web page. There are six levels of headings, from <h1> to <h6>, with <h1> being the highest level (most important) and <h6> the lowest. The <h1> to <h6> tags are used to define HTML headings.
The headings are used to structure the content of the page, making it easier to read and understand. Search engines also use headings to understand the structure and content of a web page.
Here’s an example of how headings are used in HTML:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
It’s important to use headings correctly, by creating a logical and hierarchical structure, and by using the appropriate level for each heading. The <h1> tag should be used for the main title or heading on the page, and subsequent headings should be used in descending order of importance.
It’s also best practice to use headings only for actual headings and not as a way to make text larger or bold, as this can make it harder for screen readers and search engines to understand the structure of the page.
HTML PARAGRAPHS
HTML paragraphs are used to create blocks of text on a web page. The paragraph element is represented by the <p> tag. Any text between the opening <p> tag and the closing </p> tag will be displayed as a separate paragraph.
Here’s an example of how paragraphs are used in HTML:
<p>This is the first paragraph.</p><br>
<p>This is the second paragraph.</p>
In HTML, a line break is represented by the <br> tag, which can be used to create a new line within a paragraph. However, it’s generally better to use the CSS property ‘line-height’ to control the spacing between lines of text.
<p>This is the first line.<br>This is the second line.</p>
When creating paragraphs, it’s important to use semantic elements and attributes to clearly describe the content and its structure. It’s also good practice to keep the text in paragraphs short and to the point, as it can be harder to read long blocks of text on a screen.
HTML LINKS
HTML links, also known as hyperlinks, are used to create links between web pages. The link element is represented by the <a> tag, and the destination of the link is specified using the href attribute.
Here’s an example of how links are used in HTML:
<a href="http://www.example.com">Visit our website</a>
This creates a link that says “Visit our website” and when clicked, it takes the user to the specified website “http://www.example.com”.
Links can also be used to link to other pages within the same website or to specific locations on the same page. For example:
<a href="about.html">About Us</a>
This creates a link to an “about.html” page within the same website.
<a href="#contact">Contact Us</a>
This creates a link to a specific location on the same page that has a matching “id” attribute, in this case “contact”.
Links can also be used to open a new tab or window by using the target attribute and set the value to “_blank”.
<a href="http://www.example.com" target="_blank">Visit our website</a>
It’s important to use links correctly, by providing clear and descriptive link text, and by linking to relevant and trustworthy sources. It’s also good practice to use links only for actual links and not as a way to change the color of text, as this can make it harder for users to understand the purpose of the link.
HTML Images
HTML images are used to embed images on a web page. The image element is represented by the <img> tag, and the source of the image is specified using the src attribute. The <img> tag is a self-closing tag, which means it doesn’t have a closing tag.
Here’s an example of how images are used in HTML:
<img src="image.jpg" alt="A description of the image">
This will display the image with the source “image.jpg” and if the image fails to load it will display the “alt” text “A description of the image”.
In addition to the “src” and “alt” attributes, the “img” tag has other attributes such as “width” and “height” which can be used to specify the dimensions of the image, and “style” which can be used to specify the CSS styles for the image.
<img src="image.jpg" alt="A description of the image" width="100" height="100" style="border:1px solid #000000;">
It’s important to use images correctly, by providing clear and descriptive “alt” text, and by optimizing the images to reduce the loading time. It’s also good practice to use images only for actual images and not as a way to create blank spaces, as this can make it harder for users to understand the purpose of the image.
How to View HTML Source Code?
There are several ways to view the HTML source code of a web page, depending on the browser you are using.
In Google Chrome, Firefox, and Microsoft Edge, you can right-click on an empty area of the web page and select “View page source” or “Inspect”. This will open the developer tools, where you can see the HTML source code on the “Elements” tab.
In Safari, you can right-click on an empty area of the web page and select “Inspect Element”. This will open the developer tools, where you can see the HTML source code on the “Elements” tab.
In Internet Explorer, you can right-click on an empty area of the web page and select “View source”. This will open the source code in a new window.
You can also use keyboard shortcuts to view the source code of the page, such as:
Chrome, Firefox, and Edge: press ctrl+U
Safari: press cmmand+alt+U
Internet Explorer: press ctrl+U
Some browsers like Firefox have add-ons that you can install to view the source code, such as “Web Developer” or “Firebug”.
It’s important to note that the source code you view this way may differ from the original source code of the page, because it may have been modified by the browser or by other scripts that run on the page.
How To Inspect An HTML Element?
Inspecting an HTML element allows you to see the HTML source code, CSS styles, and layout of a specific part of a web page. Here’s how to inspect an HTML element in different browsers:
In Google Chrome, Firefox, and Microsoft Edge:
Right-click on the element you want to inspect and select “Inspect” or press “Ctrl+Shift+I” (or “Cmd+Opt+I” on Mac) to open the developer tools.
The element you selected will be highlighted in the HTML source code on the “Elements” tab. You can also see the applied CSS styles in the “Styles” tab and the layout in the “Layout” or “Computed” tab.
In Safari:
Right-click on the element you want to inspect and select “Inspect Element”.
The element you selected will be highlighted in the HTML source code on the “Elements” tab. You can also see the applied CSS styles in the “Styles” tab and the layout in the “Layout” tab.
It’s important to note that inspecting elements can be useful for debugging and troubleshooting, as well as optimizing and styling your website.
Inspecting elements also gives you the ability to modify the HTML and CSS on the fly, allowing you to test changes without making them permanent, which can be useful for testing different design options or for troubleshooting layout issues.