Scribd
Upload
1 views

HTML Basics

HTML (HyperText Markup Language) is the standard language for creating webpages, structuring content with various tags. Key components include the basic document structure, common tags for headings, paragraphs, links, images, lists, and tables, as well as attributes, semantic HTML, forms, multimedia, comments, HTML entities, and the distinction between block and inline elements. This document serves as a foundational guide for understanding HTML basics, enabling the creation of more complex web pages with CSS and JavaScript.

Uploaded by

ayushnono4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

HTML Basics

HTML (HyperText Markup Language) is the standard language for creating webpages, structuring content with various tags. Key components include the basic document structure, common tags for headings, paragraphs, links, images, lists, and tables, as well as attributes, semantic HTML, forms, multimedia, comments, HTML entities, and the distinction between block and inline elements. This document serves as a foundational guide for understanding HTML basics, enabling the creation of more complex web pages with CSS and JavaScript.

Uploaded by

ayushnono4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Basics

HTML (HyperText Markup Language) is the standard language for creating webpages. It
structures web content and uses various tags to define elements like headings, paragraphs, links,
images, and more.

1. Basic Structure of an HTML Document


Every HTML document has a similar basic structure. Here's a simple example:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Explanation:

 <!DOCTYPE html>: Declares the document type as HTML5.


 <html>: The root element of an HTML page.
 <head>: Contains meta information about the HTML document (like the title and
character set).
 <body>: Contains the visible content of the page.
 <h1>: A heading tag. You can use <h1> to <h6> for headings.
 <p>: Defines a paragraph.

2. Common HTML Tags


Headings

HTML offers six levels of headings, from <h1> (most important) to <h6> (least important).

html
Copy code
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-sub Heading</h3>

Paragraphs
html
Copy code
<p>This is a paragraph.</p>

Links
html
Copy code
<a href="https://www.example.com">This is a link</a>

 The href attribute specifies the destination URL.

Images
html
Copy code
<img src="image.jpg" alt="Description of the image">

 src: Source file for the image.


 alt: Text displayed if the image is not found.

Lists

 Ordered List (numbered):

html
Copy code
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

 Unordered List (bulleted):

html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Tables
html
Copy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

 <table>: Defines the table.


 <tr>: Defines a row.
 <th>: Defines a header cell.
 <td>: Defines a data cell.

3. HTML Attributes
HTML tags can have attributes that provide additional information about elements. They are
always included in the opening tag.

Example:

html
Copy code
<a href="https://www.example.com" target="_blank">Visit Example</a>

 href: Specifies the link destination.


 target="_blank": Opens the link in a new tab.

4. Semantic HTML
Semantic HTML introduces tags that clearly describe their purpose in the webpage.

Examples:

 <header>: Defines a header for a document or section.


 <nav>: Defines a navigation menu.
 <article>: Defines independent content.
 <footer>: Defines a footer for a document or section.

Using semantic HTML helps with search engine optimization (SEO) and accessibility.
5. Forms
HTML forms are used to collect user input. They contain elements like text fields, radio buttons,
checkboxes, etc.

html
Copy code
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<input type="submit" value="Submit">


</form>

 action: Specifies the URL to send the form data to.


 method: Defines the HTTP method to use (GET or POST).

6. Multimedia (Audio & Video)


You can embed multimedia like audio and video in HTML.

 Audio:

html
Copy code
<audio controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

 Video:

html
Copy code
<video controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

7. Comments
You can add comments in HTML that are ignored by the browser. They are helpful for
organizing and explaining the code.

html
Copy code
<!-- This is a comment -->

8. HTML Entities
HTML entities are used to display reserved characters or symbols that otherwise have special
meaning in HTML.

Examples:

 &lt; = <
 &gt; = >
 &amp; = &

9. Block vs Inline Elements


 Block-level elements: Take up the full width available and start on a new line (e.g.,
<div>, <p>, <h1>, <section>).
 Inline elements: Take up only as much width as necessary and do not start on a new line
(e.g., <span>, <a>, <img>).

10. Linking CSS and JavaScript


 Linking CSS:

html
Copy code
<link rel="stylesheet" href="styles.css">

 Linking JavaScript:

html
Copy code
<script src="script.js"></script>

These notes provide a solid foundation for understanding the basics of HTML. You can build
more complex and interactive web pages by combining these concepts with CSS and JavaScript!

You might also like