An HTML element is defined by a start tag, some content, and an end tag.<\/p>\n\n\n\n
The HTML element is everything from the start tag to the end tag.<\/p>\n\n\n\n
HTML elements can be nested (this means that elements can contain other elements), but nested elements must close before the higher level tags close.<\/p>\n\n\n\n
All HTML documents consist of nested HTML elements.<\/p>\n\n\n\n
HTML elements with no content are called empty elements.<\/p>\n\n\n\n
The br tag defines a line break and is an empty element without a closing tag.<\/p>\n\n\n\n
<p>Hello everyone<\/p><\/code><\/pre>\n\n\n\n<a href=\"index.html\">click here<\/a><\/code><\/pre>\n\n\n\n<div>\n <h1>Heading<\/h1>\n <p class=\"largered\">Paragraph 1<\/p>\n<\/div><\/code><\/pre>\n<\/div>\n\n\n\n\nInvalid<\/h3>\n\n\n\n<p>Hello everyone<\/code><\/pre>\n\n\n\n<a href=\"index.html\">click here<a><\/code><\/pre>\n\n\n\n<div>\n <h1>Heading<\/h1>\n <p class=\"largered\">Paragraph 1<\/div>\n<\/p><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nTypes of tag<\/h2>\n\n\n\n
We will split that tags into the groups:<\/p>\n\n\n\n
- Special<\/li>
- Layout<\/li>
- Text<\/li>
- Multimedia<\/li>
- Forms<\/li>
- Advanced and rarely used<\/li><\/ul>\n\n\n\n
Special<\/h3>\n\n\n\n
Tags that don\u2019t have a graphical aim or alter the layout. These are often mandatory for a valid HTML document.<\/p>\n\n\n\n
- <html><\/li>
- <!DOCTYPE><\/li>
- <head><\/li>
- <link><\/li>
- <meta><\/li>
- <script><\/li>
- <style><\/li>
- <title><\/li>
- <body><\/li><\/ul>\n\n\n\n
Layout<\/h3>\n\n\n\n
Layout elements are used to position the elements of the webpage on the screen.<\/p>\n\n\n\n
- <header><\/li>
- <nav><\/li>
- <main><\/li>
- <div><\/li>
- <section><\/li>
- <footer><\/li><\/ul>\n\n\n\n
Text<\/h3>\n\n\n\n
Text elements control how text is either displayed or grouped.<\/p>\n\n\n\n
- <a><\/li>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6><\/li>
- <p><\/li>
- <ul>, <ol>, <li><\/li>
- <strong><\/li>
- <em><\/li>
- <i><\/li>
- <span><\/li>
- <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td><\/li><\/ul>\n\n\n\n
Multimedia<\/h3>\n\n\n\n
Multimedia tags are used for all the content that isn\u2019t simply text.<\/p>\n\n\n\n
- <source><\/li>
- <audio><\/li>
- <video><\/li>
- <picture><\/li>
- <img><\/li>
- <embed><\/li><\/ul>\n\n\n\n
Forms<\/h3>\n\n\n\n
If you need a user to send data from the website you need to use form elements.<\/p>\n\n\n\n
- <form><\/li>
- <button><\/li>
- <input><\/li>
- <label><\/li>
- <select>, <option><\/li>
- <textarea><\/li>
- <fieldset><\/li><\/ul>\n\n\n\n
\n\n\n\nThere are many more tags that can be used for special purposes. For more information on any tags, you can find details online at https:\/\/www.w3schools.com\/html\/default.asp<\/a><\/p>\n\n\n\n
\n\n\n\nAttributes<\/h2>\n\n\n\n
HTML attributes provide additional information about HTML elements.<\/p>\n\n\n\n
- All HTML elements can have attributes<\/li>
- Attributes provide additional information about elements<\/li>
- Attributes are always specified in the start tag<\/li>
- Attributes usually come in name\/value pairs like: name=\u201dvalue\u201d<\/li><\/ul>\n\n\n\n
Common attributes are:<\/p>\n\n\n\n
- name<\/li>
- alt<\/li>
- width<\/li>
- height<\/li>
- title<\/li>
- src<\/li><\/ul>\n\n\n\n
ID<\/h3>\n\n\n\n
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.<\/p>\n\n\n\n
The id attribute is used to point to a specific style declaration in a style sheet which we will cover in more detail in the CSS part of the course. It is also used by JavaScript to access and manipulate the element with the specific id. You don\u2019t need to assign an id to each element.<\/p>\n\n\n\n
<div id=\"list_of_users\">Content<\/div><\/code><\/pre>\n\n\n\nClass<\/h3>\n\n\n\n
The HTML class attribute is used to specify a class for an HTML element.<\/p>\n\n\n\n
Multiple HTML elements can share the same class.<\/p>\n\n\n\n
The class attribute can contain multiple classes, for example:<\/p>\n\n\n\n
<div class=\"large left-aligned error collapsed\">Content<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nBlock vs inline<\/h2>\n\n\n\n
Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.<\/p>\n\n\n\n
Block<\/h3>\n\n\n\n
A block-level element always starts on a new line.<\/p>\n\n\n\n
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).<\/p>\n\n\n\n
A block level element has a top and a bottom margin, whereas an inline element does not. Here are the block-level elements in HTML:<\/p>\n\n\n\n
\n\n- <address><\/li>
- <article><\/li>
- <aside><\/li>
- <blockquote><\/li>
- <canvas><\/li>
- <dd><\/li>
- <div><\/li>
- <dl><\/li>
- <dt><\/li>
- <fieldset><\/li><\/ul>\n<\/div>\n\n\n\n\n
- <figcaption><\/li>
- <figure><\/li>
- <footer><\/li>
- <form><\/li>
- <h1>-<h6><\/li>
- <header><\/li>
- <hr><\/li>
- <li><\/li>
- <main><\/li>
- <nav><\/li><\/ul>\n<\/div>\n\n\n\n\n
- <noscript><\/li>
- <ol><\/li>
- <p><\/li>
- <pre><\/li>
- <section><\/li>
- <table><\/li>
- <tfoot><\/li>
- <ul><\/li>
- <video><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
Inline<\/h3>\n\n\n\n
An inline element does not start on a new line.<\/p>\n\n\n\n
An inline element only takes up as much width as necessary. Here are the inline elements in HTML:<\/p>\n\n\n\n
\n\n- <a><\/li>
- <abbr><\/li>
- <acronym><\/li>
- <b><\/li>
- <bdo><\/li>
- <dig><\/li>
- <br><\/li>
- <button><\/li>
- <cite><\/li>
- <code><\/li>
- <dfn><\/li><\/ul>\n<\/div>\n\n\n\n\n
- <em><\/li>
- <i><\/li>
- <img><\/li>
- <input><\/li>
- <kbd><\/li>
- <label><\/li>
- <map><\/li>
- <object><\/li>
- <output><\/li>
- <q><\/li>
- <samp><\/li><\/ul>\n<\/div>\n\n\n\n\n
- <script><\/li>
- <select><\/li>
- <small><\/li>
- <span><\/li>
- <strong><\/li>
- <sub><\/li>
- <sup><\/li>
- <textarea><\/li>
- <time><\/li>
- <tt><\/li>
- <var><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nDon\u2019t Panic!<\/h2>\n\n\n\n
Most of these are rarely used. Over the rest of the course you will be shown the most useful and commonly used tags.<\/p>\n\n\n\n
Next: Getting started<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag. HTML elements can be nested (this means that elements can contain other elements), but nested elements must close before the higher level tags close. All HTML documents… Continue reading HTML Overview<\/span><\/a><\/p>\n","protected":false},"author":5710,"featured_media":0,"parent":54,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-803","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/users\/5710"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":6,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/803\/revisions"}],"predecessor-version":[{"id":812,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/803\/revisions\/812"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/pages\/54"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/wp-json\/wp\/v2\/media?parent=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}