Scribd
Upload
8 views5 pages

html_syntax_explanation

Uploaded by

15 Rohit Potdar
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
8 views5 pages

html_syntax_explanation

Uploaded by

15 Rohit Potdar
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
You are on page 1/ 5

HTML Syntax Explanation

HTML Boilerplate
**Format:**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
</body>
</html>

**Use:**

The boilerplate structure serves as the foundation for an HTML document. It declares the
document type, sets the language, and includes the head and body sections.

Internal CSS
**Format:**

<style>
/* CSS Code here */
</style>

**Use:**

CSS is used to style HTML elements. Internal CSS allows you to apply styling directly within
the <style> tag inside the <head>.

Body Tag
**Format:**

<body>
Content here
</body>

**Use:**

The <body> tag contains all the visible content of the webpage, such as text, images, and
links.
Heading Tags
**Format:**

<h1>Heading 1</h1>
<h2>Heading 2</h2>

**Use:**

Headings are used to define section titles or headings in descending order of importance
(<h1> being the highest).

Paragraph Tag
**Format:**

<p>Text here</p>

**Use:**

The <p> tag is used to create blocks of text or paragraphs.

Anchor Tag
**Format:**

<a href="link">Text</a>

**Use:**

The <a> tag is used to create clickable hyperlinks that navigate to other sections or pages.

CSS Keyframes Animation


**Format:**

@keyframes move {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

**Use:**

This creates an animated text marquee effect that scrolls continuously across the screen.

CSS Classes for Positioning


**Format:**

.side-menu {
position: fixed;
display: flex;
flex-direction: column;
}

**Use:**

CSS classes like `flex` and `fixed` are used to arrange elements and position them on the
page.

Image Tag
**Format:**

<img src="image-path.jpg" alt="description" width="200" height="200">

**Use:**

The <img> tag is used to display images on the webpage. The `src` attribute specifies the
image path, and the `alt` attribute provides alternative text.

Section Tag
**Format:**

<section>
<!-- Content here -->
</section>

**Use:**

The <section> tag groups related content together to improve structure and readability.

Form Tag
**Format:**

<form>
<label for="id">Label Text:</label>
<select id="id">
<option value="value1">Option 1</option>
</select>
</form>

**Use:**

Forms are used to collect user input. The <select> tag creates dropdown menus.

Table Tags
**Format:**

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

**Use:**

Tables organize data in rows and columns for better presentation.

Google Map Embed


**Format:**

<iframe src="Google Map URL" width="600" height="450" style="border:0;"


allowfullscreen="" loading="lazy"></iframe>

**Use:**

The <iframe> tag embeds Google Maps into the webpage, allowing users to locate the
business easily.

CSS Text Shadows and Animations


**Format:**

.main-heading {
text-shadow: 0 0 10px gold;
}

**Use:**

Text shadow and animations improve visual appeal by adding dynamic glowing or lighting
effects to text.

CSS Color and Background


**Format:**

body {
background-color: #f4f4f4;
color: #333;
}

**Use:**

CSS is used to apply colors and background properties for visual design.
Fixed Side Menu
**Format:**

<div class="side-menu">
<a href="#section">Section Name</a>
</div>

**Use:**

A fixed side navigation menu helps users navigate to different sections on the same page.

Div Containers
**Format:**

<div class="class-name">
Content here
</div>

**Use:**

The <div> tag acts as a container to group and organize content on the webpage.

You might also like