HTML is the standard language used to create web pages.
- HTML stands for Hyper Text Markup Language
- It stands for "Hyper Text Markup Language"
- Is used to describe the structure of a web page
- "Elements" are the building blocks of a web page.
- Elements are represented by "tags"
- Tags are used to label pieces of content to give them semantic meaning
- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the document - The
<title>element specifies a title for the document - The
<body>element contains the visible page content - The
<h1>element defines a large heading - The
<p>element defines a paragraph
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes in here!</tagname>HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
The <html> element defines the whole document.
It has a start tag and an end tag .
The element content is another HTML element (the
element).The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
Attributes provide additional information about HTML elements.
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like:
name = "value"
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
<img src="img_girl.jpg">Images in HTML have a set of size attributes, which specifies the width and height of the image:
<img src="img_girl.jpg" width="500" height="600">The image size is specified in pixels: width = "500" means 500 pixels wide.
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
<img src="img_girl.jpg" alt="Girl with a jacket">The style attribute is used to specify the styling of an element, like color, font, size etc.
<p style="color:red">I am a paragraph</p>The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
<p title="I'm a tooltip">This is a paragraph.</p>Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Search engines use the headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
<h1>headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
The HTML <p> element defines a paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove any extra spaces and extra lines when the page is displayed:
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>The <br> tag is an empty tag, which means that it has no end tag.
<pre>The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">The property is a CSS property. The value is a CSS value.
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
The color property defines the text color for an HTML element:
The font-family property defines the font to be used for an HTML element:
The font-size property defines the text size for an HTML element:
The text-align property defines the horizontal text alignment for an HTML element: