The World Wide Web:
Introduction to HTML
Intro to HTML
- Stands for Hyper-Text Markup Language.
- Every HTML file = one web page.
- Invented by Tim Berners-Lee
- Based on SGML
- Standard language used for creating web pages.
- Comprised of tags
- HTML is for structuring content. It does not perform complex computations.
What Is It?
HTML is a coding language comprised of various types of tags, also known as elements. These are what are used to build web pages. They are the Lincoln Logs of the Internet.
- HTML is used to build web pages by using tags.
- Web browsers "read" HTML and render it as pretty visual elements for humans.
- Difficult to parse
- Poor whitespace rules
Standard Page Structure
<!DOCTYPE html> <html> <head> <title>My House</title> </head> <body> <p>My house is a very very very fine house, with two cats in the yard.</p> <p>Life used to be <strong>so hard</strong>; now everything is easy cause of you.</p> </body> </html>
Attributes further define HTML elements and their purpose. For example, an image tag may have the following attributes:
<img src="/images/cat-pic.jpg" title="Cat Pic" alt="Picture of a fuzzy cat">
- src defines where the image file is located.
- alt is alternative text to be displayed if the image cannot be.
- Attributes are not always required. However in the example above, a source is needed for the image to be displayed.
- Others include style (bad), title (tooltips), href (hyperlink reference)
- Should always be lowercase
Style vs Layout vs Semantics
The war that has raged inside HTML since the beginning of the WWW. Some tags exclusively describe how it's contents should be displayed (ex.
<b>), where as some describe it's contents (ex.
<strong>). Web content isn't just about appearence. It matters how it is intepreted.
- Semantics are all about meaning - what is the purpose?
- Not all HTML elements convey meaning - not all HTML elements are semantic (ex. div).
- Imagine a blind person using a screen reader - how might they understand the difference between a
- Not all elements style content, and not all elements define structure or layout.