The following is far from an exhaustive listing of HTML tags and attributes. It is only intended as an introduction for beginners!
HTML, CSS and Javascipt all play vital and different roles in the modern web.
- CSS: Is all about making it look pretty. Most of the work for the layout and styling should be in the CSS.
The basic structure of a HTML document is:
In this above example, the HTML for your page/project goes within the
my-project.js as denoted by the
Your CSS would be in a seperate file called
my-project.css as denoted by the
HTML is a "tag" based language. The tags are instructions about the content of a webapge, enclosed in triangle brackets. For instance, these are some tags:
<h1>This is a heading of level 1</h1>
<h2>This is a subheading, level 2</h2>
<p>This is a paragraph</p>
Tags can also contain attributes, which contain information relevant to the content the tag is about. For example:
<img src='filename.jpg'>is an image tag, it will load the filename.jpg file from your website and display it.
Two crucially important attributes are
id must be unique to the entire HTML document (ie: can not appear more than once), where as
class is designed to be used multiple times, it can represent a group of things that are similar. For example:
<input type="text" id="firstName" class="input"> <input type="text" id="familyName" class="input"> <input type="text" id="email" class="input">
The rest of this chapter is a reference guide for some of the key "tags" in HTML you should be familiar with.
An 'anchor' tag is the name given to links in the web - those bits of blue text with the underline that you can click on. Generally, they are used to redirect the user to a new page, based on the address you indicate in the
<a href="https://some-website.com/page/document">Description of link</a>
Attributes for an
href: destination for the hyperlink
target: choice of _blank | _parent | _self | _top
DIV & SPAN elements
<span> are generic tags that can be used to divide your content into logical sections. They are useful for CSS purposes as you can "group" different elements together, so these can be used to create layout blocks etc. By default
<div> will behave like a
<p> and include a "new line" after it, where as
<div>This will behave like a paragraph</div> <span>This will behave just as text within an existing line</span>
They don't really have any special attributes, though you would usually have
class specified with these.
These tags might not seem like much, but
<img src="myphoto.jpg" alt="Profile photo">
<video poster="video-poster.jpg" src="my-video.mp4" controls autoplay>