HTML Öğeleri ve Etiketleri Dizini – Kullanımı Kolay Liste 2021
HTML Öğeleri ve Etiketleri Dizini – Kod Örnekleriyle Bir Kullanım Kılavuzu
Tüm temel ortak öğeler ve etiketler ile birlikte yeni HTML5 eklemeleri de dahil olmak üzere kullanışlı bir HTML Öğeleri ve Etiketleri Dizini …
Başka bir şey mi arıyorsunuz? – HTML nedir hakkında genel bir bakış için burayı tıklayın.
Bu HTML Öğeleri ve Etiketleri Dizinini kullanmakla meşgulseniz, bu harika bir haber ve yararlı bulacağınızı umuyoruz! Web sitesi oluşturma çabalarınıza yardımcı olmak için, en iyi web sitesi oluşturma araçlarına ilişkin ipuçları, içgörüler ve incelemeler için bloğumuza göz atmanızı da öneririz.
<a>
Hyperlink element, tag pair required.
A link is created by clicking on anything in between the opening <a> tag and the closing </a> tag. The path to the page (or file) which you wish to link to is made using the href=”” attribute.
EXAMPLE:
<a href=”https://www.thewebputsimply.co.uk”>The Web Put Simply</a>
EXPLANATION:
<a></a> is the link element.
href=”” is the attribute which specifies the link path (enclosed within the quotation marks “”)
The contents of the tag, i.e. “The Web Put Simply” can be clicked on by the user and will open up the specified website.
<abbr>
Element to signify either an abbreviation or an acronym, tag pair required.
You may wish to include an abbreviation or an acronym in your web page. The <abbr> element can be used for this purpose, along with a title=”” attribute on the opening <abbr> tag (see below).
EXAMPLE:
<p>The <abbr title=”World Wide Web”>WWW</abbr> is an example of an abbreviation, though not commonly used!<p>
<p><abbr title=”The Web Put Simply”>TWPS <abbr> is my latest website venture<p>
Note: HTML4 included use of a separate <acronym> element just for acronyms. HTML5 now just makes use of the <abbr> element for both abbreviations and acronyms.
<acronym>
Element to signify an acronym, tag pair required, HTML4 specific (replaced by <abbr>), not supported in HTML5.
EXAMPLE:
<p><acronym title=”The Web Put Simply”>TWPS <acronym> is my latest website venture<p>
Note: HTML5 now just makes use of the <abbr> element for both abbreviations and acronyms.
<address>
Address element, tag pair required.
The <address> element defines contact information for the author or owner of a webpage.
EXAMPLE:
<address>
<p>Written by <a href=”mailto:sam@thewebputsimply.co.uk”>Sam Walsh</a><p>
</address>
<article>
Article element, tag pair required, new to HTML5.
As of HTML5, you can now contain any section of a page which might be considered a stand alone “article”, within the <article> element. Multiple sections of a page could be contained within <article> elements and syndicated, displayed as forum posts, blog or comment entries etc.
EXAMPLE:
<article>
<h1>BUCS Triathlon</h1>
<h2>2011-2012 FULL SEASON RESULTS</h2>
<p>That’s right, the season’s over, the races run, and most have already gone home for the Summer but here we have the definitive collection of results for the 2011-2012 season!</p>
<h3>Includes: BUCS Duathlon, BUCS Sprint Tri…</h3>
</article>
Note: Internet Explorer 8 and previous versions do not support the <article> element.
<aside>
Aside element, tag pair required, new to HTML5.
The <aside> element defines content which is an aside from the main page content. This might take one of two forms/positions. A glossary, pull-quote or other similar information might be considered an aside to a specific article and as such the <aside> element will in the case be used inside an <article> element. In other cases, information might be related to a whole page and might be best placed outside of an article, off to the side or bottom of the page, and contained within its own <aside> element.
EXAMPLE:
<aside>
<section class=”top-5-bikes”>
<h3>Top 5 Bikes in the 2013 Pro Peloton</h3>
<a href=””>Specialized S-Works Tarmac SL4</a>
<a href=””>Cannondale Super-Six Mi-Mod</a>
<a href=””>Cervelo R5CA</a>
<a href=””>Ridley Noah FAST</a>
<a href=””>Trek Madone</a>
</section>
</aside>
Note: Internet Explorer 8 and previous versions do not support the <aside> element.
<audio>
Audio element, tag pair required, new to HTML5.
Defines audio content. New for HTML5 you can now include audio files on your web pages with the <audio> element and using its accompanying attributes to control the playback and features of your chosen audio files.
EXAMPLE:
<audio controls autoplay loop>
<source src=”siren.wav” type=”audio/wav”>
<source src=”siren.ogg” type=”audio/ogg”>
<source src=”siren.mp3″ type=”audio/mpeg”>
<p>Your browser does not support the audio element.</p>
</audio>
Attributes: “src” specifies the file path to your chosen audio file. “controls” specifies whether or not controls should be shown (no controls is default). “autoplay” causes the audio file to begin playing automatically. “preload” might be used when the audio player is not set to autoplay.
“preload” can take the following three values; “none” audio is not loaded until selected by user, “auto” the audio is downloaded when the page is loaded, and “metadata” the browser collects and displays basic information on the audio file such as title and duration.
Notes: Internet Explorer 8 and previous versions do not support the <audio> element. There are currently three audio file formats supported for the <audio> element; MP3, Wav and Ogg. If a web browser is incapable of playing back the audio file, any text between the <audio> and </audio> tags will be displayed instead.
<b>
Bold element, tag pair required.
Any text can be made to appear in bold, by enclosing between <b> and </b> tags.
EXAMPLE:
<p>This is how to make a word appear in <b>bold</b> font type.</p>
<p>You may want to <b>emphasise</b> certain words using the <b>bold</b> element.<p>
<blockquote>
Blockquote element, tag pair required.
The <blockquote> element can be used to signify a body of text such as a long quote or a spoken paragraph. It is also ideal for quoting text content from another source, for which the “cite” attribute should be used.
EXAMPLE:
<p>Here’s what the creators of <a href=”https://www.rollingstockcycles.co.uk”>Rolling Stock Cycles</a> have to say for themselves…<p>
<blockquote cite=”https://www.rollingstockcycles.co.uk/about.php”>The website was founded in the summer of 2011 by recently graduated students and keen cyclists and triathletes from Durham University. The website has been created as a means of providing better exposure for…</blockquote>
Note: By default, many browsers will tend to indent a block of text enclosed by the <blockquote> element.
<body>
Body element, tag pair required.
The <body> element is used to enclose the main contents of the web page. Anything enclosed within the opening <body> and closing </body> tags will be shown inside the main browser window.
EXAMPLE:
<hmtl>
<head>
<title>My First Web Page</title>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css” />
</head>
<body>
<h1>Title of first page</h1>
<p>Welcome to my website, I hope you find the contents and discussions useful</p>
<img src=”images/welcome-image.jpeg” />
</body>
</html>
Explanation: Everything included in the <body> element will be rendered by the browser and displayed to the user. Anything outside the <body> element, such as contents of the <head> element, will not be displayed in the browser, but may inform the browser or provide supplementary information to search engines for example.
<br />
Linebreak element, empty element requiring only a single tag.
The linebreak element is used to force a line break and the start of a new line on a page. It is typically used to place intentional linebreaks into long sections of text and in locations where a new line would otherwise not be the default behaviour or punctuation.
EXAMPLE:
<p>I want this whole body of text to be regarded as one paragraph. <br />But I would like to see certain sections begin on new lines.<p>
Note: The default setting for most browsers is to show each new paragraph on a new line. The linebreak tag <br /> is therefore ideal if you want to start a new line mid-paragraph.
<button>
Button element, tag pair required.
The <button> element allows web designers to control how their buttons and “call to action” features appear in the user’s browser. The button element enables other elements to appear inside the button, meaning that a combination of both images and text can be placed between the <button></button> tags.
The button element is most commonly used in combination with forms, often appearing nested inside a <form> element.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/select-choice.php”>
<button><img src=”images/buttons/select.png” alt=”select-choice” width=”12” height=”12” /> Select</button>
<input type=”hidden” name=”day-of-week” value=”tuesday” />
</form>
<cite>
Cite element, tag pair required.
The <cite> element is used when referencing content from another source, for example a quote from an existing book, a research paper, a song lyric or a piece of film. The <cite> element is used to indicate the source of the citation quoted on the web page.
EXAMPLE:
<p><cite>London Calling</cite> is a well-known and popular song by the British Punk Rock band <b>The Clash</b>.</p>
Note: The default behaviour of most browsers is to display the contents of a <cite> element in italics.
<dd>
Definition element, tag pair required.
The definition element is used to enclose and signify the definition of a specific term. The <dd></dd> tags allow web designers to select definitions and style them to their design using CSS. The element also informs devices such as screen readers, that a definition is being stated.
The <dd> element is often found among a definition list, and in conjunction with the definition list <dl> and the definition term <dt> elements.
EXAMPLE:
<p>A number of terms originating from the French language are commonplace among fans of cycling and other cycle sports. A few a listed and defined below.</p>
<dl>
<dt>Rouleur</dt>
<dd>Typically and “all-rounder”, a cyclists who is equally apt at sprinting, climbing and riding on the flats or rolling hills.</dd>
<dt>Grimpeur</dt>
<dd>A cyclist specialising in climbing. Typically of slight build and very lightweight.</dd>
<dt>Palmares</dt>
<dd>Definition 1.) French, meaning prize list, list of achievements or list of winners.</dd>
<dd>Definition 2.) The list of accomplishments in Sport.</dd>
</dl>
<del>
Delete element, tag pair required.
The <del> element is used to show that text has been deleted from the content. It can be used to as a form of visual markup or annotation, shown on screen and displayed in the browser; which signifies deleted content and will typically show a line through the centre of the text concerned.
EXAMPLE:
<p>Since 2000, le Tour De France has been won by the following riders:<p>
<ul>
<li><del>Lance Armstrong (USA), 2000</del></li>
<li><del>Lance Armstrong (USA), 2001</del></li>
<li><del>Lance Armstrong (USA), 2002</del></li>
<li><del>Lance Armstrong (USA), 2003</del></li>
<li><del>Lance Armstrong (USA), 2004</del></li>
<li><del>Lance Armstrong (USA), 2005</del></li>
<li>Oscar Pereiro (ESP), 2006</li>
<li>Alberto Contador (ESP), 2007</li>
<li>Carlso Satre (ESP), 2008</li>
<li>Alberto Contador (ESP), 2009</li>
<li>Andy Schleck (LUX), 2010</li>
<li>Cadel Evans (AUS), 2011</li>
<li>Sir Bradley Wiggins (GBR), 2012</li>
<li> Christopher Froome (GBR), 2013</li>
</ul>
<dfn>
Defining Instance element, tag pair required.
The <dfn> element is used to signify the defining instance of a new term. It is common practice in books and academic documents to highlight or draw attention to the first appearance of new terminology or the definition of a new concept; this is known as the defining instance.
EXAMPLE:
<p>Welcome to <dfn>The Web Put Simply (TWPS)</dfn>, a website intended to provide resource and insightful help to those starting out in or exploring Web Design and the web in general.</p>
Notes: The <dfn> and <dd> elements are similar in that they both signify definitions, but should be used under different circumstances. Only some browsers will alter the appearance of a <dfn> element by default (typically to italicise its contents), others will not style the contents in any way.
<div>
Div/Container element, tag pair required.
The <div> element is intended to group together a set of related elements in one container (or “box”), for the purpose of better structuring and styling web page content. The <div> element is very versatile in that it can be used by web designers for all manner of purposes and it is common to see many different <div> elements across a website.
Typically a <div> element might be used to group up the elements pertaining to different sections of a web page, for example one <div> might contain the footer of a page. A browser will treat each <div> element and contents as a single block-level element, starting each <div> on a new line.
By default, a browser will not though, make any changes to the appearance and styling of a <div> and its contents. Web designers can employ id or class attributes to their <div> elements to style them using CSS, or even target them for alterations using different web languages and scripts.
EXAMPLE:
<div id=”footer”>
<img src=”images/footer/twps-footer-logo.png” />
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
<li><a href=”site-map.html”>Site Map</a></li>
<li><a href=”terms.html”>Terms</a></li>
<li><a href=”privacy-policy.html”>Privacy & Cookies</a></li>
</ul>
</div>
Note: HTML5 has introduced a number of new elements such as <section>, <header>, and <footer> which will perform the exact same purpose as a <div> element with an attribute of id=”footer” for example. As adoption of these new elements grows, standardisation should increase across websites, but extensive use of the <div> element along with unique id and class attributes for designer’s specific intents will no doubt continue.
<dl>
Definition List element, tag pair required.
The <dl> element is used to express a definition list, which will usually contain a number of definition terms <dt>, and specific definitions <dd>.
EXAMPLE:
<p>A number of terms originating from the French language are commonplace among fans of cycling and other cycle sports. A few a listed and defined below.</p>
<dl>
<dt>Rouleur</dt>
<dd>Typically and “all-rounder”, a cyclists who is equally apt at sprinting, climbing and riding on the flats or rolling hills.</dd>
<dt>Grimpeur</dt>
<dd>A cyclist specialising in climbing. Typically of slight build and very lightweight.</dd>
<dt>Palmares</dt>
<dd>Definition 1.) French, meaning prize list, list of achievements or list of winners.</dd>
<dd>Definition 2.) The list of accomplishments in Sport.</dd>
</dl>
<dt>
Definition Term element, tag pair required.
The definition term <dt> element is used to signify a term which is being defined. It is typically accompanied by definition list <dl>, and definition <dd> elements.
EXAMPLE:
<p>A number of terms originating from the French language are commonplace among fans of cycling and other cycle sports. A few a listed and defined below.</p>
<dl>
<dt>Rouleur</dt>
<dd>Typically and “all-rounder”, a cyclists who is equally apt at sprinting, climbing and riding on the flats or rolling hills.</dd>
<dt>Grimpeur</dt>
<dd>A cyclist specialising in climbing. Typically of slight build and very lightweight.</dd>
<dt>Palmares</dt>
<dd>Definition 1.) French, meaning prize list, list of achievements or list of winners.</dd>
<dd>Definition 2.) The list of accomplishments in Sport.</dd>
</dl>
<em>
Emphasis element, tag pair required.
The <em> element encloses any piece of text which might subtly influence the meaning or the way in which a sentence is read. The piece of text should therefore be emphasized to demonstrate its importance and typically browsers will render the contents of an <em> element in italics for this purpose.
EXAMPLE:
<p>In the following sentence, the words … might each be construed as being significant to the meaning of the sentence depending on whether or not they are emphasised.</p>
<p><em>David</em> was the first to cross the finish line on Saturday.</p>
<p>David was the <em>first</em> to cross the finish line on Saturday.</p>
<p>David was the first to cross the finish line on <em>Saturday</em>.</p>
<embed>
Embed element, empty element requiring only a single tag, new to HTML5.
The <embed> element acts as a container for some external application or interactive content; more commonly known as a “plug-in”. Typical plug-ins which might be included using the <embed> element might be Flash movie files.
EXAMPLE:
<body>
<p>A Flash movie of the cartoon <b>Denis the Menace</b></p>
<embed src=”https://www.thewebputsimply.co.uk/flash/denis-cartoon.swf” height=”300” width=”300”>
</body>
Notes: The <embed> element can be accompanied by any of 4 attributes; src, type, height, and width.
<fieldset>
Fieldset element, tag pair required.
The fieldset element is used in conjunction with forms, specifically to group certain sections or “fields” within a form, so that they are easier for the user to digest and complete/fill-in. Forms are typically made up of a number of controls which might include the <legend>, <label>, and <input> elements; the <fieldset> element should enclose a group of related control elements.
EXAMPLE:
<fieldset>
<legend>Contact Details</legend>
<label>Name:<br />
<input type=”text” name=”name” /></label><br />
<label>Email Address:<br />
<input type=”text” name=”email” /></label><br />
<label>Telephone Number:<br />
<input type=”text” name=”telephone” /></label>
</fieldset>
<fieldset>
<legend>Additional Info.</legend>
<label>Favourite Sports:<br />
<input type=”text” name=”sports” /></label><br />
<label>Favourite Media (Paper/Internet/Radio/etc.):<br />
<input type=”text” name=”media” /></label><br />
<label>How did you hear about us?<br />
<input type=”text” name=”referral” /></label>
</fieldset>
Note: Typically, browsers will render each individual <fieldset> with a line around the edge to enclose the related elements. CSS will allow changes to the styling of these lines and the <fieldset> appearance in general.
<figcaption>
Figure Caption element, tag pair required, new to HTML5.
The <figcaption> element allows the inclusion of an image caption, directly below the image itself. Previously captions could be manually aligned to sit under an element or caption, but there was no way to signify that a caption belonged to a specific element. This association not only provides a better structure to your web page, but also assists devices such a screen readers.
EXAMPLE:
<figure>
<img src=”images/logo/spider-web-large.jpg” alt=”Image of a spider’s web” /><br />
<figcaption>The world wide web takes its name from being likened to a web of interconnected networks and individuals, the most obvious naturally occurring visualisation for this might be a spider’s web.</figcaption>
</figure>
Notes: Internet Explorer 8 and previous versions do not support the <figcaption> element.
<figure>
Figure element, tag pair required, new to HTML5.
The <figure> element is used to contain images, graphs, pictures or figures; and their captions, to ensure the two are associated and presented properly as such. The <figure> element allows more than one image inside each <figure> element, but only one <figcaption> may be associated and used with each <figure>.
EXAMPLE:
<figure>
<img src=”images/web-of-networks.jpg” alt=”Image of a web of networks” /><br />
<img src=”images/spiders-web-large.jpg” alt=”Image of a spider’s web” /><br />
<figcaption>The world wide web takes its name from being likened to a web of interconnected networks and individuals, the most obvious naturally occurring visualisation for this might be a spider’s web.</figcaption>
</figure>
Notes: Internet Explorer 8 and previous versions do not support the <figure> element.
<footer>
Footer element, tag pair required, new to HML5.
The <footer> element is new to HTML5 and can be used to contain and define the footer for either any and/or every page on a website, or to produce footers specific for individual articles or sections within a web page. The <footer> element is designed to work in much the same way as a <div> with the attributes id=”footer”, but with the advantage of being a container element intended specifically for footers.
Screen readers will automatically register and describe the contents or any <footer> element as being part of a designated footer.
EXAMPLE:
<footer>
<img src=”images/footer/twps-footer-logo.png” />
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
<li><a href=”site-map.html”>Site Map</a></li>
<li><a href=”terms.html”>Terms</a></li>
<li><a href=”privacy-policy.html”>Privacy & Cookies</a></li>
</ul>
</footer>
Notes: Internet Explorer 8 and previous versions do not support the <footer> element.
<form>
Form element, tag pair required.
The <form> element allows the inclusion of a form on a web page. The form will typically have a structure made up of a number of controls which might include text inputs, password inputs, buttons and check boxes, drop down lists and selectors, all of which will reside between the <form> and </form> tags. The <form> element itself must include the action attribute, and is often accompanied by the method and id attributes as well.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/comments.php” method=”post” id=”comments-form”>
<p>Do you have any comments or suggestions for our site?</p>
<textarea name=”comments” cols=”30” rows=”5”>Enter your comments/suggestions here…</textarea>
</form>
<h1>
Heading element (1st tier/level), tag pair required.
The <h1> element is used to signify a main heading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h1>This is a top level or Main Heading</h1>
<h2>
Heading element (2nd tier/level), tag pair required.
The <h2> element is used to signify a subheading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h2>This is a level 2 heading or Subheading</h2>
<h3>
Heading element (3rd tier/level), tag pair required.
The <h3> element is used to signify a sub-subheading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h3>This is a level 3 heading or Sub-Subheading</h3>
<h4>
Heading element (4th tier/level), tag pair required.
The <h4> element is used to signify a sub-subheading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h4>This is a level 4 heading or Sub-Subheading</h4>
<h5>
Heading element (5th tier/level), tag pair required.
The <h5> element is used to signify a sub-subheading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h5>This is a level 5 heading or Sub-Subheading</h5>
<h6>
Heading element (6th tier/level), tag pair required.
The <h6> element is used to signify a sub-subheading. Within HTML there are 6 levels or tiers of headings; main headings <h1>, subheadings <h2>, then a succession of further sub-subheadings <h3> through <h6>. By default browsers will display the contents of headings at different font sizes (<h1> the largest, down to <h6> the smallest). However these defaults and the styling applied to each level of heading can be altered and dictated by us of CSS.
EXAMPLE:
<h6>This is a level 6 heading or Sub-Subheading</h6>
<head>
Head element, tag pair required.
The <head> element is used to contain information about a web page, rather than the content of the web page, which is held inside the <body> element. Contents of the <head> element will usually include a <title> element, some meta data which can be used to inform search engines, and any links to external CSS files, scripts etc.
EXAMPLE:
<html>
<head>
<title>The Web Put Simply</title>
<link href=”https://www.thewebputsimply.co.uk/css/styles.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<h1>Welcome to The Web Put Simply</h1>
<p>A first paragraph, all about The Web Put Simply…</p>
</body>
</html>
Note: Although not shown within the main browser window, the contents of the <title> element which sits inside the <head> will most typically be displayed by the browser across the navigation/title bar or the top of the relevant open tab.
<header>
Header element, tag pair required, new to HTML5.
Similar to the footer element, the <header> element is new to HTML5 and can be used to contain and define the header for either any and/or every page on a website, or to produce headers specific for individual articles or sections within a web page. The <header> element is designed to work in much the same way as a <div> with the attributes id=”header”, but with the advantage of being a container element intended specifically for headers.
Screen readers will automatically register and describe the contents or any <header> element as being part of a designated header.
EXAMPLE:
<header>
<h1>The Web Put Simply</h1>
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”basics.html”>The Basics</a></li>
<li><a href=”html.html”>HTML</a></li>
<li><a href=”css.html”>CSS</a></li>
<li><a href=”dynamic-design.html”>Dynamic Design</a></li>
<li><a href=”hosting.html”>Hosting</a></li>
</ul>
</nav>
</header>
Notes: Internet Explorer 8 and previous versions do not support the <header> element.
<hgroup>
Heading Group element, tag pair required, new to HTML5.
Where one or more heading elements are used (<h1> through <h6>), a heading group <hgroup> element can be used to group the headings together and treat them as a single heading. The <hgroup> element might be encountered on web pages where main headings are frequently accompanied by subheadings.
EXAMPLE:
<hgroup>
<h1>The Web Put Simply</h1>
<h2>The website designed to put it simply</h2>
<hgroup>
Notes: Internet Explorer 8 and previous versions do not support the <hgroup> element.
<hr />
Horizontal Rule element, empty element requiring only a single tag.
The <hr /> element will produce a horizontal rule across a web page and between sections.
EXAMPLE:
<ul>
<li>Week Beginning 26th August 2013</li>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</ul>
<hr />
<ul>
<li>Week Beginning 2nd September 2013</li>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</ul>
Notes: The horizontal line produced by the <hr /> element will extend to the limits of whatever element it is contained within. The <hr /> element is treated as a block-level element, meaning it will appear on a new line and any element following it will also fall on a new line.
<html>
HTML element, tag pair required.
The <html> element is the first element you will come across in all HTML documents. Everything between the opening <html> and closing </html> tag is HTML code and the <html> element tells the browser this is the case.
EXAMPLE:
<html>
<head>
<title>A typical web page</title>
<link href=”css/styles.css” />
</head>
<body>
<h1>Welcome to The World Wide Web</h1>
<p>Step inside and learn something new…</p>
</body>
</html>
<i>
Italic element, tag pair required.
The <i> element will italicise its contents, to signify important terms or sections of text which might be spoken differently, for example foreign words, names of places, titles of books and documents, technical terms etc.
EXAMPLE:
<p>This is how to make a word or phrase appear in <i>italic font type</i>.<p>
<p>The Web Put Simply, aka <i>TWPS</i>, is the website resource we all love.<p>
<iframe>
Inline Frame element, tag pair required.
The <iframe> element inserts an inline frame into a web page at the point it is placed. An inline frame is essentially a window embedded on a web page, inside which you can see another web page. A typical and commonplace example of this are the inline frames you see on many site which display a section of a Google Map, specific to a certain location.
Any html page which is accessible on the web can be displayed within an <iframe> element.
EXAMPLE:
<iframe width=”400” height=”300” src=”https://maps.google.co.uk/maps?q=london+kings+cross&output=embed”>
</iframe>
Notes: 3 attributes typically accompany an <iframe> element; the src attribute which specifies the file path or URL to the relevant page, the width and height which specify the iframe width and height respectively (in pixels).
<img>
Image element, empty element requiring only a single tag.
The <img> element enables an image to be placed on a web page. The <img> element should always include the two attributes src, which specifies the file path or URL to the relevant image file, and the alt, which provides a text based description of the selected image which is displayed to the user in the case of the image failing to load/show.
EXAMPLE:
<img src=”images/my-bike-sketch.jpg” alt=”A drawing of my bike” title=”This bike goes up and down hills mega fast!” />
Notes: The <img> element may also include the title, height and width attributes. Most browsers display the contents of the title attribute in a tooltip when a user hovers their cursor over the image, while the height and width attributes specify the image height and width respectively (in pixels).
<input>
Input element, empty element requiring only a single tag.
The <input> element is used to create a number of different form controls, user inputs to web-based forms. The two main attributes which accompany the <input> element are type and name. The type attribute indicates the type of input that form control will create, this can take the values text, password, radio, checkbox, file, submit, image, hidden, date, url, and search.
The name attribute tells the server which form control each piece of data has been entered for. If a user enters a text input stating their email address, then this, along with the name attribute of say “email”; are what will be sent to the server for collection and recording. If a user clicks a “yes” button to indicate their input, then you might expect the name attribute accompanying this input to be “select-yes” for example.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/login.php”>
<p>Email address:
<input type=”email” name=”email” size=”20” maxlength=”35” />
</p>
</form>
Notes: The size attribute dictates the width of the input field displayed to the user, e.g. size=”12” would produce a text box or field wide enough for 12 characters. Use of the size attribute is no longer encouraged in HTML5, use of CSS is preferred as a means of achieving this effect.
The maxlength attribute specifies the maximum number of characters and input can comprise of, this is useful and may be used if you want to limit the user and prevent excessively long inputs being submitted.
<ins>
Insert element, tag pair required.
The <ins> element is used to show that text has been inserted from the content. It can be used to as a form of visual markup or annotation, shown on screen and displayed in the browser; which signifies added or inserted content and will typically show a line under the additional text.
EXAMPLE:
<p>Foods I don’t like:<p>
<ul>
<li>Onions</li>
<li>Chilli</li>
<li>Curry</li>
<li><ins>Baked Beans</ins></li>
<li><ins>Escargots</ins></li>
</ul>
<label>
Label element, tag pair required.
The <label> element is used to indicate the purpose of each form control by providing a label next to it. Proving a label for each form control is good practise and helps visually-impaired users and informs screen readers as to the content they are reading.
There are two possible ways in which to use the <label> element, they are; 1) enclose both the form input and it’s text description within the <label></label> tags, or 2) keep the form control and it’s text description/label separate and use both the id and for attributes to link the two components (see below).
EXAMPLE:
<label>Name: <input type=”text” name=”name” /></label>
<br />
Gender:
<label id=”male” type=”radio” name=”gender” value=”male”>
<label for=”male”>Male</label>
<label id=”female” type=”radio” name=”gender” value=”female”>
<label for=”female”>Female</label>
Note: The second method, that of splitting the form control and label; has been used in the example above where radio buttons have been the input of choice.
<legend>
Legend element, tag pair required.
The legend element is used in conjunction with the <fieldset> element. Where used, the <legend> element sits directly after the opening <fieldset> tag and its contents form a caption at the head of the fieldset which help the user identify the purpose or characteristics of that fieldset.
EXAMPLE:
<fieldset>
<legend>Contact Details</legend>
<label>Name:<br />
<input type=”text” name=”name” /></label><br />
<label>Email Address:<br />
<input type=”text” name=”email” /></label><br />
<label>Telephone Number:<br />
<input type=”text” name=”telephone” /></label>
</fieldset>
<li>
List Item element, tag pair required.
Each item within a list, whether that list is an ordered-list <ol> or unordered-list <ul>, must be placed within an opening and closing <li></li> list item tag pair. By default, browsers will indent the content of each <li> element; this can be styled and altered using CSS.
EXAMPLE:
<ol>
<li><a href=”https://www.thewebputsimply.co.uk/basics”>Read “The Basics”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/html”>Read “HTML”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/css”>Read “CSS”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/dynamic-design”>Read “Dynamic Web Design”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/hosting”>Read “Web Hosting”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/domains”>Read “Web Domain Names”</a></li>
<li><a href=”https://www.thewebputsimply.co.uk/design”>Read “Web Design & Inspiration”</a></li>
<li>Have a go yourself – Build Your First Website!</li>
</ol>
Notes: It is possible to place a second list inside a <li> element, thus creating a nested list. The number of nested lists is not limited and most browsers will by default just indent a nested list further than its parent list. By default, browsers will often change the bullet point style too for each successive nested list where unordered <ul> lists are used.
<link>
Link element, tag pair required.
It is common practise to use the <link> element within the <head> section of a web page, to link to that pages external CSS file. The <link> element uses the same href=”” attribute used by the <a> element, to reference the file path of the hyperlink to be used.
EXAMPLE:
<head>
<title>The Web Put Simply</title>
<link href=”https://www.thewebputsimply.co.uk/css/styles.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<h1>Welcome to The Web Put Simply</h1>
<p>Jump to <a href=”https://www.thewebputsimply.co.uk/basics.html” target=”new” >The Basics</a></p>
</body>
Notes: In the case of the <link> element, the href attribute is used to specify the path to the CSS file (often housed in a sub-folder named “css”, located on the host server). The type attribute lets the browser know what type of document is being linked to; text/css in this case. The rel attribute indicates the relationship between the two files, i.e. the styles.css file is a stylesheet for this html document.
<meta>
Meta Data element, empty element requiring only a single tag.
The <meta> element is used to contain information about web pages and is always nested inside the <head> element of each web page. Content of the <meta> element is not displayed to users in the browser window (unless they specifically use a browser tool such as “view Source”).
Information within the <meta> element is known as “meta-data” and can include who authored the page, any expiry dates set on the web page, and search engine specific information such as the pages description, keywords and instructions for page trawling “robots”.
EXAMPLE:
<html>
<head>
<title>Example Website</title>
<meta name=”description” content=”This example website is all about x, y, and z…” />
<meta name=”keywords” contents=”x, y, z, etc.” />
<meta name=”robots” content=”nofollow” />
<meta http-equiv=”author” content=”Sam Walsh” />
<meta http-equiv=”pragma” content=”no-cache” />
<meta http-equiv=”expires” content=”Wed, 04 Oct 2014 00:00:01 GMT” />
</head>
<body>
</body>
</html>
Notes: description contains a description of the page and is most often used by search engines to determine what the content of the web page is about. description should be a maximum of 155 characters long. The contents of description may also be displayed alongside search engine results.
keywords should include a comma-separated list of the keywords relating to the content that a user might be searching for to arrive at this page.
robots instructs search engines on whether they should index and add this page to their database and search results.
“noindex” should be used if the page shouldn’t be added, while “nofollow” should be used if the page is intended for indexing, but not any pages to which it then links to (i.e. the search engine should not continue to search through and index pages linked from this page).
author states the author of the web page. pragma stops the users web browser from caching the web page, that is; from storing a local copy of the web page to speed up subsequent visits and download times etc.
expires might be used if the web page is set to expire on a certain date sometime in the future (the date must be specified in the format as demonstrated).
<nav>
Navigation element, tag pair required, new to HTML5.
New to HTML5, the <nav> element has been introduced to provide an exclusive container just for containing all the main navigational elements and blocks on a web site. <nav> is typically used for primary site navigation, but may also be used for secondary navigation bars found in side bars, or to house groups of links which might appear at the bottom of a page.
The <nav> element does away with the now outdated method of employing a <div> element with the attribute id=”nav” or id=”navigation”.
EXAMPLE:
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”hosting.html”>Hosting</a></li>
<li><a href=”domains.html”>Domain Names</a></li>
<li><a href=”faqs.html”>FAQs</a></li>
<li><a href=”forum.html”>Forum</a></li>
<li><a href=”more.html”>More</a></li>
</ul>
</nav>
Notes: Internet Explorer 8 and previous versions do not support the <nav> element.
<object>
Object element, tag pair required.
The <object> element is used to embed an object within an HTML document such as multimedia in the form of Flash, video, audio, PDF, or even another webpage. The <object> element is similar in purpose to the <embed> element, but has additional attributes. The <object> element resides within the <body> element, and must include either the data or type attributes.
EXAMPLE:
<html>
<body>
<object width=”300″ height=”300″ data=”denis-cartoon.swf”>
</object>
</body>
</html>
<ol>
Ordered List element, tag pair required.
The ordered list element <ol> contains a list of items which are to be numbered in sequence. Each list item is enclosed in its own <li> element and by default browsers will indent and number the list items in the order they are written. Numbering can take the form of standard numbering, letters, roman numerals etc, and styling of this can be altered through use of CSS.
EXAMPLE:
<ol>
<li>8 Key Steps to Domain Name Set Up</li>
<li>Brainstorm possible names befitting or related to your websites content and purpose</li>
<li>Shortlist 5-10 of your favourites, the most appropriate and the simplest</li>
<li>Use a Domain Name Checking service to search for the availability of each domain name</li>
<li>Determine the best domain name which is available for registration and with the right TLD(s) you require (.com, .co.uk, .org etc.)</li>
<li>Shop around online across the different domain name brokers to find the best deals for that name(s)</li>
<li>Determine the period for which you wish to register you domain name(s)</li>
<li>Purchase and register your domain name(s)</li>
<li>Point your domain name(s) to the servers at your web hosting provider</li>
</ol>
<option>
Option element, tag pair required.
The option element always appears nested within the <select> element which is itself a form control. The <select> element produces a drop down list box from which the user can select one or more options. The <option> element encloses each of these options.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/news-source.php”>
<p>How do you most often hear about the latest News?</p>
<select name=”news-media”>
<option value=”paper”>Newspapers</option>
<option value=”online”>Online</option>
<option value=”radio”>Radio</option>
<option value=”tv”>Television</option>
</select>
</form>
Notes: The value attribute contains the value which is sent to the server for collection and processing (along with the control name) if that particular option is selected. The selected attribute may also be included to indicate that a certain option should be shown pre-selected on page load if this is desired.
If selected is not used, then the first option in the list will be displayed and if the user makes no selection, the first option will be sent to the server by default.
<p>
Paragraph element, tag pair required.
The <p> element encloses a body of text intended to form a paragraph. By default, browsers will separate and display each paragraph with a new line and some space. This can be defined and altered using CSS.
EXAMPLE:
<p>Welcome to The Web Put Simply, I hope you find this online resource a great help in starting or developing your understanding of the web and website design. </p>
<p>Throughout the website you should find useful resources and learning points, each split into relevant sections and with handy examples to make learning new concepts and methods as simple as possible. </p>
<q>
Quote element, tag pair required.
The <q> element is used to enclose short quotes in bodies of text. By default, most browsers will place quotation marks around the contents of the <q></q> tags, however Internet Explorer fails to do this.
EXAMPLE:
<p>The phrase <q>Float like a butterfly, sting like a bee</q> is often associated with heavyweight boxing legend Muhammad Ali</p>
Note: As per the blockquote element, the cite attribute can also be used to indicate the source of a quote. The value of the citation will typically be a URL to a location with information on the source of the quote.
<s>
Strikethrough element, tag pair required.
The strikethrough <s> element is ideal for indicating content that is no longer correct or relevant, but which you may wish to still display and not delete. By default, most browsers will render the contents of an <s> element with a line struck through the centre.
EXAMPLE:
<p>Book on HTML5 & CSS3</p>
<p><s>RRP: £19.95</s></p>
<p>Our Price: £14.99</p>
<script>
Script element, tag pair required.
The <script> element always appears in the <head> element of a web page. Its purpose is to enable a script or separate programme, written in some other web language such as Javascript; to be executed by some command or piece of code also included on the same page.
Each <script> element will typically contain a type attribute stating the language or kind of script to be loaded, and an src attribute to link to an external script file if one is required.
EXAMPLE:
<script type=”text/javascript” src=”js/lightbox.js”></script>
<script type=”text/javascript”> // This is the script for the image galleries
$(function() {
$(‘#gallery a’).lightBox();
});
</script>
Notes: In this example two <script> elements are used in combination. The first <script> element calls an external script named “lightbox.js” which is written in Javascript. The second <script> element then executes a function written in Javascript, to generate a lightbox gallery in the browser window. Without having already loaded the “lightbox.js” Javascript file, the browser would not know how to execute the code written in the second <script>, since the variables and rules in the function are defined by the file “lightbox.js”.
<section>
Section element, tag pair required, new to HTML5.
The section element does what it says on the tin, describes and contains a section in a web document. It is intended to group related items together and is ideal for containing such items together for identification and the application of CSS rules across the common elements. It might also be used for breaking up long articles or pages into separate, easier to digest parts.
EXAMPLE:
<section class=”top-5-bikes”>
<h3>Top 5 Bikes in the 2013 Pro Peloton</h3>
<a href=””>Specialized S-Works Tarmac SL4</a>
<a href=””>Cannondale Super-Six Mi-Mod</a>
<a href=””>Cervelo R5CA</a>
<a href=””>Ridley Noah FAST</a>
<a href=””>Trek Madone</a>
</section>
<section class=”top-5-teams”>
<h3>Top 5 Teams in the 2013 Pro Peloton</h3>
<a href=””>Sky ProCycling (SKY)</a>
<a href=””>Movistar Team (MOV)</a>
<a href=””>Katusha (KAT)</a>
<a href=””>Omega Pharma – Quick-Step Cycling Team (OPQS)</a>
<a href=””>Team Saxo-Tinkoff (TST)</a>
<a href=””>As of August 2013</a>
</section>
Note: Internet Explorer 8 and previous versions do not support the <section> element.
<select>
Select element, tag pair required.
The <select> element produces a drop down list box, which is one of many possible form controls. The <select> element will always contain at least two <option> elements which define the possible options of the drop down list.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/fav-movies.php”>
<p>What are your favourite Peter Jackson movies?</p>
<select name=”pj-movies” size=”7” multiple=”multiple”>
<option value=”kingkong”>King Kong</option>
<option value=”fellowship”>LoTR – Fellowship of the Ring</option>
<option value=”twotowers”>LoTR – Two Towers</option>
<option value=”return”>LoTR – Return of the King</option>
<option value=”hobbit-unexpected”>The Hobbit – An Unexpected Journey</option>
<option value=”district9”>District 9</option>
<option value=”tintin1”>The Adventures of Tintin</option>
</select>
</form>
Notes: A drop down list box, <select> element; can be made to display more than one option at any given time using the size attribute with a value of the number of options to display. A drop down list box can also be turned into a multiple choice drop down list by using the multiple attribute with a value of “multiple”.
<source>
Source element, empty element requiring only a single tag, new to HTML5.
The <source> element is used to define multiple media sources for multimedia content on web pages, specifically video and audio. The <source> element works alongside the new HTML5 elements for <video> and <audio>.
Its purpose is to specify the location of the media file(s) to be played back to the user, instead of using an src attribute on the opening tag of either the <video> or <audio> elements. <source> elements always reside within <video> or <audio> elements and more than one <source> element may be used if multiple media files and formats are available.
EXAMPLE:
<body>
<video poster=”images/twps-video-still.jpg” width=”300” height=”300” preload controls loop>
<source src=”video/twps-introduction.mp4” type=’video/mp4;codecs=”avc1.42E01E, mp4a.40.2”’ />
<source src=”video/twps-introduction.webm” type=’video/webm;codecs=”vp8, vorbis”’ />
<p>A video introducing the website The Web Put Simply</p>
</video>
</body>
Notes: The src attribute specifies the file path or URL to the media file concerned. The type attribute lets the browser know what format the media file is in (various options for both video and audio). The codecs attribute specifies the codec that was used to encode the video file concerned. If a web browser does not support a certain media format (either video or audio) it will try the next option listed.
In the case that none of the file formats contained within each of the <source> elements are supported, the browser will just display whatever is contained within the <video></video> or <audio></audio> tags, i.e. in this example; the text “A video introducing the website The Web Put Simply”. Internet Explorer 8 and previous versions do not support the <source> element.
<span>
Span element, tag pair required.
The <span> element is used to define a section in web page. It behaves like an inline equivalent of the <div> element, making it ideal for containing a number of inline elements, such as text. Typically, <span> elements are used in a similar way to <div> elements; to give designers control over specific web sections and allow them to make changes to certain elements by employing CSS and the class and id selectors.
EXAMPLE:
<p>The colour <span class=”red”>red</span> is most commonly associated with anger.<p>
Notes: The <span> element acts as an inline container, allowing identification and changes to be made to just the text enclosed. In this case, the CSS file might contain a rule for the class of “red” which changes the font-color to red.
<strong>
Strong element, tag pair required.
The <strong> element is used to enclose content which is deemed to have strong importance. By default, most browsers will style the contents of a <strong> element by applying a bold font type, however this can be altered or built upon using CSS.
EXAMPLE:
<p><strong>Beware:</strong> failure to inflate these tyres to the recommended pressure maye result in <strong>severe injury.</strong><p>
<style>
Style element, tag pair required.
The <style> element is used to contain any CSS rules and code, when internal CSS is used and embedded within the HTML document itself. The <style> element is placed within the <head> element on the HTML page to which its CSS contents apply. Use of Internal CSS and the <style> element is not recommended for websites with multiple pages; External CSS is more appropriate for this.
EXAMPLE:
<html>
<head>
<title>An example of an HTML page using Internal CSS and the <style> element</title>
<style type=”text/css”>
body { font-family: arial; background-colour: yellow; font-colour: black;}
h1 { font-size: 42px; font-colour: white;}
</style>
</head>
<body>
<h1>le Tour de France</h1>
<p>The Tour de France is a major cycling race which takes place in France annually. It typically runs for 3 weeks, over a course covering 2000+ miles and covering most parts and regions of France.</p>
</body>
</html>
<sub>
Subscript element, tag pair required.
The <sub> element is used to contain characters (letters, numbers, symbols etc.) which should be displayed subscript.
EXAMPLE:
<p>Water has the chemical formula H<sub>2</sub>O.</p>
<sup>
Superscript element, tag pair required.
The <sup> element is used to contain characters (letters, numbers, symbols etc.) which should be displayed superscript.
EXAMPLE:
<p>This Friday, Friday 30<sup>th</sup> August, I shall be going camping!</p>
<table>
Table element, tag pair required.
The <table> element is used to create tables. Each table is written row by row using table row <tr> elements, each of which contain a number of table data <td> elements containing the table entries.
EXAMPLE:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>*</td>
<td>0</td>
<td>#</td>
</tr>
</table>
<tbody>
Table Body element, tag pair required.
The <tbody> element is one of a number of elements which help define and distinguish different sections of a table. The <tbody> element sits inside the <table> element, but contains all parts which make up the main body of the table, whereas the <thead> element contains the headings of the table, and the <tfoot> element contains the table footer.
EXAMPLE:
<table>
<thead>
<tr>
<th>Name</th>
<th>Apples</th>
<th>Oranges</th>
</tr>
</thead>
<tbody>
<tr>
<th>Frodo</th>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th>Sam</th>
<td>2</td>
<td>4</td>
</tr>
<tr>
<th>Merry</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Pippin</th>
<td>4</td>
<td>1</td>
</tr>
</tbody>
</table>
<td>
Table Data element, tag pair required.
The table data <td> element is used to contain each data entry for a table. <td> elements are contained within <tr> elements which make up the table rows.
EXAMPLE:
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
<textarea>
Text Area element, tag pair required.
The <textarea> element is another form control, this time used for to provide a multi-line text input. By default, any text placed between the <textarea></textarea> tags will be displayed to the user in the browser until deleted and replaced with the users input. If this text is not deleted, it will be sent to the server upon submitting the form control.
EXAMPLE:
<form action=”https://www.thewebputsimply.co.uk/user-comments.php”>
<p>Let us know what you think of our HTML basics section…</p>
<textare name=”html-comments” cols=”25” rows=”5”>Write your comments here…</textarea>
</form>
Notes: Unlike other form input elements, the <textarea> element requires a tag pair.
<tfoot>
Table Footer element, tag pair required.
The <tfoot> element is one of a number of elements which help define and distinguish different sections of a table. The <tfoot> element sits inside the <table> element, but contains all parts which make up the footer of the table, whereas the <thead> element contains the headings of the table, and the <tbody> element contains the main body of the table.
EXAMPLE:
<table>
<thead>
<tr>
<th>Name</th>
<th>Cakes</th>
<th>Chocolate Bars</th>
</tr>
</thead>
<tbody>
<tr>
<th>Gandalf</th>
<td>0</td>
<td>8</td>
</tr>
<tr>
<th>Aragorn</th>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>Elrond</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Sauron</th>
<td>7</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>15</td>
<td>7</td>
</tr>
</tfoot>
</table>
<th>
Table Heading element, tag pair required.
The table heading <th> element is used to enclose a data entry which is to be displayed as a heading of the table. By default, browsers will render the contents of any <th> element in bold and the centre of the cell.
EXAMPLE:
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td>2</td>
<th>3</th>
</tr>
<tr>
<td>B</td>
<td>4</td>
<td>5</td>
<th>6</th>
</tr>
<tr>
<td>C</td>
<td>7</td>
<td>8</td>
<th>9</th>
</tr>
</table>
Note: <th> elements don’t necessarily have to reside inside table headers <thead> elements, you may wish to make all the left column of a table bold, therefore the first entry in each table row can be a <th> element.
<thead>
Table Header element, tag pair required.
The <thead> element is one of a number of elements which help define and distinguish different sections of a table. The <thead> element sits inside the <table> element, but contains all parts which make up the header of the table, whereas the <tbody> element contains the main body of the table, and the <tfooter> element contains the table footer.
EXAMPLE:
<table>
<thead>
<tr>
<th>Name</th>
<th>Bananas</th>
<th>Pears</th>
</tr>
</thead>
<tbody>
<tr>
<th>Legolas</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Gimli</th>
<td>2</td>
<td>4</td>
</tr>
<tr>
<th>Boromir</th>
<td>1</td>
<td>5</td>
</tr>
</tbody>
</table>
<title>
Title element, tag pair required.
Contents of the <title> element are displayed in the browser title bar or on the headers of individual tabs, depending on which browser the user operates. The <title> element is always contained within the <head> element of a HTML page.
EXAMPLE:
<html>
<head
<title>The Web Put Simply</title>
</head>
<body>
<h1>The Basics</h1>
<p>Welcome to The Web Put Simply, in this section, we will discuss the basics of web design…</p>
</body>
</html>
<tr>
Table Row element, tag pair required.
The table row <tr> element is used to enclose sets of table data <td> or <th> elements which make up the rows of a table.
EXAMPLE:
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td>2</td>
<th>3</th>
</tr>
<tr>
<td>B</td>
<td>4</td>
<td>5</td>
<th>6</th>
</tr>
<tr>
<td>C</td>
<td>7</td>
<td>8</td>
<th>9</th>
</tr>
</table>
<u>
Underline element, tag pair required, previous HTML element.
The <u> element is placed around text which is to be underlined. The <u> element was introduced and prevalent in previous versions of HTML but is now being phased out. Browser support for the <u> element will decrease therefore it is advised to use CSS rules for to achieve the same effect (the <ins> element will also achieve the same end result by default).
EXAMPLE:
<p>This text is <u>underlined</u></p>
<ul>
Unordered List element, tag pair required.
The <ul> element encloses an unordered list, i.e. a list of itemised data entries which are not numerically ordered, and will typically be indented and accompanied by a new bullet point for each list item.
EXAMPLE:
<p>A list of my 4 favourite cakes</p>
<ul>
<li>Battenberg</li>
<li>Malt Loaf</li>
<li>Bakewell Tart</li>
<li>Lemon Drizzle</li>
</ul>
<video>
Video element, tag pair required, new to HTML5.
The <video> element is new to HTML5 and intended to be the default method for embedding video files and media onto your web pages. By using the accompanying attributes, you can control the playback and features of your chosen video files. The <video> element resides in the <body> of the HTML page, at the location you wish to embed and display the video file.
EXAMPLE:
<video src=”video/twps-intro.mp4” poster=”images/logos/twps.jpg” width=”300” height=”300” preload controls loop>
<p>A video introducing The Web Put Simply</p>
</video>
Attributes: “src” specifies the file path to your chosen video file. “controls” specifies whether or not controls should be shown (no controls is default). “autoplay” causes the video file to begin playing automatically. “preload” might be used when the video player is not set to autoplay. “preload” can take the following three values; “none” video is not loaded until selected by user, “auto” the video is downloaded when the page is loaded, and “metadata” the browser collects and displays basic information on the video file such as title and duration.
The “poster” attribute places a specified image in the window of the video player while it downloads or until the user selects it. When used, “loop” will replay the video once finished.
Notes: Internet Explorer 8 and previous versions do not support the <video> element. Since not all browsers will support the same video formats, it is recommended that you provide video files in both the H264 and WebM formats, although mp4 and others are also supported by a number of browsers. If a web browser is incapable of playing back the video file, any text between the <video> and </video> tags will be displayed instead.
Page source: https://bit.ly/3mtxnwZ
