Unit-II: HTML Coding Standards & Elements
Unit-II:
HTML Coding Standards & Elements
1.
Coding Standards & Block Elements
HTML Coding Conventions:
·
Lowercase Tags and Attributes: Always use
lowercase for HTML tag and attribute names (e.g., <p>, <a>, href).
·
Quoted Attribute Values: Enclose all
attribute values in double quotes (e.g., <img
src="image.jpg">).
·
Meaningful Indentation: Use consistent
indentation (e.g., 2 or 4 spaces) to improve readability and show the
hierarchical structure of the document.
·
Semantic HTML: Use HTML elements according to their
meaning, not just their default styling (e.g., <h1> for a main
heading, <p> for a paragraph).
·
Comments: Use comments (``) to explain complex
or non-obvious parts of the code.
Comments:
·
Used to add notes within the HTML code that are ignored by the browser.
·
Syntax: ``
·
Useful for explaining code, temporarily disabling code, or marking sections.
HTML Elements:
·
The fundamental building blocks of an HTML page.
·
Consist of a start tag, content, and an end tag (e.g., <p>This is a paragraph.</p>).
·
Some elements are self-closing (void elements) and do not have an end
tag (e.g., <br>, <img>, <input>).
Should Describe Web Page Content
Accurately:
·
Choose elements that accurately reflect the type of content they
contain. This improves accessibility, SEO, and maintainability.
·
Example: Use <nav> for navigation
links, <article> for independent content.
Content Model Categories:
HTML5 categorizes elements into
different content models (e.g., Flow Content, Phrasing Content, Sectioning
Content, Heading Content). This helps define where elements can be placed and
what type of content they can contain.
Block Elements:
·
Block-level elements typically start on a new line and take up the full
width available.
·
They can contain other block-level elements and inline elements.
·
Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <article>, <section>, <blockquote>.
<blockquote> Element:
o
Used to indicate that the enclosed text is an extended quotation.
o
Browsers typically indent the content.
o
Can have a cite attribute to point to the source of
the quotation.
o
Example:
HTML
<blockquote cite="http://www.example.com/source">
<p>This is a long quotation from a
famous author.</p>
</blockquote>
Whitespace Collapsing:
·
Browsers typically collapse multiple spaces, tabs, and newlines into a
single space when rendering HTML. This means extra whitespace in your code
won't appear on the webpage.
pre Element:
·
Stands for "preformatted text."
·
Displays text exactly as it is written in the HTML source, preserving
whitespace and line breaks.
·
Often used for displaying code snippets or ASCII art.
·
Example:
HTML
<pre>
function greet() {
console.log("Hello,
World!");
}
</pre>
Phrasing Elements (Inline Elements):
·
Phrasing elements do not start on a new line and only take up as much
width as necessary.
·
They can only contain data and other phrasing elements.
·
Examples: <span>, <a>, <strong>, <em>, <b>, <i>, <u>, <small>, <sub>, <sup>, <mark>, <code>, <q>, <cite>, <dfn>, <abbr>, <time>.
Editing Elements:
·
<del>: Represents a
range of text that has been deleted from a document.
·
<ins>: Represents a
range of text that has been added to a document.
·
Both can have cite and datetime attributes.
q and cite
Elements:
·
q (short quotation): Used for short,
inline quotations. Browsers typically enclose the content in quotation marks.
·
cite: Used to refer to
the title of a creative work (e.g., a book, song, film). Not for the author's
name.
·
Example: <p>As Shakespeare said, <q>To be or not
to be.</q> from his play <cite>Hamlet</cite>.</p>
dfn, abbr,
and time Elements:
·
dfn (definition): Used to indicate
the defining instance of a term within the prose.
·
abbr (abbreviation): Used for
abbreviations and acronyms. The title attribute can
provide the full description.
·
Example: <abbr title="HyperText Markup
Language">HTML</abbr>
time: Represents a specific
point in time or a time range. Can have a datetime attribute for
machine-readable format.
·
Example: <p>The event starts at <time
datetime="2025-12-25T18:00">6:00 PM</time> on Christmas
Day.</p>
Code-Related Elements:
·
code: Represents a
fragment of computer code. (Often used inside <pre> for multi-line
code).
·
kbd: Represents user
input (e.g., keyboard input).
·
samp: Represents sample
output from a computer program.
·
var: Represents a
variable in a mathematical expression or programming context.
br and wbr
Elements:
·
br (line break): Creates a line
break, forcing the text to the next line. It is a void element.
·
wbr (word break
opportunity): Represents a position within text where the browser may optionally
break a line, if necessary, to prevent overflow. Useful for long words or URLs.
2.
Text Elements and Character References
sup, sub, s, mark,
and small Elements:
·
sup (superscript): Renders text as
superscript (e.g., x2).
·
sub (subscript): Renders text as
subscript (e.g., H2O).
·
s (strikethrough): Renders text with
a line through it, indicating it is no longer accurate or relevant. (Use <del> for removed content).
·
mark (highlight): Highlights text,
indicating its relevance.
·
small: Renders text in a
smaller font size, typically for side comments, copyright, or disclaimers.
strong, em, b, u,
and i Elements:
·
strong (strong
importance): Indicates strong importance for its content. Browsers typically render
it as bold. (Semantic)
·
em (emphasis): Indicates
emphasis. Browsers typically render it as italic. (Semantic)
·
b (bold): Renders text in
bold. Use when there's no special importance, just a stylistic offset.
(Presentational)
·
u (underline): Renders text as
underlined. Use when there's no specific semantic meaning, just a stylistic
offset. (Presentational)
·
i (italic): Renders text in
italic. Use for text in an alternate voice or mood, a technical term, or a
thought. (Presentational/Semantic nuances)
·
Recommendation: Prefer <strong> and <em> for semantic meaning; use <b>, <i>, <u> when no semantic
meaning is intended.
span Element:
·
A generic inline container for phrasing content.
·
Has no inherent semantic meaning.
·
Primarily used for applying CSS styles or JavaScript to a specific part
of text.
Character References (HTML Entities):
·
Used to display characters that have special meaning in HTML (like <, >, &, ") or characters not easily typed on a keyboard (like copyright symbol,
foreign characters).
Syntax:
·
Named entities: &entity_name; (e.g., < for <, > for >, & for &, © for ©)
·
Numeric entities: &#decimal_code; or &#xhex_code; (e.g., © for ©, € for €)
Web Page with Character References, and
Phrasing Elements:
·
Integrate character references within your phrasing elements to display
special characters correctly.
·
Example:
HTML
<p>This is a paragraph with a
less-than sign (<), a greater-than
sign (>), and a copyright
symbol (©).</p>
<p>You can also use an em dash—like this.</p>
Case Study: Create a web page related
to famous water reservoir/ famous tourist spots near by your location using
block elements, text elements and character references.
Location: Martur, Andhra
Pradesh, India
Famous
Tourist Spot Nearby: Undavalli Caves (near Vijayawada, which is relatively close)
Web
Page Title: Exploring Undavalli Caves: A Historical Marvel
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exploring Undavalli Caves: A Historical Marvel</title>
<style>
/* Simple CSS for better readability */
body {
font-family: Arial,
sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
header, footer {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
background-color:
white;
margin: 20px 0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #0056b3;
}
blockquote {
background-color: #e6f2ff;
border-left: 5px solid #007bff;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
pre {
background-color: #eee;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: 'Courier New', Courier, monospace;
}
abbr {
cursor: help;
border-bottom: 1px dotted #000;
}
</style>
</head>
<body>
<header>
<h1>Undavalli Caves: An Ancient Architectural
Wonder</h1>
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#history">History</a></li>
<li><a href="#architecture">Architecture</a></li>
<li><a href="#visiting-info">Visiting Information</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<h2>Introduction to Undavalli Caves</h2>
<p>The Undavalli Caves, located in Guntur
district, Andhra Pradesh, India, are a magnificent example of ancient Indian
rock-cut architecture. These caves, particularly the grand four-storied one,
are a testament to the skilled craftsmanship of their creators. Situated close
to Vijayawada, they attract tourists and history enthusiasts alike.</p>
<p>They are primarily associated with Buddhist and
Hindu faiths, showcasing a blend of architectural styles. The most prominent
cave houses a gigantic reclining statue of Vishnu, carved from a single block
of granite.</p>
<p><em>Don't miss the opportunity to explore this historical site!</em></p>
</section>
<section id="history">
<h2>Historical Significance</h2>
<p>The caves are believed to have been carved out of solid sandstone
during the <time datetime="400-01-01">4th to 5th
centuries AD</time>. Initially, they served as
Buddhist monasteries (<abbr title="Vihara means a Buddhist
monastery">Viharas</abbr>). Later, they were converted into Hindu temples.</p>
<p>Local folklore suggests that these caves are
connected to the famous Mogalarajapuram Caves through secret passages. However,
there's no definitive proof for this claim.</p>
<blockquote cite="https://example.com/ancient-india-architecture">
<p>The Undavalli Caves stand as a profound symbol
of India's rich religious and architectural legacy, reflecting centuries of
devotion and artistic endeavor.</p>
</blockquote>
<p>The name <strong>Undavalli</strong> itself carries
historical weight, hinting at the antiquity of the region.</p>
</section>
<section id="architecture">
<h2>Architectural Marvels</h2>
<p>The most impressive cave is the four-storied
one, which boasts a sprawling facade. Each level reveals intricate carvings and
chambers. The ground floor is an unfinished <dfn>Vihara</dfn>, designed for
Buddhist monks.</p>
<p>The highlight is undoubtedly the <strong style="color: darkred;">gigantic
monolithic statue of Lord Vishnu in Anantasayana (reclining) pose</strong> on the third floor. It's truly a sight to
behold.</p>
<p>Consider the dimensions: the statue is
approximately 5 meters in length. Imagine the precision required to carve such
a massive figure! Here's a small <kbd>code</kbd> snippet to
illustrate the scale:</p>
<pre><code>
// Pseudo-code for calculating
statue volume
const length = 5; // meters
const width = 1.5; // meters
(estimated)
const height = 1.8; // meters
(estimated)
let volume = length * width *
height;
console.log(`Estimated volume:
${volume} cubic meters`);
</code></pre>
<p>Notice the subtle details in the pillars and
the depiction of various deities. Some sections show signs of erosion over
time, especially where the water has seeped through.</p>
<p>This is a <mark>must-visit</mark> for anyone
interested in ancient Indian art and spirituality.</p>
</section>
<section id="visiting-info">
<h2>Visiting Information & Tips</h2>
<p>
The Undavalli
Caves are open daily from <time datetime="09:00">9:00 AM</time> to <time datetime="18:00">6:00 PM</time>.
Entry fee is
nominal, approximately ₹25 for Indian citizens and $3 for foreign tourists.
It's advisable to
visit during the cooler months, from October to March, to avoid the intense
summer heat of Andhra Pradesh.
</p>
<p>
<q>Wear comfortable shoes</q>, as there's a fair bit of climbing involved to
explore all the levels.
Photography is
generally allowed, but be respectful of the ancient structures.
</p>
<p><small>Copyright © <time datetime="2025">2025</time> Local Tourist Guide. All rights reserved.</small></p>
<p>The caves are accessible by road from
Vijayawada. You can take a bus, auto-rickshaw, or taxi. The distance is about 6 km.</p>
<p>For more details, please contact the <ins>Andhra Pradesh Tourism Department</ins>.</p>
</section>
</main>
<footer>
<p>Prepared by Your Name — Martur, Andhra Pradesh, India — Current Date: <time datetime="2025-07-28">July 28, 2025</time></p>
</footer>
</body>
</html>
Comments
Post a Comment