Intro to HTML lesson

HTML forms the foundation of web development and understanding its basics is essential for designers. It's like peeking behind the curtains and discovering the building blocks that make up every web page.

With HTML, you'll gain insight into the structure and content of websites. It's the language that defines the elements, such as headings, paragraphs, images, and links, which shape the user experience. By familiarizing yourself with HTML, you'll be able to understand how these elements come together to create a cohesive and engaging web page.

While you don't need to become an expert developer, having a solid understanding of HTML empowers you to collaborate effectively with developers and ensures your designs translate seamlessly into functional web experiences.

Exercise #1

Hypertext Markup Language

HTML or Hypertext Markup Language is the first language all web designers and developers learn when it comes to front-end development. Hypertext defines links between the web pages for users to access the content on a webpage with a simple click. Markup language is all about tags enclosed in brackets < > that usually come in pairs. Browsers interpret those tags and present text, images, and other content to users in a required familiar format.

Tim Berners-Lee created the first HTML version in 1991, which evolved into the current HTML5 version.^[1] Right now, it contains around 100 tags with HTML attributes that alter their function or look.

Exercise #2

Page structure

The basic HTML page consists of simple building-block HTML elements, such as doctype declaration, HTML, head, title, and body tags. Like all tags, they start and end with an angle bracket <…>. To create an HTML document, you can use built-in text editors like Notepad (Windows) and TextEdit (Mac). Save the file using .html or .htm, and voilà! — you can open it as a webpage in any browser.

Exercise #3

<!DOCTYPE html>

Every page starts with a <!DOCTYPE html> declaration. Technically, it's not even a tag but a signal to a browser that the page uses the latest HTML5 version. In contrast to real tags, <!DOCTYPE> must appear only once — at the top of the page. The doctype declaration is not case-sensitive, and you can write it either way.

Exercise #4

The <html> tag

After the <!DOCTYPE html> goes the <html> tag — the cornerstone of any web page. Like all tags, it starts and ends with an angle bracket. With <html>, the closing </html> tag creates an obligatory frame that marks your document's borders.

One more thing to remember — the HTML isn't case sensitive, and you can write it whichever way you like <html> or <HTML>. Remember to keep it consistent and use either lowercase or uppercase.

Exercise #5

The <head> tag

The <head> element follows the <html> tag and contains metadata using <meta> tags, which is invisible to end-users but essential. Simply put, <meta> tags contain information about information and provide a summary of a web page, including character set, page description, keywords, author of the document, and viewport settings (the visible area of the page to users).

Search engines like Google analyze a website's meta tags to understand its purpose and use them to generate snippets — titles and descriptions for a page of search results.^[2]

Exercise #6

The <title> tag

The <title> tag is a part of the <head> section that contains the "behind the scenes" elements for a webpage. That's right; users don't see the <title> tag on a page — don't confuse it with headlines. Users can only view the content inside this element, such as the browser's title bar, the page's tab, or the search results. Don't forget to close the section with the </title> to mark up the end.

Exercise #7

The <body> tag

The only content that users see on a page is inside the opening and closing body tags — <body> and </body>. This part includes headings that web designers define with the <h1> to <h6> tags. The <h1> stands for the most important headline, while the <h6> is for the least important.

If you need to add a paragraph in HTML, you put the text inside <p> and </p> tags. In addition to this, the body section can contain images, hyperlinks, tables, lists, and other types of content.

Exercise #8

Page structure

When meeting new people, you don't spit out your whole life story in the very first few minutes. Likewise, you need to introduce the page to the browser first and provide the <!DOCTYPE> and metadata. The <html> tag is followed by the <head>, and only then comes the <body> section. Don't mess with the standard structure of the web page — it works perfectly.

Exercise #9

W3C

Like any standards, web standards exist for the sake of preventing chaos in the world. But who is responsible for the creation of web rules? This task falls on the shoulders of so-called "Standards Development Organisations" or SDOs. The World Wide Web Consortium (W3C) is one of the most well-known standard bodies that invites tech people to work together and develop web standards. Their goal is to help developers build functional, accessible, and cross-compatible products.

The W3C was formed in 1994 by Tim Berners-Lee at The Massachusetts Institute of Technology (MIT) in partnership with The European Organization for Nuclear Research (CERN).^[3] In addition to web standards, the W3C provides educational courses, develops software, and promotes an open forum for discussion about the Web.