search
Machine LearningBook ReviewsGithub

HTML Basics

hashtag
1. The Birth and Meaning of HTML 5

hashtag
What is HTML

  • An abbreviation of Hyper Text Markup Language

    • Hyper Text

      • A format where each document contains links that connect to other documents (a format that can navigate to various documents)

      • HTTP

        : A format for exchanging Hyper Text

    • Markup

      • The work of defining the structure of a document

    • Markup Language lacks the computational capabilities that a computer language would normally have; it simply has the function of indicating the nature of content

    • A computer language that defines the structure of Web content (text/images)

  • A document stored on a Web server that is called up at the request of a Client web browser

  • HTML called up by a web browser is interpreted by the web browser and its content is displayed on the screen

hashtag
The Birth and Evolution of HTML

  • Born in 1990 along with WWW (World Wide Web)

  • The importance of web browsers expanded with the development of the web

  • The market share war between 'Netscape Navigator' and 'Microsoft Internet Explorer' deepened non-standard HTML and CSS

  • The emergence of new web browsers led to discussions on web standardization

  • W3C (World Wide Web Consortium) develops, discusses, and establishes web standards

  • 1997 W3C HTML3.2 Recommendation - Included non-standard HTML due to market demands

  • 1999 HTML 4.01 Recommendation - Various versions emerged due to market demands

  • 2000 XHTML Recommendation - A web standard centered on the strictness of XML

  • W3C was pursuing XHTML2 development but suddenly shifted direction to HTML5

hashtag
Recent Web Trends

  • Ajax

    : Overcoming the limitations of synchronous web using JavaScript to communicate with web servers

  • Web 2.0

    : A general term for the web where user active participation and convenience are maximized

hashtag
The Birth of HTML5

hashtag
Limitations of Existing HTML

  • HTML could not keep up with the development of web-based businesses and technologies

  • Demanded standardized technologies for dynamic web

  • W3C announced the evolution to XHTML2

hashtag
Birth of WHATWG (Web Hypertext Application Technology Working Group)

  • A working group independently created by web-related companies and organizations disappointed by W3C's failure to meet market demands

  • Began working on the HTML5 specification by analyzing web technologies and market demands

hashtag
W3C's Adoption of HTML5

  • 2008 W3C HTML5 Draft published

  • 2009 XHTML2 development discontinued

  • 2014 XHTML5 Recommendation planned

hashtag
Characteristics of HTML5

  • Maintains compatibility with existing HTML

  • Practical design

    : Loose syntax, efficient additional elements, secure security

  • Complete separation of presentation and content

  • Processing various media and dynamic operations without plugins: Canvas

  • Adoption of the latest web technologies

    : Geolocation, WebSocket, Web Storage, Web Workers, etc.

hashtag
2. Getting Started with HTML5

hashtag
Specifying a Doctype

  • Since HTML has multiple versions, you must specify a Doctype.

  • The existing Doctype required specifying a very long and complex DTD.

  • It became shorter due to the practicality principle of HTML5.

hashtag
HTML Writing Rules

  • HTML markup commands are called elements.

  • HTML is not case-sensitive.

  • Elements are enclosed in angle brackets to distinguish them from content. - Tags

  • The scope of an element is specified with opening and closing tags.

  • Some elements are used standalone without a closing tag.

  • Element attributes are written in the format attribute name = "attribute value".

hashtag
Structure of HTML

Image result for dom tree

  • <html> wraps the entire HTML code.

  • HTML is divided into <head> and <body> sections.

  • <head> contains metadata, scripts, CSS, etc. (external file connections)

  • The <body> section is where content goes and is displayed in the web browser.

hashtag
3. <head> Configuration

hashtag
Specifying the Title

  • The title of the HTML file appears in the web browser's title bar.

hashtag
Character Encoding

  • The character encoding of the text editor must match the HTML character encoding for correct display in the web browser.

  • Set to UTF-8, which is Unicode.

hashtag
Metadata

  • Writing metadata is advantageous for web search.

  • You can record information about the HTML.

hashtag
How to Write Metadata

hashtag
A New Protocol for Representing Metadata, Open Graph Protocol

  • Delivers document information through HTML document meta data

  • Created by Facebook, it defines the ability to write title, description, etc. corresponding to meta information

ex)

hashtag
Optional Metadataarrow-up-right

The following properties are optional for any object and are generally recommended:

  • og:audio - A URL to an audio file to accompany this object.

  • og:description - A one to two sentence description of your object.

  • og:determiner - The word that appears before this object's title in a sentence. An enumarrow-up-right of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).

  • og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.

  • og:locale:alternate - An arrayarrow-up-right of other locales this page is available in.

  • og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".

  • og:video - A URL to a video file that complements this object.

hashtag
Semantic Tag

  • The emergence of tags that carry semantic meaning in HTML - Don't use <div>!

  • Representative Tags

    • header: The header of the entire document or a section (head portion)

    • nav: navigation

    • aside: Space located on the side, content with little relation to the main content

    • section: An independently distinguishable area within a document, page, or site

    • footer: The footer of the entire document or a section (end portion)

  • Tags that express meaningful groups of information not only for developers and users but also for search engines, etc.

  • An effort to utilize tags that carry meaning, not just dividing sections

  • Non-semantic elements include div, span, etc., and h1, table tags can also be considered semantic tags

  • For Search Engine Optimization (SEO), it is necessary to effectively use markup through meta tags, semantic tags, etc.!

hashtag
4. Connecting External Files

  • CSS and JavaScript used with HTML should be separated into different files as a principle.

  • Connecting an external CSS file

  • Connecting an external JavaScript file

hashtag
What are the differences in meta elements and Empty elements in HTML5 compared to existing HTML?

  • Unlike previous HTML elements, meta elements only have opening elements and no closing elements

  • While existing HTML elements informed the web browser about the structure and meaning of the content, meta elements inform the web browser about document information

  • While typical HTML elements wrap content, meta elements only contain information in attributes and attribute values and do not wrap content

    • Therefore, they are called Empty elements, meaning elements that have no content

    • Empty elements include img, area, br, hr, input, etc.

PreviousHTMLNextHTML Sections & Outlines

Last updated