HTML Syntax(1)
- HTML stands for HyperText Markup Language. It is not a Programming Language :)
- It is used for Content, Structure, but not Formatting.
- Examples of contents of a document could be text, graphics, animations, audios and videos.
- html section enclosed head and body section.
- head section contains information about a document.
- body section contains a page's content.
- <meta> tag helps search engines to catalog pages.
- Basic tags of HTML
1. <h1>Content</h1> : Heading tag is used for titles. The bigger the number, the smaller font is rendered.
2. <a href = "">Content</a> : Anchor tag is used to hyperlink to other resources.
3. <p><a href = "">Content</a></p> : Paragraph tag defines a paragraph. It always starts on a new line, and browsers automatically add some white space(margin) before and after the paragraph.
4. <p><strong>Content</strong></p> : Strong tag is used to bold the content with high importance.
5. <img src=" " width="50%" alt="Substitue Content"/> : Image tag is used to post images. img must have an alt attribute, which is important for accessibility. Content of alt is displayed if a client could not render the image.
6. <br /> : Line breaking tag. (A legacy element)
7. <hr> : Horizontal line tag. (A legacy element)
8. <ul> <li>Content</li> </ul> : Unordered list tag has list tag elements inside. Content is rendered with a line break and a bullet symbol.
9. <ol> <li>Content</li> </ol> : Ordered list tag has list tag elements inside. Content is rendered with a line break and begins with a number.
10. <table> <thead> <tr> <th rowspan="2">Header</th> </tr> </thead> <tbody> <tr> <td colspan="2"> data </td> </tr> </tbody> </table> : table tag to organize data into rows and columns.
11. <label><p> </p> </label> : label tag provide users with information about the element's purpose.
- When creating an web page, it is important to consider Accessibility and Indexing.
- For example, anchoring a certain substring within a sentence is quite important.
- anchor tag can also be used to link to another section of the same document.
- To do so, the element's id has to be anchored to link's href.
- When accessing to an element with its id attribute set, "#id" is used.
- There are some special characters that are difficult to be embed.
- For example, '<' could not be normally included within a tag as a content.
- HTML defines a special entity name for such characters.
- Advanced tag of HTML(1)
10. <form method="post" action="https://www.csknowledge.tistory.com"> <input> </form> : forms are used to collect information from users using input tag and some other special tags.
ex1) <input name = "email" type="text" size="12">
ex2) <input name="wifi password" type="password" size="12">
ex3) <input name="thingsliked" type="checkbox" value="Python">
ex4) <input name="howto" type="radio" value="other">
ex5) <input type="submit" value="submit">
ex6) <input type="reset" value="Clear">
- method attribute is important because it specifies how to send form data.
- 'post' method appends form data to request message.
- 'get' method appends form data directly to URL.
ex7) <textarea name="comments" rows="4" cols="36"> Wrtie down Content </textarea>
ex8) <select name="rating> <option selected>1 </option> <option>2</option> <option>3</option> </select>