Scribd
Upload
11 views

HTML Documentation

Uploaded by

heyaaru2000
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
11 views

HTML Documentation

Uploaded by

heyaaru2000
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/ 3

Akshay P

HTML
This guide covers the basics of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets),
providing insights into their core components and usage.

HTML (Hypertext Markup Language)


1. HTML Elements
HTML Tag: The foundation of an HTML document. It serves as the container for all other elements.
Everything you want to display on your webpage needs to be nested within these tags.

Head Tag: Situated within the <html> tag, the <head> tag includes metadata and links to external
resources like stylesheets and scripts. It doesn’t display content directly but is essential for defining
the document's settings.

Title Tag: Located inside the <head> tag, the <title> tag sets the title of your web page. This title
appears in the browser tab, giving users a clue about the page's content.

Body Tag: The <body> tag holds all the visible content on the webpage, such as text, images, and
other media. Anything you want users to see should go here.

Heading Tags: HTML provides six levels of headings, from <h1> to <h6>. <h1> is the largest and most
important, while <h6> is the smallest. Use these to structure your content hierarchically.

Div Tag: The <div> tag is a versatile container used to group other elements together. It’s great for
applying styles or managing layout. Think of it as a way to divide your page into sections.

Span Tag: Unlike <div>, the <span> tag is an inline container. It’s used to style or script small chunks
of text or other inline elements without affecting the surrounding content.

Paragraph Tag: The <p> tag defines blocks of text, creating a new paragraph each time it’s used. This
helps in organizing text content into readable sections.

Image Tag: The <img> tag embeds images into your page. The src attribute specifies the image file’s
location, and the alt attribute provides alternative text for accessibility if the image fails to load.

Break Tag: The <br> tag creates a line break within text, useful for breaking up lines of text without
starting a new paragraph.

Horizontal Rule Tag: The <hr> tag inserts a horizontal line across the page. It’s often used to separate
content or sections visually.

Anchor Tag: The <a> tag is used to create hyperlinks. By setting the href attribute, you can link to
other pages or resources. The target attribute controls how the link opens, such as in a new tab.
2. Lists
Ordered List: The <ol> tag creates a numbered list. Each item in the list is defined by the <li> tag. This
is useful for lists where the order matters.

Unordered List: The <ul> tag generates a bulleted list. Like ordered lists, each item is defined by <li>,
but the items are marked with bullets instead of numbers.

List Item: The <li> tag represents an item in both ordered and unordered lists. It’s used within <ol> or
<ul> to define individual list elements.

3. HTML Forms
Form Tag: The <form> tag wraps all form elements. It’s crucial for collecting user input and sending
data to servers. The action attribute specifies where to send the form data, and the method attribute
indicates how data should be sent (e.g., get or post).

Label Tag: The <label> tag provides a label for form elements, improving accessibility by associating
text with form controls. This is especially helpful for screen readers.

Input Tag: The <input> tag creates various types of input fields. Different type attributes (e.g., text,
password, email) dictate the kind of input expected.

4. Common Form Elements


 Text Field: Allows users to input a single line of text. It’s the most basic form of data entry.

 Password Field: Masks user input with dots or asterisks to protect sensitive information like
passwords.

 Email Field: Ensures that the input follows email format conventions, improving data
validation.

 Radio Field: Lets users select one option from a set of choices. All radio buttons in a group
should have the same name attribute to function correctly.

 Checkbox Field: Allows users to select multiple options. Each checkbox operates
independently, so multiple selections are possible.

 Textarea Field: Provides a larger area for multi-line text input, ideal for comments or detailed
information. You can adjust its size with rows and cols attributes.

 Button Field: Creates clickable buttons for submitting forms or triggering other actions.
Buttons can be styled and scripted to perform various functions.
5. HTML Tables
Table Row Tag: The <tr> tag defines a row in a table. It groups together cells that belong to the same
row.

Table Data Tag: The <td> tag defines a cell in a table row, used for displaying data.

Table Header Tag: The <th> tag creates header cells in a table, which are bold and centered by
default. Headers are used to label columns or rows.

Table Head Tag: The <thead> tag groups header content, often used for styling and managing table
headers separately from data rows.

Table Body Tag: The <tbody> tag contains the main data rows of the table. It groups together the
bulk of the table content.

Table Foot Tag: The <tfoot> tag is used for footer rows, often for summary information or footnotes.

6. Semantic Tags
Header Tag: The <header> tag defines introductory content, such as logos, navigation, and
introductory text, typically placed at the top of the page.

Nav Tag: The <nav> tag contains navigation links, making it easier for users to find their way around
the site.

Section Tag: The <section> tag represents a distinct section of content. It’s used to group related
content together, each section usually having its own heading.

Article Tag: The <article> tag is for self-contained content that could stand alone, like blog posts,
news articles, or forum posts.

Aside Tag: The <aside> tag represents content related to the main content but is tangential, like
sidebars or additional information.

Footer Tag: The <footer> tag contains footer information, such as contact details, links, or copyright
statements, usually located at the bottom of the page.

You might also like