{"id":83,"date":"2019-04-10T14:23:19","date_gmt":"2019-04-10T14:23:19","guid":{"rendered":"https:\/\/projects.history.qmul.ac.uk\/handson\/?page_id=83"},"modified":"2023-05-26T13:07:27","modified_gmt":"2023-05-26T13:07:27","slug":"m1l1-html","status":"publish","type":"page","link":"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l1-html\/","title":{"rendered":"[M1L1] HTML: Structuring Web Pages"},"content":{"rendered":"<p>HTML (<strong>H<\/strong>yper<strong>t<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage) is the code that is used to structure a web page and its content. For example,\u00a0content could be structured within a set of paragraphs,\u00a0a list of bulleted points, or using images and tables. When you ask your Web browser to display a page like this one by typing in an address or clicking on a link, it first reads through some HTML that it has been sent \u2018behind the scenes\u2019, interprets it and then shows you a human-friendly version.<\/p>\n<p>HTML is a <em>markup language<\/em> that you use to define the structure of your content.\u00a0 We begin with simple unstructured text, and add code to give it meaning.\u00a0 Let\u2019s start with the following two lines<\/p>\n<pre>My cat is very grumpy.\r\nShe is always sitting on my keyboard.<\/pre>\n<p>This is actually a valid HTML snippet on its own.\u00a0 HTML does not require you to use any markup on text.\u00a0 However, a Web browser would have no idea how we wanted to display these lines, and we have given no clue about their function within the page \u2013 is it a title, a list item, an aside?\u00a0 The browser cannot know unless we tell it.\u00a0 Neither would the it know whether we might want these two sentences laid out separately or together.<\/p>\n<p>To define the structure we would need to use <strong>elements<\/strong> to enclose, or wrap, different parts of the text to make it appear or act in a certain way. Elements come in the form of <b>tags<\/b> that are defined by angle brackets <code>&lt;&gt;<\/code>, for example <code>&lt;p&gt;<\/code>; is a tag indicating a paragraph. Tags tell the browser to make a word link to somewhere else, italicize text, make the font bigger or smaller, show a picture, and so on.<\/p>\n<p>So, let\u2019s see what happens when we put these lines into an editor.\u00a0 I have embedded the Glitch editor below so that you can use it without leaving this lesson.\u00a0 The editor consists of three horizontal panes.\u00a0 On the left, is a list of the files in the project (currently there aren\u2019t many).\u00a0 In the middle is the code of the page you are currently editing, and on the right is the results of running the current code.\u00a0 Inn this case it simulates the result of opening saving our HTML code to a file and opening it up in a web browser:<\/p>\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\"><iframe style=\"height: 100%; width: 100%; border: 0;\" title=\"basic-intro-html on Glitch\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/basic-intro-html?path=README.md&amp;previewSize=100\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><\/div>\n<p>We can immediately see that the \u2018browser\u2019 view on the right is ignoring the line breaks in our text.\u00a0 In fact, if we were to add spaces between the words \u2018My\u2019 and \u2018cat\u2019, we would find that the browser pane on the right did not change.<\/p>\n<p>All \u2018white space\u2019 characters (line breaks, tabs, spaces etc) are treated the same by a web browser: as a simple space.\u00a0 Multiple spaces, line breaks and tabs are also condensed down into a single space.\u00a0 Such treatment of white space is typical feature of many coding languages; it allows programmers to use line breaks to help separate blocks of code that deal with similar themes or indentation to make it clear that a line is dependent on the one above, making code easier for humans to read without conveying any meaning to the computer.<\/p>\n<p>First, let\u2019s tell our web browser\u00a0 we could specify that these lines are paragraphs by enclosing them in <code>p<\/code> tags, so that they look like this:<\/p>\n<pre class=\"brush: html\">&lt;p&gt;My cat is very grumpy.&lt;\/p&gt;\r\n&lt;p&gt;She is always sitting on my keyboard.&lt;\/p&gt;<\/pre>\n<p>Give it a go:<\/p>\n<ul>\n<li>In the Glitch editor, click \u2018Remix to edit\u2019.\u00a0 Glitch will create a copy of the project that you can edit.\u00a0 By it will give your project a title consisting of two English words separated by a hyphen.\u00a0 You can see this name at the bottom of the screen.\u00a0 Make note of it because you may need to find it later.<\/li>\n<li>Place the mouse cursor at the start of the \u2018My cat is very grumpy.\u2019 line<\/li>\n<li>Type <code>&lt;p&gt;<\/code><\/li>\n<li><strong>Woah!<\/strong> &#8211; something weird probably just happened.\u00a0 The Glitch editor (like many code editors) has tried to be helpful by automatically completing your tag, and adding some \u2018padding\u2019 so that it is easier to read.\u00a0 Remember that HTML ignores all white space, so it doesn\u2019t affect display.\u00a0 Unfortunately this \u2018helpful\u2019 behaviour isn\u2019t quite what we want.\u00a0 We need to start each line with <code>&lt;p&gt;<\/code> (the opening tag), and end it with a <code>&lt;\/p&gt;<\/code> (the corresponding closing tag), so&#8230;\n<ul>\n<li>Delete the closing <code>&lt;\/p&gt;<\/code> tag and spaces, so that <code>&lt;p&gt;<\/code> is immediately followed by My cat[&#8230;].\u00a0 At the end of the line, add <code>&lt;\/p&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Repeat these on the line below.<\/li>\n<\/ul>\n<p>As you are editing, the preview pane should automatically update.\u00a0 When you have finished, it should show two separate paragraphs.\u00a0 Congratulations, you have just written your first HTML code!<\/p>\n<h3 id=\"Anatomy_of_an_HTML_element\">Anatomy of an HTML element<\/h3>\n<p>Before we move on, let&#8217;s explore the paragraph element a bit further.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mdn.mozillademos.org\/files\/9347\/grumpy-cat-small.png\" alt=\"\" \/><\/p>\n<p>The main parts of this element are as follows:<\/p>\n<ol>\n<li><strong>The opening tag:<\/strong> This consists of the name of the element (in this case, \u2018p\u2019), wrapped in opening and closing <strong>angle brackets<\/strong>. This states where the element begins or starts to take effect \u2014 in this case where the paragraph begins.<\/li>\n<li><strong>The closing tag:<\/strong> This is the same as the opening tag, except that it includes a <em>forward slash<\/em> before the element name. This states where the element ends \u2014 in this case where the paragraph ends. Failing to add a closing tag is a common error for beginners (and indeed for experts!) and can lead to strange results.<\/li>\n<li><strong>The content:<\/strong> This is the content of the element, which in this case is just text.<\/li>\n<li><strong>The element:<\/strong> The opening tag, the closing tag, and the content together comprise the element.<\/li>\n<\/ol>\n<p>Elements can also have attributes\u00a0that\u00a0look like the following:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mdn.mozillademos.org\/files\/9345\/grumpy-cat-attribute-small.png\" alt=\"\" \/><\/p>\n<p>Attributes contain extra information about the element that you don&#8217;t want to appear in the actual content. Here, <code>class<\/code> is the attribute <em>name<\/em>, and <code>editor-note<\/code> is the attribute <em>value<\/em>.<\/p>\n<p>The <code>class<\/code> attribute allows you to give the element an identifier that can be used later to groups of elements and target them with display rules or other functionality.<\/p>\n<p>An attribute should always have the following:<\/p>\n<ol>\n<li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes).<\/li>\n<li>The attribute name, followed by an equals sign.<\/li>\n<li>The attribute value, enclosed by opening and closing quotation marks.<\/li>\n<\/ol>\n<h3 id=\"Nesting_elements\">Nesting elements<\/h3>\n<p>You can put elements inside other elements \u2014 this is called <strong>nesting<\/strong>. If we wanted to state that our cat is <strong>very<\/strong> grumpy, we could wrap the word &#8220;very&#8221; in a <code>strong<\/code> element, which means that the word is to be strongly emphasized:<\/p>\n<pre class=\"brush: html\">&lt;p&gt;My cat is &lt;strong&gt;very&lt;\/strong&gt; grumpy.&lt;\/p&gt;<\/pre>\n<p>Give this a go in the Glitch editor, and have a look at the result.\u00a0 Remember that you might need to correct the editor\u2019s \u2018helpful\u2019 auto-completion.<\/p>\n<p>You always need to make sure that your elements are properly nested: in the example above, we opened the <code>p<\/code> element first, then the <code>strong<\/code> element;\u00a0therefore, we have to close the <code>strong<\/code> element first, then the <code>p<\/code> element. A fundamental stipulation in the rules of the HTML language is that elements cannot overlap.\u00a0 The following is therefore incorrect:<\/p>\n<pre class=\"example-bad brush: html\">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;\/p&gt;&lt;\/strong&gt;<\/pre>\n<p>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say.\u00a0 Although HTML interpreters are almost universally forgiving, such guesswork can lead to unexpected results. Don&#8217;t do it!<\/p>\n<h3 id=\"Empty_elements\">Empty elements<\/h3>\n<p>Some elements have no content and are called <strong>empty elements<\/strong>. The <code>img<\/code> element is an example of this.\u00a0 It allows us to display an image (hence im[a]g[e] &#8211; img).\u00a0 Here is an example:<\/p>\n<pre class=\"brush: html\">&lt;img src=\"\" alt=\"A cat at work\"&gt;<\/pre>\n<p>This contains two attributes, but there is no closing <code>&lt;\/img&gt;<\/code> tag and no inner content.\u00a0 This is because an image element doesn&#8217;t wrap content to affect it. Its purpose is to display an image in the HTML page.<\/p>\n<p>The <code>alt<\/code> attribute provides an alt[ernative] description for visually-impaired users that is read out by assistive technology, or if the image cannot be shown for some reason (e.g. it has been deleted from the server).\u00a0 The <code>src<\/code> attribute tells the browser where the image file to be displayed is located (its s[ou]rc[e]).<\/p>\n<p>Let\u2019s put this example in our example HTML file.\u00a0 Place the cursor at the end of your two paragraphs, after the final closing <code>&lt;\/p&gt;<\/code> tag, and type (or paste) the image tag above.\u00a0 You\u2019ll notice that the preview page is not yet displaying anything.\u00a0 We have told the browser that there is an image to be displayed, but we have not told it <em>which<\/em> image, so the <code>img<\/code> tag is ignored. We need to enter the address of an image file in the <code>src<\/code> attribute. We can use any image on the web as the address.\u00a0 Let&#8217;s use an image of a cat from WikiMedia commons.\u00a0 Copy the line below, and paste it into the img tag&#8217;s src attribute, between the double quotation marks:<\/p>\n<p><code>https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/f\/ff\/Cat_on_laptop_-_Just_Browsing.jpg\/320px-Cat_on_laptop_-_Just_Browsing.jpg<\/code><\/p>\n<p>Your preview should update to include the image of the cat.\u00a0 If you can\u2019t see the image, check that your <code>img<\/code> tag looks exactly like this, including spaces (or lack thereof).\u00a0 Spaces within the <code>src<\/code> attribute will be treated as part of the filename, and can disrupt display:<\/p>\n<p><code>&lt;img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/f\/ff\/Cat_on_laptop_-_Just_Browsing.jpg\/320px-Cat_on_laptop_-_Just_Browsing.jpg\" alt=\"A cat at work\"&gt;<\/code><\/p>\n<h2 id=\"Marking_up_text\">Marking up text<\/h2>\n<p>This section will cover some of the essential HTML elements you&#8217;ll use for marking up the text.<\/p>\n<h3 id=\"Headings\">Headings<\/h3>\n<p>Heading elements allow you to specify that certain parts of your content are headings \u2014 or subheadings. In the same way that a book has the main title,\u00a0chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, h1-h6, denoting descending levels of importance:<\/p>\n<pre class=\"brush: html\">&lt;h1&gt;Main Title&lt;\/h1&gt;\r\n&lt;h2&gt;Top-level Heading&lt;\/h2&gt;\r\n&lt;h3&gt;Subheading&lt;\/h3&gt;\r\n&lt;h4&gt;Sub-subheading&lt;\/h4&gt;<\/pre>\n<p>Now try\u00a0adding a suitable title to your HTML page at the top.<\/p>\n<div class=\"note\">\n<p>You&#8217;ll see that your heading level 1 is displayed differently.\u00a0 This is because browsers have a set of built-in typographical rules for displaying common elements.\u00a0 We will discover how to amend these default styles in the next lesson.<\/p>\n<p>It is important that you don&#8217;t just use heading elements simply to make text bigger or bold unless that text is really a heading within the structure of your document.\u00a0 Like other HTML elements h1-h6 have a <em>semantic <\/em>function, not an aesthetic one. \u00a0 That is to say that that they convey meaning about the function of the content they enclose, rather than simply describing how you want it to look.\u00a0 The aesthetics of elements on your page is defined using Cascading Style Sheets.\u00a0 They are also used for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Accessibility\/HTML#Text_content\">accessibility<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\/HTML_text_fundamentals#Why_do_we_need_structure\">other reasons such as Search Engine Optimisation (SEO)<\/a>. Try to create a meaningful sequence of headings on your pages, without skipping levels.<\/p>\n<\/div>\n<h3 id=\"Paragraphs\">Paragraphs<\/h3>\n<p>As we saw above, p elements are for containing paragraphs of text; you&#8217;ll use these frequently when marking up regular text content:<\/p>\n<pre class=\"brush: html\">&lt;p&gt;This is a single paragraph&lt;\/p&gt;<\/pre>\n<p>A few paragraphs to your page below your <code>img<\/code> element.<\/p>\n<h3 id=\"Lists\">Lists<\/h3>\n<p>HTML has special elements for adding lists of various kinds. The markup for lists always consist of at least 2 elements to identify the list itself and its individual items. The most common list types are ordered and unordered lists:<\/p>\n<ol>\n<li><strong>Unordered lists<\/strong> are for lists where the order of the items doesn&#8217;t matter, such as a shopping list. These are wrapped in a <code>ul<\/code> element.<\/li>\n<li><strong>Ordered lists<\/strong> are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <code>ol<\/code> element.<\/li>\n<\/ol>\n<p>Each item inside the lists is put inside an <code>li<\/code> (list item) element.<\/p>\n<p>For example, if we wanted to turn the part of the following paragraph fragment into a list<\/p>\n<pre class=\"brush: html\">&lt;p&gt;My cat is proud, mischievous, and independent, but she always comes home for food.&lt;\/p&gt;<\/pre>\n<p>We could modify the markup to\u00a0this<\/p>\n<pre class=\"brush: html\">&lt;p&gt;My cat is&lt;\/p&gt;\r\n    \r\n&lt;ul&gt; \r\n  &lt;li&gt;proud&lt;\/li&gt;\r\n  &lt;li&gt;mischievous&lt;\/li&gt;\r\n  &lt;li&gt;independent&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n\r\n&lt;p&gt;but she always comes home for food.&lt;\/p&gt;<\/pre>\n<p>Try adding an ordered or unordered list to your example page.<\/p>\n<h3>Links<\/h3>\n<p>Links are very important \u2014 they are what makes the Web a web! To add a link, we need to use a simple element \u2014 <code>a<\/code> \u2014 an a[nchor] that links us to another document. To make text within your paragraph into a link, follow\u00a0these steps:<\/p>\n<ol>\n<li>Choose some text. We chose the text &#8220;my cat&#8221;.<\/li>\n<li>Wrap the text in an <code>a<\/code> element, as shown below:\n<pre class=\"brush: html\">&lt;a&gt;My cat&lt;\/a&gt;<\/pre>\n<\/li>\n<li>Give the <code>a<\/code> element an <code>href<\/code> attribute, as shown below:\n<pre class=\"brush: html\">&lt;a href=\"\"&gt;My cat&lt;\/a&gt;<\/pre>\n<\/li>\n<li>Fill in the value of this attribute with the web address that you want the link to link to, in this case the Wikipedia page for cats:\n<pre class=\"brush: html\">&lt;a href=\"https:\/\/en.wikipedia.org\/wiki\/Cat\"&gt;My Cat&lt;\/a&gt;<\/pre>\n<\/li>\n<\/ol>\n<p>You might get unexpected results if you omit the <code>https:\/\/<\/code> or <code>http:\/\/<\/code> part, called the <em>protocol<\/em>, at the beginning of the web address.<\/p>\n<p>After making a link, click it to make sure it is sending you where you wanted to go.\u00a0 If you want to avoid navigating away from the page you are on, hold down Ctrl (Cmd on a Mac) and the link will open in a new window or tab.<\/p>\n<p>Another important protocol in links is mailto:. The mailto: protocol tells the browser that the following text is an email address.\u00a0 An example use of this protocol is as follows:<\/p>\n<p>&lt;p&gt;If you want to contact her, just &lt;a href=&#8221;mailto:kitty@example.com&#8221;&gt;send my cat an email&lt;\/a&gt;.&lt;\/p&gt;<\/p>\n<div class=\"note\">\n<p><code>href<\/code> might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for <em><strong>h<\/strong>ypertext <strong>ref<\/strong>erence<\/em>.<\/p>\n<\/div>\n<p>Add a link to your page now, if you haven&#8217;t already done so.<\/p>\n<h3 id=\"Links\">Sections<\/h3>\n<p>We often need to group together sections of content within an HTML page so that we can display them in a certain way (for example in a box).\u00a0 Authors often use the div element to do this.\u00a0 The div[ision] element is used to mark up a logical block of text, images, lists etc.\u00a0 Remember that elements cannot overlap, so a div cannot \u2013 for example \u2013 contain only part of a paragraph.\u00a0 Used on its own it has no effect on the content of your page, but we will see in the next lesson how you can use style rules to unleash the power of the div.<\/p>\n<p>Note: HTML provides a few other elements that can be used in a similar way to the div (e.g. section, nav, aside, header and footer).\u00a0 In contrast to the div, which is agnostic about its content, these semantic elements all convey meaning about the function of their content.\u00a0 <code>section<\/code> marks a logical section within the document; <code>nav<\/code> contains some kind of navigation aid; <code>aside<\/code> is a supplementary comment; <code>header<\/code> belongs at the head of the document or section and <code>footer<\/code> at the end.\u00a0 They can be used interchangeably with the <code>div<\/code> but should .<\/p>\n<h3 id=\"Anatomy_of_an_HTML_document\">Anatomy of an HTML document<\/h3>\n<p>So far we have been dealing with snippets of HTML, but we have not created a complete document.\u00a0 Browsers display the snippets we have written because they are forgiving, but they are not technically valid HTML.\u00a0 To create a page, we need a bit of structure to label the page and provide some metadata.<\/p>\n<p>Here is an example of a valid HTML page, which displays the text \u2018Hello world!\u2019:<\/p>\n<pre class=\"brush: html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;My test page&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;p&gt;Hello World!&lt;\/p&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Here, we have the following:<\/p>\n<ul>\n<li><code>&lt;!DOCTYPE html&gt;<\/code> \u2014 The doctype. In the mists of time, when HTML was young (around 1991\/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, they are now for the most part just a historical artifact that needs to be included for everything to work right.<\/li>\n<li><code>&lt;html&gt;&lt;\/html&gt;<\/code> \u2014 the html element. This element wraps all the content on the entire page and is sometimes known as the root element.<\/li>\n<li><code>&lt;head&gt;&lt;\/head&gt;<\/code> \u2014 the head element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn&#8217;t<\/em> the content you are showing to your page&#8217;s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.<\/li>\n<li><code>&lt;meta charset=\"utf-8\"&gt;<\/code> \u2014 This element sets the character set your document should use.\u00a0 A character set is in some ways analagous to an alphabet; it defines which characters and symbols you can write in.\u00a0 The one we have selected here, UTF-8 is a kind of super-set of characters which includes characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.<\/li>\n<li><code>&lt;title&gt;&lt;\/title&gt;<\/code> \u2014 the title element.\u00a0This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It\u00a0is also used to describe the page when you bookmark\/favourite it.<\/li>\n<li><code>&lt;body&gt;&lt;\/body&gt;<\/code> \u2014 the body element. This contains <em>all<\/em> the content that you want to show to web users when they visit your page, whether that&#8217;s text, images, videos, games, playable audio tracks, or whatever else.<\/li>\n<li>&lt;p&gt;&lt;\/p&gt; \u2013 we\u2019ve seen this tag before; it is the paragraph element.<\/li>\n<\/ul>\n<h2>Building our Example Page<\/h2>\n<p>Now that we have the basics down, let\u2019s begin to build our profile page.<\/p>\n<p>We\u2019re going to overwrite the content of our index.html page, so if you want to keep it, take a copy by using the menu on the right-hand side and clicking Copy.\u00a0 Once you have created your new file, switch back to the original index.html and delete everything there.<\/p>\n<p>Next, open up the sample-profile.html page, and copy it into index.html.<\/p>\n<p>Now you will need to change all the text about me to being about you, as well as updating all the links.\u00a0 Feel free to add as much additional text as you would like.\u00a0 Remember that Glitch is a tool for teaching and experimentation and it isn\u2019t password protected.\u00a0 You should only include text that you would be comfortable appearing in a public forum.<\/p>\n<p>You might also want to add a profile photo or avatar.\u00a0 If there isn&#8217;t already an image of you on a public website that you can point an img element at, you can upload one directly to Glitch.\u00a0 This is a simple process:<\/p>\n<ul>\n<li>First, locate the image you want to use on your computer.\u00a0 Make sure it is an appropriate size.\u00a0 If the name of the file contains spaces, you might also want to rename it so that it only uses lower case letters and has no spaces; web browsers find simple filenames like this easier to deal with.<\/li>\n<li>In the left-hand (file) pane of the Glitch editor, switch to the Assets folder.<\/li>\n<li>Click on the \u2018Add Asset\u2019 menu, then select \u2018Upload\u2019.<\/li>\n<li>Find your image and upload it.<\/li>\n<li>To place your image, you will need to create an <code>img<\/code> tag, like this <code>&lt;img src=\"\" alt=\"A headshot of me, looking professional\" &gt;<\/code><\/li>\n<\/ul>\n<p>You will need to set the src attribute to point to the file you uploaded.\u00a0 We can do this using a <em>relative<\/em> file path, and do not need the <code>http:\/\/<\/code> or <code>https:\/\/<\/code> protocols.\u00a0 When we use a relative protocol the browser starts looking in the folder that our HTML file is in and moves from there.\u00a0 For example, if our file was called <code>my-photo.jpeg<\/code>, the <code>src<\/code> attribute would look like this: <code>src=\"assets\/my-photo.jpeg\"<\/code>.<\/p>\n<p>If you have finished editing, you are ready to <a href=\"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l2-css\/\">Go to the Next Lesson &gt;<\/a><\/p>\n<p>This lesson is adapted from Mozilla\u2019s Excellent \u2018<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\">Getting Started with the Web<\/a>\u2019 tutorials.\u00a0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\">HTML basics<\/a> by <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics$history\">Mozilla Contributors<\/a> is licensed under the <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/2.5\/\">Creative Commons Attribution-ShareAlike 2.5 Generic<\/a> license.\u00a0 This page is similarly licensed under CC-BY-SA 2.5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example,\u00a0content could be structured within a set of paragraphs,\u00a0a list of bulleted points, or using images and tables. When you ask your Web browser to display a page like this one by typing in an address [&#8230;] <a class=\"read-more\" href=\"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l1-html\/\">Read More<\/a><\/p>\n","protected":false},"author":69,"featured_media":0,"parent":77,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":24,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":452,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/83\/revisions\/452"}],"up":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/77"}],"wp:attachment":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/media?parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}