What is HTML?
stand for (Hypertext Markup language), is the standard markup language used to create and
design documents on the www (World Wide Web).
What does the term ‘Hypertext Markup Language’ mean?
we can define this by separating it two-word Hypertext and markup
What is Hypertext mean?
The term “markup” refers to the collection of symbols (❤️, ✓) or codes that are embedded in a
document to provide instructions on how the document should be displayed or processed. In
HTML, elements are defined by tags, which are wrapped in angle brackets (>). These tags
appear around content and indicate the start and end of elements. For example, the <p> tag is
used to define paragraphs, and text between <p> and </p> is considered as a paragraph.
What is Document mean?
A “document” is a piece of recorded or written information. It can be a physical paper with text
or an electronic file on a computer. Documents can contain various types of information, such
as text, images, or data. HTML documents contain elements and tags that define the structure
and content of a webpage, including text, images, links, and other media.
In this example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1> Hey buddy! </h1>
<p>This is a simple HTML document. </p>
</body>
</html>• <!DOCTYPE html> declares the document type and version (HTML5).
• <html> marks the beginning of the HTML document.
• <head> contains metadata such as the title of the page.
• <title> sets the title displayed in the browser tab.
• <body> holds the main content of the webpage.
• <h1> and <p> are header and paragraph elements, respectively, defining text content.
When a web browser interacts with this HTML document, it reads and outputs the content,
displaying the heading “Hello, buddy!” and the paragraph “This is a simple HTML document.” on
the webpage.
The Evolution/History of HTML
HTML has changed over time, and various versions have been released since its beginnings.
Here’s a quick rundown of HTML’s development stage
HTML 1.0 (1991):
Tim Berners-Lee introduced the initial version of HTML in 1991. It was a basic
markup language with a limited collection of elements that was mainly designed to arrange
content and generate links between documents.
HTML 2.0 (1995):
This version introduced new features like forms with input elements and the
ability to align images on a page. It also contained programming support, resulting in more
dynamic content.
HTML 3.2 (1997):
HTML 3.2 was a significant improvement that provided support for tables,
applets, text flow around pictures, and better programming language compatibility. It was a
time when the web was shifting away from simple text-based content and towards more
complex design and interactivity.
HTML 4.01 (1999):
This version enhanced and extended HTML 3.2’s functionality. It added style
sheet support, scripting by introducing the script> element, and new form controls. HTML 4.01
is a stable and mature version that has been widely used for a long time.
XHTML (2000):
XHTML (Extensible Hypertext Markup Language) was introduced as an XML
based reformulation of HTML 4.01. The idea behind it was to introduce the complexity of XML
to HTML by introducing stricter syntax rules and enhancing compatibility with other XML-based
technologies. During this time, XHTML 1.0 and 1.1 were released.
HTML5 (2014):
HTML5 is a big advancement in terms of capabilities and features. It added
additional logical components, native support for audio and video, a more flexible document
structure, and enhanced programming capabilities with the addition of the canvas> element.
HTML5 also introduced the beginning of responsive web design, allowing websites to adapt to
various screen sizes and devices.
HTML keeps changing to suit the demands of modern web development, including ideas to
improve its features and capabilities.
Important Topics of HTML
Below are some key HTML topics that we have discussed.
• Document Structure:
• Text Markup:
• Text Formatting:
• Images:
• Structural Elements:
• Forms:
• Tables:
• Semantic Elements (HTML5):
• Comments:
• Attributes:
1. Document Structure:
Document Type Declaration:
<!DOCTYPE html>
This declaration specifies the type and version of the document. It specifies that the document
matches to the HTML5 standard in modern web development.
Root Element:
<html>
The html> element is the root element of an HTML document, containing all of the content.
Head Section:
<head>
<!-- Metadata and document information -->
<title>Your Page Title</title>
<!-- Additional metadata, links to stylesheets, scripts, etc. -->
</head>Meta information such as the document title, character coding, and links to external resources
such as stylesheets and scripts are all included in the <head> section.
Body Section:
<body>
<!-- Main content of the page -->
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<!-- Additional elements, text, and multimedia content -->
</body>The <body> section contains the HTML document’s major content, such as headings,
paragraphs, images, links, and other components.
Here’s a simple example of a complete HTML document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> My HTML Document </title>
</head>
<body>
<h1>Hello, World! </h1>
<p>This is a simple HTML document. </p>
</body>
</html>In this example, you can see the essential components, including the document type
declaration, root element, head section, and the body section containing the main content
2. Text markup:
Text markup is the process of adding specific codes to text, known as markup tags, that provide
it shape and formatting.
Heading:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- ... -->
<h6>Heading 6</h6>Headings decide text ordering levels, from the largest (<h1>) to the smallest (<h6>).
Paragraphs:
<p>This is a paragraph of text.</p>This is a paragraph of text.
The <p> tag is used to define paragraphs.
Bold Text:
<strong>This text is bold</strong>The <strong> tag is used for importance, which is frequently shown symbolically as bold.
Italic Text:
<em>This text is italicized</em>The <em> element is used to bring attention to text, which is commonly rendered visually as
italics.
Underlined Text (Deprecated in HTML5):
<u>This text is underlined </u>
The <u> tag is used to underline text, while it is outdated in HTML5 and should be replaced with
CSS for style.
Web developers can use these markup elements to structure text content and apply formatting
to create a stylish and well-organized webpage.
Text Formatting:
Text Formatting is a subset of text markup. Text markup addresses both the structural and
visual features of text in a document, whereas text formatting focuses on the visual styling of
the text.
Additionally, CSS (Cascading Style Sheets) is frequently used together with HTML to manage the
appearance of text and other components on a webpage for more advanced customization.
Images:
The <img> element in HTML is used to insert images into a web page.
Here’s a simple example:
<img src="example.jpg" alt="Example Image">✓ src: Specifies the image’s source (URL or file folder).
✓ alt: Provides alternative text for the image that will be displayed when it fails to be
loaded. Screen readers also use it for ease of access.You can change the src attribute to point to the image’s actual location. Furthermore, the
<img> tag can be customized using width (width) and height (height) properties to determine
the size of the displayed image.
<img src="example.jpg" alt="Example Image" width="300" height="200">The above commands the browser to show the image with a width of 300 pixels and a height of 200 pixels.
Structural Elements:
In HTML, structural elements refer to tags that help organize and structure the content of a
web page. These components define the layout, grouping, and organization of the HTML
document’s several elements. Among the most important structural elements are:
<div> (Division):
Used to organise and structure information. It is a basic container that displays no special
styling
<div>
<!-- Content goes here -->
</div><span>
It is frequently used to style or format a specific section of text.
<span>This is inline text.</span><section>:
A themed collection of content, usually with a heading. It helps in the organization of content
into separate sections.
<article>
<h2>Article Title</h2>
<!-- Content for this article -->
</article><nav>
A navigation menu or links to other pages are shown. It’s used to specify navigation parts.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<!-- More navigation links -->
</ul>
</nav><header>
Represents the webpage header section. It frequently includes headlines, logos, and
introductory information.
<header>
<h1>Website Title</h1>
<p>Welcome to our website</p>
</header><footer>
Represents the webpage footer section. It usually includes copyright information, links, and
other footer-related information.
<footer>
<p>© 2023 My Website</p>
</footer>These structural components help developers in creating well-organized, conceptually
meaningful HTML documents, allowing browsers, search engines, and assistive technologies to
better understand the content and its relationships.
Form:
“Forms” in HTML refer to a collection of elements and controls that allow users to interact with
a webpage by sending data to the server. Forms are required for a variety of user inputs,
including text fields, checkboxes, radio buttons, and buttons. The form> tag is the primary
element used to create forms.
Here are some important HTML form components and elements:
<form> Element:
The form> tag is used to create an HTML form with many input elements.
<form action="/submit_form" method="post">
<!-- Form elements go here -->
</form>The action attribute specifies the URL to which form data should be sent, and the method
attribute gives the HTTP method (for example, “post” or “get”).
Input Element:
Various input elements are used to collect different types of data. Common input types include:
• <input type=”text”> for single-line text.
• <input type=”password”> for passwords.• <input type=”checkbox”> for checkboxes.
• <input type=”radio”> for radio buttons.
• <textarea> for multiline text.
<input type="text" name="username" placeholder="Username">
• <input type="password" name="password" placeholder="Password">
• <input type="checkbox" name="subscribe" id="subscribe">
• <input type="radio" name="gender" value="male"> Male
<textarea name="message" rows="4" cols="50" placeholder="Enter your
message"></textarea>Button:
Buttons are used to submit the form or trigger JavaScript functions. The <button> and <input
type=”submit”> elements are commonly used.
<button type="submit">Submit</button>
<input type="submit" value="Submit">Forms play an important part in web user interaction by allowing users to input and submit
data. When a user submits a form, the information is usually sent to a server for processing.
Tables:
A table is a structural element in HTML that is used to organize and show data in rows and
columns. Tables are made up of several elements that create the table structure, such as rows,
columns, and cells. The following are the major factors involved in the creation of tables:
<table> Element:
The <table> tag is used to define the beginning of the table.
<table>
<!-- Table rows and cells go here -->
</table><tr> Element:
The <tr> tag represents a table row. It contains one or more <td> or <th> elements.
<tr>
<!-- Table cells (data or header) go here -->
</tr><td> Element:
The <td> tag defines a normal table cell (data cell) within a row.
<td>Data Cell</td><th> Element:
The <th> tag specifies a table header cell, which is normally located in the first row or column. It
is typically bold and centered.
<th>Header Cell</th>Here is the example of table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Tables are commonly used for showing organized data in spreadsheets or when displaying
tabular information on a webpage. They can be further customized with attributes and styles
that control borders, spacing, and other visual elements. Additionally, CSS (Cascading Style
Sheets) is frequently used together with HTML tables for more advanced styling and
responsiveness.
Semantic Elements:
Semantic elements are similar to structural elements, but they have different functions. While
both help to organize and structure content on a website, semantic components take on an
extra role: they provide specific meaning and context to the content they contain.
Structural elements, such as <div> and <span>, are essential for layout and organization,
allowing developers to group and style content. However, they don’t inherently convey the
semantic significance of the enclosed content.
Semantic elements, on the other hand, go beyond structural organization by giving the
text clear meaning. Elements like article>, section>, navigation>, header>, and footer> give
useful information about the nature and purpose of the material, helping with accessibility,
SEO, and general comprehension.In simple terms, while both semantic and structural components contribute to the structure of
a webpage, semantic elements provide a layer of meaning to the HTML code, making it more
meaningful and understandable to both humans and machines.
Comment:
A comment is a type of note or message in HTML that is not rendered or displayed when the
web page is viewed in a browser. Within the HTML code, comments can be used to provide
explanations, reminders, or documentation. The browser ignores them and they only serve as
comments for developers or anybody else reading the code.
<!-- This is a comment -->Everything between <! — and –> is treated as a comment and will not be rendered by the
browser.
Comments are useful for describing your HTML code, clarifying complex parts, or temporarily
disabling certain parts of the code during development without completely removing them.
Attributes:
Attributes in HTML provide additional information about HTML elements. They are always
included in the opening tag of an element and are used to change or specify the features of an
HTML tag. Attributes consist of a name and a value and are written as name-value pairs.
The following is the basic syntax for an HTML tag with attributes:
<tagname attribute="value">Content</tagname>For example, in the following <a> (anchor) tag, the “href” attribute is used to specify the URL to
which the link points:
<a href="https://www.example.com">Visit Example</a>• a is the tag name (anchor tag).
• href is the attribute name.
• “https://www.example.com” is the attribute value.
common attributes include class, id, src, alt, width, height, style, and many more, depending on
the type of HTML element. Attributes are used to style elements with CSS, provide functionality
with JavaScript, and transmit additional information about the elements.
It is important to remember that not all HTML elements have attributes, and the attributes
available for each element are dependent on the kind and function of the element.
Additionally, HTML5 introduced global attributes that can be used with almost any HTML
element.
