Amarado, Zember Ivan M.
IT-3A
Structure of an HTML document
<!DOCTYPE html> Tag
- The very first line of any HTML document is the `<!DOCTYPE html>` declaration. This line serves
an important purpose. The `<!DOCTYPE>` declaration tells the web browser about what version
of HTML is used in the framing of the document.
<html> Tag
- It is used for wrapping the entire content of your webpage. Everything you see on the webpage,
from the text and images to the links and forms, is enclosed within this `<html>` tag. The
`<html>` element is the root element of your HTML document, which means that all other
elements are its children.
<head> Tag
- section contains meta-information about the webpage that is not directly displayed on the page
itself. For example, it includes the title of the page, which appears in the browser tab, and links
to external resources like CSS and Javascript.
<title> Tag
- is essential because it defines the title of the webpage, which appears in the browser. A clear
and descriptive title help users to quickly identify what the page is about, and it’s also important
for search engine optimization.
<meta> Tag
- The `<meta>` tag provides metadata about the HTML document, such as the character set,
author description, and more.
<link> Tag
- is used to link external resources to the HTML document, such as adding CSS and icons. For
example, if you want to apply a specific style to your whole webpage, you can use the `<link>`
tag to connect your HTML document to an external CSS file.
<body> Tag
- This is where you structure the actual content that users interact with. Without the `<body>`
element, there would be no content displayed on the webpage, making it one of the most
critical parts of an HTML document.
<main> Tag
- It is used to wrap the main content of the webpage. This tag is important because it helps search
engines and screen readers to understand the core content of the page.
<footer> Tag
- is used to define the footer of the webpage. This section usually contains information like
copyright notices, links to privacy policies, and contact information.
<section> Tag
- is used to define sections within the body of the HTML document. Each `<section>` represents a
grouping of content, basically with its own heading. For example, on a news website, each article
could be wrapped in its own `<section>` tag.
<nav> Tag
- is used to define the navigation links on the webpage. These links usually allow users to move
between different pages or sections of the website.
<div> Tag
- is a flexible element used to group together the different parts of the webpage. It doesn’t add
any specific meaning to the content but is commonly used with CSS to apply styles or
with Javascript to manipulate content.
HTML elements (headings, paragraphs, links, images)
HTML IMG tag
- is basically used to display images on a webpage. It is a singleton element, meaning it doesn’t
have a closing tag and it requires a few essential attributes to function correctly.
Paragraphs tag
- <p> … </p> it defines a paragraph of text.
Links
- <li> … </li> It defines a list item within an ordered or unordered list.
Headings
- <h1>Heading</h1> to <h6>Heading</h6>
- It defines headings, with <h1> being the most important and <h6> the least.
HTML Forms and Input Elements
<input>
- is a form control used to gather user input from a web form, including text, numbers,
checkboxes, radio buttons, and file uploads. Users can offer information that can be sent
to a server for processing.
<form>
- It is required when you want to collect information that visitors provide. For example, you may
want to collect specific data from visitors, such as name, email address, and password.
Semantic HTML and accessibility considerations
Semantic HTML Elements
- refers to the practice of using HTML markup to reinforce the semantics, or meaning, of the
information in webpages and web applications rather than merely to define its presentation or
look.
<article> tag
- is used to represent a self-contained, independent piece of content within a web page
<section> tag
- it is defined by the semantic HTML tag known as <section> which often contains a set of linked
contents. The HTML <section> element is utilized because when you upload material to a
website.
< nav > semantic tag
- This semantic element can be positioned anywhere in the document's body, although it's
typically put in the header or footer for site-wide navigation or near the top of the page for
primary navigation menus.
ACCESSIBILITY CONSIDERATION
- it is important to consider accessibility for users with disabilities. This can be done by using
descriptive and clear anchor text to help users understand the destination of the link, and using
the title attribute to provide additional information about the link destination.
- Additionally, using the mailto: protocol for email links allows users to easily open their email
client and send a message. Properly using accessibility attributes such as aria-label can also
provide additional information for screen readers.
