<!DOCTYPE html>Tells the browser what to expect, although browsers will render your code correctly without it you should always include it to pass validation.
<html lang="en"> </html>Opening and closing tags. All of our HTML code is contained inside of these. We are also using an attribute to define the language used as English.
<head> </head>Will always be our next set of tags, inside of here we set various meta data.
<title> </title>Found inside the head, we enter any text we want to display in the browsers tab name.
<meta charset="utf-8">Found inside the head, we tell the browser what type of character encoding is used with the 'charset' attribute.
<meta name="viewport" content="width=device-width, initial-scale=1">Found inside the head, this line is Required. if we want to make our website responsive to different sized devices.
<body> </body>Inside of these tags is where we build the content displayed in the browser.
<!-- -->Bonus: If we want to comment our code we use this (notice how it's different to a JavaScript comment).
<!DOCTYPE html> <html lang="en"> <head> <title>My First Website</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- This is a comment --> </body> </html>
<h1> </h1>Primary heading - Each page should only ever use one of these.
<h2> </h2>Secondary headings.
<h3> </h3>Tertiary headings.
<p> </p>We define each paragraph using these tags.
<img>The image tag.
<img src="FileLocation/FileName">To display an image we need to add the 'src' attribute which points to the images location. Required.
<img src="FileLocation/FileName" alt="ImageDescription" >We must add the 'alt' attribute with a description of the image. This is used by screen readers to describe an image to the visually impaired. It is also Required. to pass validation. Required.
<div> </div>The standard tag used to group our code, these are recommended for when you are grouping something purely to style it.
<section> </section>Introduced in HTML5, these should be used to group our websites structure into general sections.
<article> </article>Introduced in HTML5, these should be used for more specific groupings within sections.
<ul> </ul>Unordered list - A typical bullet pointed list.
<ol> </ol>Order list - These are numbered.
<li> </li>List item tags go inside our ul and li tags.
<a> </a>If we want to add a link to another page we use this tag.
<a href="fileLocation/FileName"> </a>The 'href' attribute points to the files location. Required.
<a href="fileLocation/FileName" target="_blank"> </a>By adding the 'target' attribute with the '_blank' value the link will open the page in a new tab instead of the current tab. Optional
This code uses everything which has been covered in the previous sections to build a simple webpage.
To see what the code outputs click this link, or build the website yourself!
<!DOCTYPE html> <html lang="en"> <head> <title>My First Website</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- This is a comment --> <h1>HTML Demo</h1> <section> <h2>Section Heading</h2> <p>This section contains two articles</p> <article> <h3>Article Heading</h3> <p>Paragraph... Maecenas nec velit eu mi sodales euismod. Sed aliquet in lectus sodales faucibus. Nullam orci orci, congue vel tempor eu, posuere nec sapien. Mauris eleifend dolor vel pretium commodo. Morbi ullamcorper a eros ut egestas. Quisque aliquet quis sapien vulputate elementum. In efficitur turpis ipsum, at varius nisl euismod sed.</p> </article> <article> <h3>Article Heading</h3> <p>Paragraph... Pellentesque quis justo ac mauris rutrum blandit. Ut risus lectus, placerat eget nulla ac, placerat semper leo. Curabitur tempor dui in nunc volutpat sollicitudin. Vestibulum vel erat euismod tellus rutrum dapibus nec vel metus. </article> </section> <section> <h2>Fruit & Veg</h2> <article> <h3>Fruit</h3> <ul> <li>Apple</li> <li>Orange</li> <li>Pear</li> </ul> </article> <article> <h3>Veg</h3> <ol> <li>Potato</li> <li>Carrot</li> <li>Peas</li> </ol> </article> </section> <p><a href="http:daniel-ellis.co.uk" target="_blank">Click this link to view my website</a></p> <img src="cat.jpg" alt="A cute ginger cat laid on its back in a basket"> </body> </html>