HTML stands for Hypertext Markup Language. It is the standard markup language used to create and structure content on the web. HTML consists of a series of tags and attributes that define how web browsers should display content such as text, images, videos, and other multimedia on a web page. HTML is an essential building block of the World Wide Web and is used by web developers to create websites and web applications.
HTML Document:
An HTML document, also known as a web page, is a file written in HTML markup language that contains content such as text, images, videos, and other multimedia elements. An HTML document is structured using a set of tags and attributes that define the layout, formatting, and content of the page.
HTML Tag:
In HTML, a tag is a markup element that defines the structure and content of a web page. HTML tags are used to format and style text, images, and other multimedia elements, and to provide structure to the content of a web page.
HTML tags are enclosed in angle brackets < >, and may have attributes that provide additional information about the element. The most commonly used HTML tags include <head>, <body>, <div>, <p>, <h1> to <h6>, <img>, <a>, and many others.
Types of Tag:
- Container tags or paired tags: These are tags that require both an opening and closing tag to define the content that goes inside. The content is placed between the opening and closing tags. Examples of container tags include <div>, <p>, <span>, and <ul>. Here’s an example of a container tag:
<div>This is some content inside a container tag.</div>
- Empty or Self-closing tags or standalone tags: These are tags that don’t require a closing tag because they don’t have any content that goes inside them. They are also known as self-closing tags or void elements. Examples of empty tags include <img>, <br>, and <input>. Here’s an example of an empty tag:
<img src=”image.jpg”>
In this example, the <img> tag is used to display an image on the web page. The src attribute specifies the URL of the image file, and the alt attribute provides alternative text that is displayed if the image can’t be loaded. Since the <img> tag doesn’t have any content, it is self-closing.
Basic Structure of HTML document:
The basic structure of an HTML document consists of the following elements:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!– Page content goes here –>
</body>
</html>
<!DOCTYPE html> – This declaration specifies the version of HTML that the document is using. In this case, it is HTML5.
<html> – This tag defines the root of the HTML document.
<head> – This tag contains metadata about the document, such as the document’s title, author, and links to external stylesheets or scripts.
<title> – This tag specifies the title of the document, which is displayed in the browser’s title bar.
<body> – This tag contains the main content of the document, such as text, images, and other multimedia elements.
All HTML code is placed between the opening and closing <html> tags. The <head> and <body> tags are child elements of the <html> tag. The <title> tag is a child element of the <head> tag.
The content of the HTML document is placed between the opening and closing <body> tags. This is where you add text, images, links, and other elements that you want to display on the web page.
HTML Element:
In HTML, an element is a building block of a web page that defines a particular piece of content or functionality. HTML elements consist of a start tag, some content, and an end tag.
Here is an example of an HTML element:
<p>This is a paragraph element.</p>
In this example, the element is a paragraph (<p>) that contains the content This is a paragraph element. The start tag is <p> and the end tag is </p>. When the page is rendered in a web browser, the content between the start and end tags is displayed as a paragraph of text.
Inline and Block Level Elements:
Inline and block-level elements are two types of HTML elements that are used to structure and style content on a webpage.
A block-level element is an HTML element that takes up the entire width of its parent container and creates a new line after it. Examples of block-level elements include <div>, <h1> to <h6>, <p>, <ul>, <ol>, <li>, <table>, and <form>. Block-level elements are often used to create the overall layout of a webpage.
An inline element, on the other hand, is an HTML element that only takes up as much width as necessary and does not create a new line after it. Examples of inline elements include <a>, <span>, <img>, <input>, <button>, and <label>. Inline elements are often used to add small amounts of content and style within a block-level element.
It is important to note that some elements, such as <img> and <input>, can be both block-level and inline, depending on how they are used and styled.
Differences between Inline element and block level element:
- Inline elements are typically used to format text or other small bits of content, while block-level elements are used to define larger areas of content, such as sections of a webpage.
- Block-level elements create a new line after themselves, whereas inline elements do not, meaning that multiple inline elements can exist on the same line.
- Inline elements have limited styling options, such as changing the font color or text decoration, while block-level elements have a wider range of styling options, such as setting a background color or border.
- Block-level elements often have default margins and padding that can affect the layout of a webpage, while inline elements typically do not.
- Examples of block level elements are <h1>,<h2>,<p>….etc while examples of inline elements are <b>,<i>,<span>…etc.
HTML Attribute:
In HTML, attributes are used to provide additional information about an HTML element. Attributes are added to the opening tag of an HTML element and are used to modify the default behavior or appearance of an element.
HTML attributes consist of two parts: a name and a value. The name is the attribute’s identifier, and the value provides additional information about the attribute. The value is enclosed in quotation marks, either double or single quotes.
For example, the following HTML code uses the href attribute to specify the URL of a link:
<a href=”https://www.example.com”>Click here to visit Example.com</a>
In this example, the href attribute is added to the opening <a> tag to specify the URL that the link should point to.
Some common HTML attributes include:
id – Used to uniquely identify an element on the page.
class – Used to define a class of elements that can be styled together using CSS.
src – Used to specify the URL of an image or other multimedia element.
alt – Used to provide alternative text for an image, which is displayed if the image cannot be loaded.
title – Used to provide additional information about an element, which is displayed when the user hovers their cursor over the element.
Attributes can also be used to add JavaScript event handlers to an element, such as onclick or onload, which trigger a function when a certain event occurs.
HTML Comment:
HTML comments are used to add notes or remarks to an HTML code that will not be displayed in the web browser. Comments are useful for adding documentation or reminders to yourself or other developers who may be working on the code.
HTML comments are created using the following syntax:
<!– This is a comment –>
Anything placed between the <!– and –> tags is considered a comment and is ignored by the browser when rendering the web page. You can add comments to individual lines of code or to entire blocks of code.
For example, you might use comments to document the purpose of a particular section of code, like this:
<div class=”header”>
<!– This is the header section of the page –>
<h1>Welcome to my website</h1>
</div>
In this example, the comment explains that the <div> element with a class of “header” is the header section of the page. This comment can be helpful for other developers who are trying to understand the structure of the code.
End of Chapter III