HTML

BASICS

Objective

  • Write simple HTML documents
  • Understand the difference between closing and self closing tags
  • Write tags with attributes
  • HTML's Semantic
  • Use MDN as a reference
  • Given an image, write the corresponding HTML

HTML Boilerplate

(structure)

  1. html extension is simply .html

  2. the main page of the website usually named index.html

  3. html document mainly contracted  by elements called tags

  4. the tag start with '<' and end with '>' example : '<p>'

  5. there is two types of tags.(Closing Tags, self-Closing Tags)

1. HTML Document

Closing Tags

<p>some text here mainly used for paragraphs </p>

Closing Tags can be nested

<div>
  <p>
    This is a nested text
  </p>
</div>

2. TAGS Types

Self-Closing Tags

<input>

Self closing tag usually needs attributes

2. TAGS Types

<input type="number">

Paragraphs

<p>some text here mainly used for paragraphs </p>
<p>
This paragraph contains
a lot       of spaces and lines
in the source     code,
but the    browser 
ignores it.
</p>

3. Text Elements

Paragraphs (p) poem problem

Solution

<pre>
This paragraph contains
a lot       of spaces and lines
in the source     code,
but the    browser 
will not ignores it.
</pre>

<h1>some text here mainly used for the main title </h1>
<h2>some text here mainly used for the secondary title</h2>
<h3>some text here mainly used for the 3rd level of titles</h3>
<h4>some text here mainly used for the 4th level of titles</h4>
<h5>some text here mainly used for the 5th level of titles</h5>
<h6>some text here mainly used for the 6th level of titles</h6>

3. Text Elements

Headings

The bigger the heading number is the smaller the heading font.

Adding Additional Information To Tags

<tag name="value"></tag>
<img src="image.png"> // image source

<a href="www.google.com">Click me to go to Google</a> // anchor's link

<input type="text"> // input type 

<p class="selected">some text</p> // element class

4. TAG'S ATTRIBUTES

5. COMMENT TAG

<!-- anything inside these wont work in the browser -->

HTML's Semantic & Accessiblity

Using Semantic HTML and designing for accessibility can improve the usability, search engine optimization, and user experience of a website, while also making it easier to maintain and update the content in the future.

HTML's Semantic

  • <header>: Defines a container for the header content of a web page, such as logos, navigation menus, and page titles.

  • <nav>: Defines a container for navigation links, such as menus and links to other pages.

  • <main>: Defines the main content area of a web page.

  • <section>: Defines a section of a web page that groups together related content.

HTML's Semantic

  • <article>: Defines a self-contained article or piece of content that can be syndicated or reused elsewhere.

  • <aside>: Defines a section of a web page that contains tangentially related content, such as sidebars or advertisements.

  • <footer>: Defines a container for the footer content of a web page, such as copyright information, social media links, and contact information.

HTML's Semantic

By using these and other semantic HTML elements appropriately, developers can make their web pages more accessible, usable, and SEO-friendly, while also making it easier to maintain and update the content in the future.

Accessiblity

accessibility in HTML involves designing and coding web pages that can be easily navigated and understood by users with disabilities.

Accessiblity

  • Semantic: By using semantic tags you help accessibility tools to understand the webpage and allow everyone to use it.

  • Alternative Text: The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  • <Declare the Language>: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page.

Accessiblity

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100">
</div>

MDN

MDN Web Docs, previously Mozilla Developer Network and formerly Mozilla Developer Center, is the official Mozilla website for development documentation of web standards and Mozilla projects.

HTML

BASICS
ENDS

1. HTML BASICS

By Youcef Madadi

Made with Slides.com

1. HTML BASICS

  • 314

More from Youcef Madadi