HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements"
The W3C Markup Validation Service is an online tool provided by the World Wide Web Consortium (W3C), which is a standards organization for the World Wide Web. The purpose of the website is to validate the markup validity of web documents. In simpler terms, it allows you to check whether the HTML or XHTML code of a web page conforms to the defined standards and rules set by the W3C.
<head>
<title>
<body>
<header>
<footer>
<article>
<section>
<p>
<div>
<span>
<img>
<aside>
<audio>
<canvas>
<datalist>
<details>
<embed>
<nav>
<output>
<progress>
<video>
<ul>
<ol>
<li>
With elements such as <html> you can add Attributes which lie inside of the element.
- For example
<html lang="en-US"> - This html element now has the attribute lang that provides the language "en-US" as the websites standard.
The standard for most web pages requires element such as:
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="author" content="Devop Parker">
<meta name="description" content="This page contains information to learn HTML">
- These elements provide details about your webpage, such as the "html" Documentation Type and the meta data that can be used to locate particular details about your website.
<a href="URL or FileLocation">
- The href attribute specifies the URL of the page the link goes to.
- You can use href="#top" or href="#" to link to the top of the current page.
- Adding the download tag inside of an anchor tag allows the user to download the contents of that href inside of the anchor tag.
- Another useful tag for the anchor element is
target="_blank"this allows you to open the href into a new browser tab.
<link rel="icon" href="html5.png" type="image/x-icon">
<link rel="stylesheet" href="main.css" type="text/css">
The link element can be used with href to add icons to the title, and even "link" your css stylesheet to your index.html file.
"White space" refers to empty or blank values in the code which the browser reads and renders. Html has a special feature of collapsing these white spaces. If you put extra/consecutive white spaces or newlines in the code it will regard it as one white space this is known as collapsing of white spaces.
The <br> tag allows us to "break" the link in for example a paragraph.
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
A block-level element always starts on a new line, and the browser automatically add some space (margin) before and after the element.
Two common block elements are: <p> and <div>
An inline element does not start on a new line. An inline element only takes up as much width as necessary
For example a <span>, <em> or <strong> element inside a paragraph.
These entities are used to represent special characters or symbols that have special meanings in HTML, ensuring they are displayed correctly in the browser.
& - Represents the ampersand character '&'.
< - Represents the less-than symbol '<'.
> - Represents the greater-than symbol '>'.
" - Represents the double quotation mark '"'.
' - Represents the apostrophe character ''', though not widely supported in HTML.
- Represents a non-breaking space.
© - Represents the copyright symbol '©'.
® - Represents the registered trademark symbol '®'.
™ - Represents the trademark symbol '™'.
€ - Represents the euro currency symbol '€'.
<ol> - Ordered Lists
<ul> - Unordered Lists
<li> - List items
<dl> - Description List
<dt> - Description Term
<dd> - Description Details
For lists you can start it with the ol, ul, or dl elements. Inside that block you will add items such as li to start the items in that list. <dl> sits flush with the left side of the page, unlike <ol> and can use terms and details to create a more detailed type of list.
The <img> element is used to implement images onto a webpage. The img element has multiple attributes that are essential to create a healthy image on the page. The most import attribute would be the src="" attribute. This allows the element to find the source of the image in the websites file system. Most common practice would be to create an img folder to have all of your images in one place, and easily accessible.
Example:
<img src="img/html_logo.png" alt="HTML5 Logo" title="HTML5" width="300" height="300">
- The alt attribute is used for screen readers and when the image fails to load, it will be replaced by the text inside.
- The title attribute is the text displayed when hovering over the image.
- The width and height attributes (in pixels) will crop the image to the size given, this doesn't always crop nicely, it should mostly be used with the identical size of the original image.
There is also a attribute type loading=""
By default, this is set to "eager" which loads all images on the page immediately.
The term "lazy" refers to a useful value that delays the loading of images until certain criteria are met, such as when they are beyond the current page's scope and will be loaded in only when the user scrolls down. This allows better perfomance on the webpage if you have many pictures that don't instantly load into the page when the user opens it.
An element that goes well with images, is the <figure> element. This allows you to create captions with the item or object inside of the figure's codeblock. Inside of the figure element, you can use <figcaption> to create a caption right below or above the item.
- Loremipsum - This has tons of placeholders to help when designing a website, including image placeholders
- Unspalsh - This site contains free images that are allowed to be used on your website.
- Pexels - Same as Unsplash
- IrfanView - An application with tons of image editing features to resize, crop and many more.
Tables structure tabular data, made up of columns and rows. These are commonly used for calenders, schedules, statistics and more.
An example table:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
An HTML table is created with an opening <table> tag and a closing </table> tag. Inside these tags, data is organized into rows and columns by using opening and closing table row <tr> tags and opening and closing table data <td> tags.
Table row <tr> tags are used to create a row of data. Inside opening and closing table <tr> tags, opening and closing table data <td> tags are used to organize data in columns.
Semantic HTML refers to the use of HTML tags that convey the meaning or semantics of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page. Semantic
HTML includes:
- <header>
- <nav>
- <main>
- <article>
- <figure>
- <p>
- <section>
- <aside>
- <footer>
These elements are all very useful in defining the Heirarchy of the HTML5 page.
While some elements are still commonly used in the practice such as <div> and <span> they provide very little semantics to the site.