Scribd
Upload
15 views9 pages

Basic HTML Tags and Examples

Uploaded by

ethioawashmedia
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views9 pages

Basic HTML Tags and Examples

Uploaded by

ethioawashmedia
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Basic HTML Document

<!DOCTYPE html>
<html>
<head>
<title> Web and Database Level I </title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
save it in an HTML file [Link]

HTML Tags

<!DOCTYPE...>
<html>
<head>
<title>
<body>
<h1>
<p>

HTML Basic Tags

A. Heading Tags

HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest), to structure the
content hierarchy. Headings add line breaks automatically before and after the text.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>

<h1>This is Heading 1</h1>


<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>

B. Paragraph Tag

The <p> tag is used to define paragraphs, creating space around blocks of text.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>

<p>This is a paragraph of text.</p>


<p>This is another paragraph.</p>
</body>
</html>

C. Line Break Tag

The <br /> tag is an empty element that inserts a line break. It does not require a closing tag.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>This is a paragraph of text.</p><br />
<p>This is another paragraph.</p>
</body>
</html>

D. Horizontal Line Tag

The <hr /> tag creates a horizontal line that visually separates sections of content.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>This is some content.</p>
<hr />
<p>This is content after the horizontal line.</p>
</body>
</html>

E. Preformatted Text Tag

The <pre> tag preserves whitespace and line breaks, displaying text exactly as it appears in the
HTML source.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<pre>
This text
will keep
its formatting.
</pre>
</body>
</html>

F. Nonbreaking Space

To prevent text from breaking at spaces, use &nbsp; instead of a normal space.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>Here is the phrase "12&nbsp;Angry&nbsp;Men" without line breaks between
words.</p>
</body>
</html>

G. HTML Comments

Comments in HTML, enclosed within <!-- ... -->, are ignored by the browser and don’t
appear on the page. Comments help in organizing and explaining the code.

 Single-line comment:

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>this is paragraph one<!-- This is a single-line comment -->followed
by comment</p>
</body>
</html>

 Multi-line comment:

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>this is paragraph one
<!--
This is a
multi-line comment
-->
followed by comment</p>
</body>
</html>

Commenting Script and Style Code

It’s recommended to wrap JavaScript and CSS in comments for compatibility with older
browsers.

 JavaScript comment:

html
Copy code
<script>
<!--
[Link]("Hello World!");
//-->
</script>

 Java Script Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>

<h1>My Web Page</h1>


<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 CSS comment:

html
Copy code
<style>
<!--
.example {
border: 1px solid #4a7d49;
}
//-->
</style>

 CSS Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
</body>
</html>

1. HTML Elements

HTML elements are defined by a starting tag and, if containing content, end with a closing tag.
Some elements, called void or empty elements, don’t require a closing tag.

Examples:

<html>
<body>

<p>This is a paragraph element.</p>


<h1>This is a heading element.</h1>
<div>This is a division element.</div>
<br /> <!-- Void element -->

</body>
</html>

A. HTML Tag vs. Element

A tag defines the start or end of an element, while an element includes the start tag, content, and
end tag.

 Example:

html
Copy code
<p>This is paragraph</p> <!-- <p> is a tag; <p> ... </p> is an element
-->

B. Nested HTML Elements

HTML allows elements to be nested within one another.

 Example:

html
Copy code
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>

2. HTML Attributes

Attributes provide additional information about HTML elements and are placed within the
opening tag. Common attributes include id, class, style, and title.

Core Attributes

1. Id Attribute: Uniquely identifies an element on the page.

html
Copy code
<p id="intro">This paragraph has a unique id.</p>

2. Title Attribute: Adds a tooltip that appears when hovering over the element.

html
Copy code
<h3 title="Hello HTML!">Hover over this heading</h3>
3. Class Attribute: Assigns the element to a specific class for CSS styling.

html
Copy code
<p class="text-primary">This text belongs to the 'text-primary'
class.</p>

4. Style Attribute: Adds inline CSS styles to the element.

html
Copy code
<p style="font-family: Arial; color: #FF0000;">Some styled text</p>

B. Internationalization Attributes

These attributes support different languages and text directions.

1. dir Attribute: Controls text direction.

html
Copy code
<html dir="rtl"> <!-- Sets document text direction to right-to-left -->

2. lang Attribute: Defines the document's language.

html
Copy code
<html lang="en"> <!-- Sets language to English -->

3. xml

Attribute: XHTML replacement for the lang attribute.

html
Copy code
<html xml:lang="en"> <!-- Sets language for XHTML documents -->

C. Generic Attributes
Attribute Options Function

align right, left, center Horizontally aligns content in elements.

valign top, middle, bottom Vertically aligns content in tables.

bgcolor numeric, hexadecimal, RGB Sets background color for an element.

background URL Sets background image for an element.

id User-defined Uniquely identifies the element for styling.


Attribute Options Function

class User-defined Assigns the element to a CSS class.

width Numeric Sets the width of elements like images or tables.

height Numeric Sets the height of elements like images or tables.

title User-defined Sets a tooltip for the element.

Example of Using Attributes:

html
Copy code
<p id="intro" class="highlight" title="Intro Text" style="color: blue;">
This is a paragraph with multiple attributes.
</p>

Common questions

Powered by AI

HTML tags consist of markup used to define the start and end of content structures, while elements include the opening tag, content, and closing tag. Understanding these distinctions is crucial for proper HTML syntax and nesting, which prevents rendering errors and ensures the semantic meaning of the content is maintained. For instance, correct use of <p>...</p> conveys a complete paragraph element, while improper tagging could affect document structure and browser interpretation .

A non-breaking space "&nbsp;" prevents automatic line breaks at specific points, which maintains the intended formatting of inline content. It is beneficial for typographic conventions, such as keeping numerical values and their units together, or ensuring proper spacing in phrases like "10 kg" or titles like "Chief Executive Officer" without breaking across lines .

The "<hr />" tag creates a horizontal line that visually separates content sections, helping to structure and organize content. Unlike the "<br />" tag, which only inserts a line break without additional styling, the <hr /> tag acts as a thematic break, emphasizing shifts in topic or content sections .

HTML comments, enclosed within <!-- ... -->, improve maintainability and readability by providing explanations or annotations within the code. They help developers understand the code's intent and facilitate communication in collaborative environments by documenting complex logic or temporary changes without affecting the output rendered on browsers. Comments also allow developers to disable code for debugging without deleting it .

The "<!DOCTYPE html>" declaration defines the document type and version of HTML being used, which helps browsers render the page correctly. It ensures that the document follows the HTML5 standards, making it essential for ensuring compatibility across different browsers and devices .

The "id" attribute uniquely identifies an HTML element, allowing it to be targeted by CSS and JavaScript. It is essential for adding interactivity; for instance, JavaScript can use the document.getElementById() method to access and manipulate the content or style of a specific element. An example is changing the text of a paragraph when a button is clicked: <button onclick="document.getElementById('example').innerHTML='New Text';">Click me</button><p id="example">Old Text</p> .

Inline CSS styles apply directly within an element’s style attribute, offering quick and local style changes without affecting other elements. However, they can lead to a cluttered HTML code and make it difficult to maintain consistency across a site. Using CSS classes provides reusability and consistent styling across multiple elements by defining styles separately in a <style> block or external stylesheet, facilitating maintenance and scalability, but requiring class names to be added to elements .

HTML heading tags (<h1> to <h6>) establish a hierarchical structure for content on a webpage, indicating the importance of sections from main headings to subheadings. This semantic structure enhances accessibility by enabling screen readers and search engines to interpret page content efficiently, improving navigation for visually impaired users and optimizing search engine indexing .

The "<pre>" tag preserves both whitespace and line breaks, displaying text exactly as it appears in the HTML source. This is useful for displaying code snippets or tabular data that requires specific formatting for readability. For example, when showing a block of code on a webpage, using the <pre> tag ensures that indentation and line breaks are maintained .

The "dir" attribute specifies the text direction, such as "ltr" for left-to-right languages or "rtl" for right-to-left languages, ensuring the content's correct display. The "lang" attribute declares the language of the document, enabling browsers and screen readers to appropriately pronounce and display text, crucial for accessibility and supporting multilingual content .

You might also like