Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard markup language used to define the structure and content of webpages.
HTML uses elements to identify different types of content, such as headings, paragraphs, links, images, lists, tables, forms, and sections of a webpage. Web browsers interpret this markup and display the content according to the structure defined by the HTML.
HTML provides the structure of a webpage, while CSS is commonly used to control its appearance and JavaScript can be used to add interactive behavior.
HTML Is a Markup Language
HTML is a markup language, not a programming language. Markup is used to describe the structure and meaning of content within a document.
HTML does this by surrounding or identifying content with elements. These elements tell the browser what different parts of the content represent. For example, HTML can identify text as a heading, paragraph, link, list item, or other type of content.
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="about.html">About Us</a>HTML Uses Elements
HTML documents are made up of HTML elements. Most elements contain an opening tag, content, and a closing tag.
<p>This is a paragraph.</p>In this example, <p> is the opening tag, This is a paragraph. is the content, and </p> is the closing tag.
Together, the opening tag, content, and closing tag form a paragraph element.
Some HTML elements do not contain content and therefore do not use a closing tag. These are known as void elements. The <img> and <br> elements are common examples.
A Basic HTML Document
An HTML webpage is built from a document containing several important elements. The following example shows the basic structure of an HTML document.
Understanding the Document
<!doctype html>identifies the document as modern HTML.<html>is the root element of the HTML document.<head>contains information about the document.<meta charset="utf-8">specifies the document's character encoding.<title>provides the document title.<body>contains the content displayed on the webpage.<h1>defines a top-level heading.<p>defines a paragraph.
How a Browser Uses HTML
When you open a webpage, the browser reads the HTML document and interprets its elements to determine how the content is structured.
The browser does not normally display the HTML tags themselves. Instead, it uses those tags to understand what each part of the document represents and then displays the resulting webpage.
For example:
<h1>My Website</h1>
<p>Welcome to my webpage.</p>The browser recognizes the first element as a heading and the second as a paragraph, then displays each using its default styles unless CSS changes their appearance.
HTML, CSS & JavaScript
HTML is one of the three primary technologies commonly used to create webpages. Each has a different purpose.
- HTML provides the structure and meaning of the content.
- CSS controls the presentation and appearance of the content.
- JavaScript can add interactive behavior and functionality.
A simple way to think about them is that HTML creates the structure, CSS controls how it looks, and JavaScript can control how it behaves.
Why Learn HTML?
HTML is the foundation of webpages, making it an important first language to learn when studying web development or web design.
Understanding HTML allows you to:
- Create and structure webpages.
- Add headings, paragraphs, links, images, lists, and other content.
- Create forms for collecting information from users.
- Organize content using meaningful semantic elements.
- Create webpages that are easier to navigate and understand.
- Understand how CSS and JavaScript interact with webpage content.
- Read and modify the source code of existing webpages.
Even when using website builders or content management systems, understanding HTML can make it much easier to troubleshoot problems and customize webpage content.
HTML Best Practices
As you learn HTML, developing good habits from the beginning will make your webpages easier to understand, maintain, and improve.
- Use HTML elements according to their intended meaning.
- Keep your markup organized and properly nested.
- Use lowercase element and attribute names for consistency.
- Include appropriate alternative text for meaningful images.
- Use headings in a logical hierarchy.
- Separate webpage structure from presentation by using CSS for styling.
- Write HTML with accessibility in mind.
These practices will be covered in greater detail as you work through the HTML tutorials.
Summary
HTML stands for HyperText Markup Language and is used to define the structure and meaning of webpage content. HTML documents are built from elements that identify content such as headings, paragraphs, links, images, forms, and sections.
HTML provides the structure of a webpage, CSS controls its presentation, and JavaScript can add interactive behavior. Learning HTML provides the foundation for understanding how webpages are created.