HTML

format_list_bulleted Contenido keyboard_arrow_down
ImprimirCitar

HTML, an acronym for HyperText Markup Language ('hypertext markup language'), refers to the markup language for the development of web pages. It is a standard that serves as a reference for software that connects with the development of web pages in its different versions, defines a basic structure and a code (called HTML code) for the definition of content of a web page, such as text, images, videos., games, among others. It is a standard in charge of the World Wide Web Consortium (W3C) or WWW Consortium, an organization dedicated to the standardization of almost all technologies linked to the web, especially with regard to its writing and interpretation. HTML is considered the most important web language, its invention being crucial in the appearance, development and expansion of the World Wide Web (WWW). It is the standard that has been imposed in the display of web pages and is the one that all current browsers have adopted.

The HTML language bases its development philosophy on differentiation. To add an external element to the page (image, video, script, etc.), it is not embedded directly in the code of the page, but a reference is made to the location of said element. element by text. In this way, the web page contains only text while the task of joining all the elements and displaying the final page falls on the web browser (code interpreter). Being a standard, HTML seeks to be a language that allows any web page written in a certain version to be interpreted in the same way (standard) by any updated web browser.

HTML is a markup language that allows us to indicate the structure of our document through tags. This language offers us great adaptability, a logical structure and is easy to interpret both by humans and by machines.

However, throughout its different versions, various features have been incorporated and removed, in order to make it more efficient and facilitate the development of web pages compatible with different browsers and platforms (desktop PCs, laptops, mobile phones). smartphones, tablets, etc.) However, to correctly interpret a new version of HTML, web browser developers must incorporate these changes and the user must be able to use the new version of the browser with the changes incorporated. Normally the changes are applied through automatic update patches (Firefox, Chrome) or by offering a new version of the browser with all the changes incorporated, on an official download website (Internet Explorer). Therefore, an outdated browser will not be able to correctly interpret a web page written in a higher version of HTML than the one it can interpret, which often forces developers to apply techniques and changes to correct display problems and even HTML code interpretation. Likewise, pages written in an older version of HTML would need to be updated or rewritten, which is not always the case. That is why certain browsers still maintain the ability to interpret web pages from previous HTML versions. For these reasons, there are still differences between different browsers and versions when interpreting the same web page.

Early HTML specifications

Tim Berners-Lee (TBL) in 1991 describes 18 elements that include the initial and relatively simple layout of HTML. Thirteen of these elements still exist in HTML 4.

Berners-Lee considered HTML an extension of SGML, but it was not formally recognized as such until the publication in mid-1993, by the IETF (in Spanish: Internet Engineering Working Group), of a first proposal for a specification of HTML: the draft Hypertext Markup Language by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. The draft expired after six months, but was notable for its recognition of the browser's own Mosaic tag used to insert images without line feed, which reflected the IETF's philosophy of successfully prototyping standards. Similarly, Dave Raggett's competing draft HTML+ (Hypertext Markup Format) (Hypertext Markup Format) from late 1993 suggested standardizing features already implemented, such as tables.

HTML Markup

HTML is written in the form of "tags", surrounded by angle brackets (<,>,/). HTML can also describe, to some extent, the appearance of a document, and can include or reference a type of program called script, which can affect the behavior of web browsers and other processors. of HTML.

HTML is also used to refer to content of the text/html MIME type or even more broadly as a generic term for HTML, either descended from XML (such as XHTML 1.0 and later) or directly descended from SGML (such as HTML 4.01 and earlier). HTML consists of several vital components, including elements and their attributes, data types, and the document type declaration.

Elements

HTML element content categories

Elements are the basic structure of HTML. Elements have two basic properties: attributes and content. Each attribute and content has certain restrictions for the HTML document to be considered valid. An element typically has a start tag (for example, <element-name>) and a closing tag (for example, </element-name>). The element attributes are contained in the start tag and the content is placed between the two tags (for example, <element-name attribute="value">Content</name -of-element>). Some elements, such as <br>, have no content and do not carry a closing tag. Listed below are various types of markup used in HTML.

General structure of a code line in the language of HTML tags.

The structural markup describes the purpose of the text. For example, <h2>Golf</h2> sets "Golf" as a second-level heading, which would be displayed in a browser similar to the "HTML Markup" heading at the beginning of this section. Structural markup doesn't define how the element will look, but most web browsers have standardized the formatting of elements. Specific formatting can be applied to text using cascading style sheets.

The presentational markup describes the appearance of the text, regardless of its function. For example, <b>bold</b> indicates that visual web browsers should display text in bold, but does not indicate what web browsers that display text should do. the content in another way (for example, those who read the text aloud). In the case of <b>bold</b> and <i>italic</i>, there are elements that look the same but have a more semantic in nature: <strong>strong emphasis</strong> and <em>emphasis</em>. It's easy to see how a screen reader should interpret these two elements. However, they are equivalent to their corresponding presentational elements: a screen reader should not loudly say the name of a book, even if the name stands out in italics on a screen. Most presentational markup has been dropped since version 4.01, in favor of cascading style sheets.

Hypertext markup is used to link parts of the document to other documents or to other parts of the same document. To create a link you need to use the <a> anchor tag together with the href attribute, which will set the URL to which the link points. For example, a link that displays the address text and goes to our Wikipedia could be of the form <a href=”https://www.wikipedia.org”>https://www.wikipedia.org</a>. You can also create links to other objects, such as images <a href=”link”><img src=”image” /></a>.

Attributes

See also: HTML attribute

Mostly an element's attributes are name-value pairs, separated by an equals sign "=" and written in the start tag of an element, after the element's name. The value can be surrounded by double or single quotes, although certain types of values can be unquoted in HTML (but not in XHTML). Leaving values unquoted is considered unsafe, however. In contrast to name-element pairs, there are some attributes that affect the element simply by their presence (such as the ismap attribute for the img element).

Basic HTML tags

An example of HTML code with syntax coloring.
  • : defines the start of the HTML document, tells the browser that what comes next should be interpreted as HTML code. This is it. de facto, since in theory what defines the type of document is DOCTYPE, which means the word right after DOCTYPE the root tag.
  • : embeds a script on a web, or calls one by src="url del script". It is recommended to include the MIME type in the attribute type, in the case of JavaScript text/javascript.
  • : defines the header of the HTML document; this header usually contains information about the document that is not directly displayed to the user as, for example, the title of the browser window. Inside the header It is possible to find:
    • </code>: define the title of the page. The title usually appears in the title bar above the window.</li><li><code></code>: to link the site to style sheets or icons. For example:<code></code>.</li><li><code></code>: to place the inner style of the page; either using CSS or other similar languages. It is not necessary to place it if it is to link to an external file using the label <code></code>.</li><li><code></code>: for metadata such as authorship or license, even to indicate http parameters <code>http-equiv=""</code>) when they cannot be modified because the configuration is not available or due to difficulties with server-side scripting.</li></ul></li><li><code></code>: defines the main content or body of the document. This is the part of the html document shown in the browser; within this tag are properties common to the entire page, such as background color and margins. Inside the body <code></code> numerous labels can be found. Here are some as an example: <ul><li><code><article></code>: Represents a self-contained composition in a document, page, app or site, which is intended to be distributed independently or re-usable.</li><li><code><h1></code> a <code><h6></code>: headings or titles of the document with different relevance.</li><li><code><table></code>: defines a table. <ul><li><code><tr></code>: row of a board.</li><li><code><td></code>: cell of a board (must be in a row).</li></ul></li><li><code><footer></code>: represents the foot of a document or section. The information that is usually added in this block is the author of the document, links to related content, copyright information, legal notices, etc.</li><li><code><a></code>: hyperlink or link, inside or outside the website. The pass parameter should be defined through the attribute <i>href</i>. For example: <code><a href="http://www.example.com" title="Ejemplo" target="_blank">Ejemplo</a></code> is represented as an example.</li><li><code><div></code>: division of the page. It is recommended, together with css, instead of <code><table></code> when you want to align content.</li><li><code><img></code>: image. Requires the attribute <i>src</i>which indicates the route in which the image is found. For example: <code><img src="./imágenes/mifoto.jpg" /></code>. It is convenient, for accessibility, to put an attribute <code>alt="texto alternativo"</code>.</li><li><code><ol></code>: label for orderly lists.</li><li><code><ul></code>: label for messy lists.</li><li><code><li></code>: tag elements from a list.</li><li><code><b></code>: bold text (<i>Disapproved label. It is recommended to use the label <code><strong></code></i>).</li><li><code><i></code>: text in italics (<i>Disapproved label. It is recommended to use the label <code><em></code></i>).</li><li><code><s></code>: text slashed (<i>Disapproved label. It is recommended to use the label <code><del></code></i>).</li><li><code><u></code>: Before text underlined. From HTML 5 defines differentiated or highlighted text portions of the rest, to indicate corrections for example (unproven tag in HTML 4.01 and redefined in HTML 5).</li><li><code><main></code>: structural division of the page that encompasses the main content of the page. Within this label, for example, we find the <code><article></code>.</li><li><code><span></code>: Serve to differentiate one text from another.</li><li><code></code>: Serve to cause a line jump. This tag doesn't close.</li><li><code><hr></code>: Serves to provoke a change of subject between paragraphs. This tag doesn't close.</li><li><code><details></code>: Serve to create a drop-down section</li><li><code><summary></code>: Serve to create the title of the drop-down section</li></ul></li></ul><p>Most tags should close like they open, but with a slash (/) as shown in the following examples: </p><ul><li><code><table><tr><td>Contenido de una celda</td></tr></table></code>.</li><li><code>Código de un script integrado en la página</code>.</li><li><code><header>División estructural en la parte del contenido.</header></code></li></ul><h2>HTML Basics</h2><p>The HTML language can be created and edited with any basic text editor, such as Gedit on GNU/Linux, Notepad on Windows, or any other editor that supports plain text such as GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, Atom, Visual Studio Code, among many others. </p><p>There are also other editors for creating websites with WYSIWYG characteristics (<i>What You See Is What You Get</i>, or in Spanish: "what you see is what you get"). These editors allow you to see the result of what is being edited in real time, as the document is being developed. Now, this does not mean a different way of creating websites, but rather a somewhat simpler way, since these programs, in addition to having the option of working with the preview, have their own HTML section, which generates all the code as you work on it. Some examples of WYSIWYG editors are KompoZer, Microsoft FrontPage or Adobe Dreamweaver. </p><p>Combining these two methods is very interesting, as they somehow help each other. For example, if everything is edited in HTML and the developer forgets some code or tag, it is enough to go to the visual or WYSIWYG editor and continue editing there or vice versa, since there are cases in which it is faster and easier to write the code directly of some characteristic that the user wishes to add to the site than to look for the option in the program itself. </p><p>There is another type of HTML editors called WYSIWYM that give more importance to content and meaning than to visual appearance. Among the objectives that these editors have is the separation of content and presentation, essential in web design. </p><p>HTML uses tags or markup, which are short start and end instructions, which determine how text, as well as images and other elements, should appear on your screen in your browser. of the computer. </p><p>Every tag is identifiable because it is enclosed between the less than and greater than signs (<code><></code>), and some have attributes that can take some value. In general, labels will be applied in two special ways: </p><ul><li>They open up and close, such as: ≤1⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄4⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄4⁄2⁄2⁄2⁄2⁄4⁄4⁄4⁄4⁄4⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2o,ÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂ <b>bold</b>.</li><li>They cannot be opened and closed, such as ≤/105, which would be seen in your web browser as a horizontal line.</li><li>Others that can be opened and closed, such as θp.</li><li>The basic or minimum labels are:</li></ul><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">▪DOCTYPE PHP</span><span class="p">.</span><span class="nt">html</span><span class="p">▪</span> <span class="p">.</span><span class="nt">head</span><span class="p">▪</span> <span class="p">.</span><span class="nt">goal</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/ 2005</span> <span class="p">.</span><span class="nt">title</span><span class="p">▪</span>Example1<span class="p">”</span><span class="nt">title</span><span class="p">▪</span> <span class="p">”</span><span class="nt">head</span><span class="p">▪</span> <span class="p">.</span><span class="nt">body</span><span class="p">▪</span> <span class="p">.</span><span class="nt">p</span><span class="p">▪</span>Example paragraph<span class="p">”</span><span class="nt">p</span><span class="p">▪</span> <span class="p">”</span><span class="nt">body</span><span class="p">▪</span><span class="p">”</span><span class="nt">html</span><span class="p">▪</span></pre></div><h2>Text editors</h2><p>For web development, programmers use a text editor. These are normally made for the purpose of ease of programming. There are currently many, such as these: Notepad++, Adobe Dreamweaver, Sublime text, among others. </p><h2>Learn HTML by analyzing real pages</h2><p>By selecting the "view source" option in the browser, you can actually see what information the web browser is receiving and how it is interpreting it. </p><div class="thumb tright"><div class="thumbinner" style="width:222px"><a class="image" href="https://en.wikipedia.org/wiki/Archivo:Captura_inspector_de_p%C3%A1gina_en_Firefox.png"><img alt="" class="thumbimage" data-file-height="724" data-file-width="1022" height="156" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Captura_inspector_de_p%C3%A1gina_en_Firefox.png/220px-Captura_inspector_de_p%C3%A1gina_en_Firefox.png" width="220" /></a> <div class="thumbcaption"><div class="magnify"></div>Capture of the Firefox page inspector.</div></div></div><p>For example: in Internet Explorer, simply pull down the "view" menu and then choose "source code", while in Chrome and Firefox press <span class="keyboard-key" style="font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb #bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px">Ctrl</span>+<span class="keyboard-key" style="font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb # bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px">U</span>. This will open a tab with the source code of the page that is currently being viewed in the browser. Another faster way is to right-click anywhere in the area where the browser displays the web page and choose "View Page Source". </p><p>Apart from being able to view the HTML source code of a web page with the options described above, Internet Explorer, Firefox and Google Chrome also incorporate tools known as page inspectors that can be activated with <span class="keyboard-key " style="font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb #bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px">F12</span>. </p><p>With these tools it is possible to visualize a web page and select within it a specific element of which we want to know what is the HTML code with which it is made, simply pointing to the element in question with the mouse. By doing this, the code will be displayed in a special area within the browser where the user will be able to see the HTML code in question (see image), as well as the CSS rules that apply to that particular HTML code. This type of analysis is extremely instructive to learn to develop in HTML. </p><div class="thumb tright"><div class="thumbinner" style="width:212px"><a class="image" href="https://en.wikipedia.org/wiki/Archivo:Debuggerfirefox95.png"><img alt="Firefox 95 Inspector / Inspector de Firefox 95" class="thumbimage" data-file-height="810" data-file-width="1185" height="144" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Debuggerfirefox95.png/210px-Debuggerfirefox95.png" width="210" /></a> <div class="thumbcaption"><div class="magnify"></div>Capture of Firefox Page Inspector 95</div></div></div><p>For the Firefox browser, there is also the Firebug plugin as an alternative to the native tool, very similar to the tool that Firefox incorporates by default. </p><h2>History of the standard</h2><p>In 1989 there were two techniques that allowed linking electronic documents, on the one hand hyperlinks or links (<i>hiperlinks</i> or <i>links</i>) and on the other hand a powerful label language called sgml. At that time, Tim Berners-Lee, who worked at the CERN European Center for Nuclear Research, informed the press that he was working on a system that would allow access to online files that worked on computer networks or electronic machines based on the TCP/IP protocol. Initially it was developed so that information could be easily shared between scientists from different universities and research institutes around the world. </p><p>In the early 1990s, he finally defines HTML as a subset of the familiar SGML and creates something even more valuable, the World Wide Web. </p><p>Tim Berners-Lee created the World Wide Web project, as well as a system that made it easy to read information through a browser program. It would be the first web browser, called WorldWideWeb, and developed during the second half of the year 1990; being later renamed Nexus, to avoid confusion due to its name, which was the same as the technology it represented. Two other browsers followed: the Line Mode Browser and the ViolaWWW. The latter, developed in 1992, was the first browser to become popular among early adopters of the World Wide Web. </p><p>Pei-Yuan Wei presented ViolaWWW, which would run in text mode and on a UNIX operating system. </p><p>Work to create a successor to HTML, called HTML+, began in late 1993. HTML+ was originally designed to be a superset of HTML that would gradually evolve from the earlier HTML format. The first formal specification of HTML+ was therefore given the version number 2 to distinguish it from previous unofficial proposals. Work on HTML+ continued, but it never became a standard, despite being the most formally compositional-like base of current specifications. </p><p>The draft HTML 3.0 standard was proposed by the newly formed W3C in March 1995. With it many new capabilities were introduced; for example, facilities for creating tables, making text flow around figures, and displaying complex mathematical elements. Although it was designed to be compatible with HTML 2.0, it was too complex to be implemented with the technology of the time, and when the draft standard expired in September 1995, it was abandoned due to lack of support from web browser manufacturers. HTML 3.1 was never officially proposed, and the next standard was HTML 3.2, which abandoned most of the new features of HTML 3.0 and instead adopted many elements initially developed by the Netscape and Mosaic web browsers. The possibility of working with mathematical formulas that had been proposed in HTML 3.0 became integrated into a different standard called MathML. </p><p>In 1997, HTML 4.0 was published as a W3C Recommendation. HTML 4.0 adopted many specific elements initially developed for a particular web browser, but at the same time began to clean up the HTML by marking some of them as <i>deprecated</i>. </p><p>HTML 4.0 implements features like XForms 1.0 that do not need to implement navigation engines that were incompatible with some HTML web pages. In 2004 the W3C reopened the debate on the evolution of HTML, and the bases for the HTML5 version were released. However, this work was rejected by the members of the W3C and preference would be given to the development of XML. </p><p>Apple, Mozilla, and Opera all announced their interest in continuing to work on the project under the name WHATWG, which is based on backwards compatibility. </p><p>In 2006, the W3C became interested in HTML5 development, and in 2007 joined the WHATWG working group to unify the project. </p><h2>Web accessibility</h2><div class="noprint AP rellink"><span style="font-size:88%">Main article:</span> <i> Web accessibility</i></div><p>The HTML design, apart from complying with the specific language specifications, must respect certain web accessibility criteria, following some guidelines or the regulations and laws in force in the countries where this concept is regulated. It is available and developed by the W3C through the Web Content Accessibility Guidelines 1.0 WCAG (recently updated with the 2.0 specification), although many countries have their own specifications, as is the case of Spain with the UNE 139803 Standard. </p><h2>HTML Entities</h2><div class="noprint AP rellink"><span style="font-size:88%">Main article:</span> <i> List of XML and HTML character entities</i></div><p>Many special characters, letters with tildes, umlauts, or language script symbols can be represented in an HTML document either by themselves or by an entity reference. Among the advantages of using an entity reference, are that of being able to represent Unicode characters using a different character encoding, or to fill in for some missing characters on the keyboard used. </p></div><!--[--><h2 class="rel-heading">Contenido relacionado</h2><!--[--><a class="related-item" href="/encyclopedia/power-electronics/"><p>Power electronics</p><span class="related-desc">The expression power electronics is used to differentiate the type of application given to electronic devices, in this case to transform and control voltages...</span></a><a class="related-item" href="/encyclopedia/alphanumeric-code/"><p>Alphanumeric code</p><span class="related-desc">With a one-bit code we can represent 21=2 combinations. To represent the ten digits and the 26 lowercase letters we need at least 6 bits (25=32, 26=64...</span></a><a class="related-item" href="/encyclopedia/open-source/"><p>Open Source</p><span class="related-desc">Open source is a software development model based on open collaboration. practical benefits and ethical or freedom issues that stand out so much in free...</span></a><!--]--><div class="more-results"> Más resultados... </div><!--]--><div class="related-video-wrapper" data-nosnippet><div class="matched-video"><span>Te puede interesar</span><iframe width="560" height="315" src="https://www.youtube.com/embed/-tTmm-LwKPM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div></main><!--]--><footer id="piedepaginar" class="piedepagina"><link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet"><div class="footerContainer"><div class="headerWrapper"><header class="footerLogo"><span class="metamainlogo"><img src="data:image/webp;base64,UklGRoQDAABXRUJQVlA4WAoAAAAQAAAAPwAAPwAAQUxQSLAAAAABcFpr29q8K4TXIJmMgp5GI5XCAuQTV5iBftW/jK/viYgJwGMrqVeH888eV3Vs4WWtWIjzj4t5rrzgTeWZUI6cJ8FwJu2DB95wph1cAOr0TDxWgVIyyRzW8kw9N1PBdQzbM3m1YVsd2XZndkn3B+yR7bBhW7dsdSK4RGQtuGYmCsl0ygBlxDRSADgDT+/g3u9Zeh+P7ZFkOHU2niv5XPyamGcKXjbjdnv4ncO2TUw8BlZQOCCuAgAAEA0AnQEqQABAAD5tKpJFpCIhlwtuqEAGxKAHjeQEgi2wF2kwJ3obtJhgdmFMy4naPT0J9Bz017BKOOzJC43PG59yxl1m7mYUS9TyyL0ptMch8uybByfBk7BUfyawFwSTNLxfFzwDrOMiQ0kZy1Q7sAAA/vFNL/7z+XNfe2Gw+n/yvladk0KjNDMUvodAfZJNyM3bDviJxigd3bmV3HL/lMqPirR7L9/7M7WCmv58Jyqc5ENWBUxnUgLON5OhuBaummLKsjYU+xMRGYwCZAE0hNztb2LIT1SDybKcPR1Zfzzr0PND1D259N2JYnWJ2VzhMwkpcGgtDuRFjRTFz0TNr2pEkdZBvMaB5k/LE4ICQd1aPhsx23WeSANZZ1nGu1qPyZiAR4YbSjCoTYU+wOLEZNNSK4v9vWee05zbdCSpS+h2bwzB6163DE5ngi/I1Jpgptu3o0XMk7HDpZZALKXwJxPro+f8SeqvIeMfMeR/cEp0kmFjiye2IE1uKBzWBnQKmU7nF/Rx8dzXdoYz50pSD+bpKVR90kF6KEslioMq5MqXEb+7wkD3d3XaMKCpJ/xnD4Vb/nhECzgJQaie1f8s811Ct01cIUgcsc1/RDdoM1HlwC7OEOlIZi+dOxzv7KVlU0EokDXOoduJfrvLez62qusA29VYImd+d4adMQKlkqrl34S94mdtanzJ7IZwTYSPwl2QPT5HPcu3Q4PhSMaKTOidi5qygq9exxs/jRr7xzfj5vXLoQNTNjCU/vaE9C+8yf8Vk9yXiRRn1VtMhxVUDFH+t8+V4f2+sVWCwErfYtvq3bAYlH6m35jpL6KGEWjXQFs7p/tzkKO4TPQws6DhFft2wpsPzOXTTKa1WaCI8RUKIPvlTJbuSV2mpQp4iTUyoHbkyim8y1vYCsJ1AAA=" alt="Academia Lab logo" class="logo-footer"><a href=" https://academia-lab.com/ "> AcademiaLab </a></span></header></div><div class="infoWrapper"><div><span></span><span>YouTube: <a href="https://www.youtube.com/@academialab">@academialab</a></span><span>TikTok: <a href="https://www.tiktok.com/@academialab">@academialab</a></span><span>LinkedIn: <a href="https://www.linkedin.com/company/academialab/">@academialab</a></span><span class="non">Facebook: <a href="https://www.facebook.com/academialabf">@academialabf</a></span><span class="non">Instagram: <a href="https://www.instagram.com/academialabf/">@academialabf</a></span><span class="non">X: <a href="https://x.com/academialabf">@academialabf</a></span></div><div class="to-remove"><span><a href="#">Tema</a></span><span><a href="#">Categorías</a></span><span><a href="#">Libros</a></span></div><div><span>Site design / logo ©</span><span>2024 AcademiaLab</span><span><a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.es">CC BY-NC-ND</a></span><span><a href="mailto:info@academia-lab.com">info@academia-lab.com</a></span></div></div></div></footer><span></span><dialog id="adjustDlg"><div class="adjustDlgWrapper"><div class="adjustDlgItem"><div class="adjustDlgItemDesc">Tamaño del texto:</div><div class="adjustDlgItemSett"><div class="adjustDlgRadioWrapper"><div class="adjustDlgRadioOpt"><input type="radio" value="14" id="sText" name="loptions" checked><label class="adjustDlgRadioOptLabel" for="sText">Pequeño</label></div><div class="adjustDlgRadioOpt"><input type="radio" value="16" name="loptions" id="mText"><label class="adjustDlgRadioOptLabel" for="mText">Mediano</label></div><div class="adjustDlgRadioOpt"><input type="radio" value="20" name="loptions" id="bText"><label class="adjustDlgRadioOptLabel" for="bText">Grande</label></div></div></div></div></div></dialog><!--[--><ul class="custom-menu"><li data-action="copy">Copiar</li><li data-action="edit">Editar</li><li data-action="summarize">Resumir</li></ul><div class="custom-ia-panel"><div class="custom-ia-panel-wrapper"><l-tail-chase size="40" speed="1.75" color="black"></l-tail-chase></div></div><div class="editor-options"><div class="editor-options-w"><span class="icon material-symbols-outlined" data-action="editor-undo">undo</span><span class="icon material-symbols-outlined" data-action="editor-redo">redo</span><div class="divider"></div><span class="icon material-symbols-outlined" data-action="editor-bold">format_bold</span><span class="icon material-symbols-outlined" data-action="editor-italic">format_italic</span><span class="icon material-symbols-outlined" data-action="editor-underline">format_underlined</span><span class="icon material-symbols-outlined" data-action="editor-strikethrough">strikethrough_s</span><span class="icon material-symbols-outlined" data-action="editor-superscript">superscript</span><span class="icon material-symbols-outlined" data-action="editor-subscript">subscript</span><span class="icon material-symbols-outlined" data-action="editor-linkpopup">link</span><div class="divider"></div><span class="icon material-symbols-outlined" data-action="editor-save">save</span></div></div><div class="editor-link"><div class="editor-link-w"><div class="link-field" contenteditable="true"></div><div class="link-options"><span class="icon material-symbols-outlined" data-action="editor-linkpopup-cancel">cancel</span><span class="icon material-symbols-outlined" data-action="editor-linkpopup-add">check_circle</span></div></div></div><!--]--><!--]--></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":34,"once":36,"_errors":37,"serverRendered":40,"path":41},["ShallowReactive",3],{"content":4,"related":16},{"status":5,"payload":7},{"code":6},200,{"id":8,"slug":9,"datePublished":10,"dateModified":11,"author":12,"status":13,"title":14,"content":15},69840,"html","2023-01-27T14:29:09Z","2024-01-02T06:49:45Z","AcademiaLab Editors","publish","HTML","\u003Cp>\u003Cb>HTML\u003C/b>, an acronym for \u003Ci>\u003Cb>HyperText Markup Language\u003C/b>\u003C/i> ('hypertext markup language'), refers to the markup language for the development of web pages. It is a standard that serves as a reference for software that connects with the development of web pages in its different versions, defines a basic structure and a code (called HTML code) for the definition of content of a web page, such as text, images, videos., games, among others. It is a standard in charge of the \u003Ci>World Wide Web Consortium\u003C/i> (W3C) or WWW Consortium, an organization dedicated to the standardization of almost all technologies linked to the web, especially with regard to its writing and interpretation. HTML is considered the most important web language, its invention being crucial in the appearance, development and expansion of the World Wide Web (WWW). It is the standard that has been imposed in the display of web pages and is the one that all current browsers have adopted.\n\u003C/p>\u003Cp>The HTML language bases its development philosophy on differentiation. To add an external element to the page (image, video, \u003Ci>script\u003C/i>, etc.), it is not embedded directly in the code of the page, but a reference is made to the location of said element. element by text. In this way, the web page contains only text while the task of joining all the elements and displaying the final page falls on the web browser (code interpreter). Being a standard, HTML seeks to be a language that allows any web page written in a certain version to be interpreted in the same way (standard) by any updated web browser.\n\u003C/p>\u003Cp>HTML is a markup language that allows us to indicate the structure of our document through tags. This language offers us great adaptability, a logical structure and is easy to interpret both by humans and by machines.\n\u003C/p>\u003Cp>However, throughout its different versions, various features have been incorporated and removed, in order to make it more efficient and facilitate the development of web pages compatible with different browsers and platforms (desktop PCs, laptops, mobile phones). smartphones, tablets, etc.) However, to correctly interpret a new version of HTML, web browser developers must incorporate these changes and the user must be able to use the new version of the browser with the changes incorporated. Normally the changes are applied through automatic update patches (Firefox, Chrome) or by offering a new version of the browser with all the changes incorporated, on an official download website (Internet Explorer). Therefore, an outdated browser will not be able to correctly interpret a web page written in a higher version of HTML than the one it can interpret, which often forces developers to apply techniques and changes to correct display problems and even HTML code interpretation. Likewise, pages written in an older version of HTML would need to be updated or rewritten, which is not always the case. That is why certain browsers still maintain the ability to interpret web pages from previous HTML versions. For these reasons, there are still differences between different browsers and versions when interpreting the same web page.\n\u003C/p>\u003Ch2>Early HTML specifications\u003C/h2>\u003Cp>Tim Berners-Lee (TBL) in 1991 describes 18 elements that include the initial and relatively simple layout of HTML. Thirteen of these elements still exist in HTML 4.\n\u003C/p>\u003Cp>Berners-Lee considered HTML an extension of SGML, but it was not formally recognized as such until the publication in mid-1993, by the IETF (in Spanish: Internet Engineering Working Group), of a first proposal for a specification of HTML: the draft \u003Ci>Hypertext Markup Language\u003C/i> by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. The draft expired after six months, but was notable for its recognition of the browser's own Mosaic tag used to insert images without line feed, which reflected the IETF's philosophy of successfully prototyping standards.\nSimilarly, Dave Raggett's competing draft \u003Ci>HTML+ (Hypertext Markup Format)\u003C/i> (Hypertext Markup Format) from late 1993 suggested standardizing features already implemented, such as tables.\n\u003C/p>\u003Ch2>HTML Markup\u003C/h2>\u003Cp>HTML is written in the form of \"tags\", surrounded by angle brackets (<,>,/). HTML can also describe, to some extent, the appearance of a document, and can include or reference a type of program called \u003Ci>script\u003C/i>, which can affect the behavior of web browsers and other processors. of HTML.\n\u003C/p>\u003Cp>HTML is also used to refer to content of the text/html MIME type or even more broadly as a generic term for HTML, either descended from XML (such as XHTML 1.0 and later) or directly descended from SGML (such as HTML 4.01 and earlier). HTML consists of several vital components, including \u003Ci>elements\u003C/i> and their \u003Ci>attributes\u003C/i>, \u003Ci>data types\u003C/i>, and the \u003Ci>document type declaration\u003C/i>.\n\u003C/p>\u003Ch3>Elements\u003C/h3>\u003Cdiv class=\"thumb tright\">\u003Cdiv class=\"thumbinner\" style=\"width:222px\">\u003Ca class=\"image\" href=\"https://en.wikipedia.org/wiki/Archivo:HTML_element_content_categories.png\">\u003Cimg alt=\"\" class=\"thumbimage\" data-file-height=\"794\" data-file-width=\"1123\" height=\"156\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/HTML_element_content_categories.png/220px-HTML_element_content_categories.png\" width=\"220\" />\u003C/a> \u003Cdiv class=\"thumbcaption\">\u003Cdiv class=\"magnify\">\u003C/div>HTML element content categories\u003C/div>\u003C/div>\u003C/div>\u003Cp>Elements are the basic structure of HTML. Elements have two basic properties: attributes and content. Each attribute and content has certain restrictions for the HTML document to be considered valid. An element typically has a start tag (for example, \u003Ccode><element-name>\u003C/code>) and a closing tag (for example, \u003Ccode></element-name>\u003C/code>). The element attributes are contained in the start tag and the content is placed between the two tags (for example, \u003Ccode><element-name attribute="value">Content</name -of-element>\u003C/code>). Some elements, such as \u003Ccode><br>\u003C/code>, have no content and do not carry a closing tag. Listed below are various types of markup used in HTML.\n\u003C/p>\u003Cdiv class=\"thumb tright\">\u003Cdiv class=\"thumbinner\" style=\"width:352px\">\u003Ca class=\"image\" href=\"https://en.wikipedia.org/wiki/Archivo:Etiquetas_en_HTML.png\">\u003Cimg alt=\"\" class=\"thumbimage\" data-file-height=\"1111\" data-file-width=\"2463\" height=\"158\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Etiquetas_en_HTML.png/350px-Etiquetas_en_HTML.png\" width=\"350\" />\u003C/a> \u003Cdiv class=\"thumbcaption\">\u003Cdiv class=\"magnify\">\u003C/div>General structure of a code line in the language of HTML tags.\u003C/div>\u003C/div>\u003C/div>\u003Cp>The \u003Ci>structural\u003C/i> markup describes the purpose of the text. For example, \u003Ccode><h2>Golf</h2>\u003C/code> sets \"Golf\" as a second-level heading, which would be displayed in a browser similar to the \"HTML Markup\" heading at the beginning of this section. Structural markup doesn't define how the element will look, but most web browsers have standardized the formatting of elements. Specific formatting can be applied to text using cascading style sheets.\n\u003C/p>\u003Cp>The \u003Ci>presentational\u003C/i> markup describes the appearance of the text, regardless of its function. For example, \u003Ccode><b>bold</b>\u003C/code> indicates that visual web browsers should display text in \u003Cb>bold\u003C/b>, but does not indicate what web browsers that display text should do. the content in another way (for example, those who read the text aloud). In the case of \u003Ccode><b>bold</b>\u003C/code> and \u003Ccode><i>italic</i>\u003C/code>, there are elements that look the same but have a more semantic in nature: \u003Ccode><strong>strong emphasis</strong>\u003C/code> and \u003Ccode><em>emphasis</em>\u003C/code>. It's easy to see how a screen reader should interpret these two elements. However, they are equivalent to their corresponding presentational elements: a screen reader should not loudly say the name of a book, even if the name stands out in \u003Ci>italics\u003C/i> on a screen. Most presentational markup has been dropped since version 4.01, in favor of cascading style sheets.\n\u003C/p>\u003Cp>\u003Ci>Hypertext\u003C/i> markup is used to link parts of the document to other documents or to other parts of the same document. To create a link you need to use the \u003Ccode><a>\u003C/code> anchor tag together with the \u003Ccode>href\u003C/code> attribute, which will set the URL to which the link points. For example, a link that displays the address text and goes to our Wikipedia could be of the form \u003Ccode><a href=”https://www.wikipedia.org”>https://www.wikipedia.org</a>\u003C/code>. You can also create links to other objects, such as images \u003Ccode><a href=”link”><img src=”image” /></a>\u003C/code>.\n\u003C/p>\u003Ch3>Attributes\u003C/h3>\u003Cdiv class=\"VT rellink\">\u003Cspan style=\"font-size:88%\">See also:\u003C/span> \u003Ci>HTML attribute\u003C/i>\u003C/div>\u003Cp>Mostly an element's attributes are name-value pairs, separated by an equals sign \"=\" and written in the start tag of an element, after the element's name. The value can be surrounded by double or single quotes, although certain types of values can be unquoted in HTML (but not in XHTML). Leaving values unquoted is considered unsafe, however. In contrast to name-element pairs, there are some attributes that affect the element simply by their presence (such as the \u003Ccode>ismap\u003C/code> attribute for the \u003Ccode>img\u003C/code> element).\n\u003C/p>\u003Ch2>Basic HTML tags\u003C/h2>\u003Cdiv class=\"thumb tright\">\u003Cdiv class=\"thumbinner\" style=\"width:302px\">\u003Ca class=\"image\" href=\"https://en.wikipedia.org/wiki/Archivo:HTML_source_code_example.svg\">\u003Cimg alt=\"\" class=\"thumbimage\" data-file-height=\"250\" data-file-width=\"315\" height=\"238\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/300px-HTML_source_code_example.svg.png\" width=\"300\" />\u003C/a> \u003Cdiv class=\"thumbcaption\">\u003Cdiv class=\"magnify\">\u003C/div>An example of HTML code with syntax coloring.\u003C/div>\u003C/div>\u003C/div>\u003Cul>\u003Cli>\u003Ccode>\u003C/code>: defines the start of the HTML document, tells the browser that what comes next should be interpreted as HTML code. This is it. \u003Ci>de facto\u003C/i>, since in theory what defines the type of document is DOCTYPE, which means the word right after DOCTYPE the root tag.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: embeds a script on a web, or calls one by \u003Ccode>src=\"url del script\"\u003C/code>. It is recommended to include the MIME type in the attribute \u003Ccode>type\u003C/code>, in the case of JavaScript \u003Ccode>text/javascript\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: defines the header of the HTML document; this header usually contains information about the document that is not directly displayed to the user as, for example, the title of the browser window. Inside the header \u003Ccode>\u003C/code> It is possible to find:\n\u003Cul>\u003Cli>\u003Ccode>\u003Ctitle>\u003C/code>: define the title of the page. The title usually appears in the title bar above the window.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: to link the site to style sheets or icons. For example:\u003Ccode>\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: to place the inner style of the page; either using CSS or other similar languages. It is not necessary to place it if it is to link to an external file using the label \u003Ccode>\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: for metadata such as authorship or license, even to indicate http parameters \u003Ccode>http-equiv=\"\"\u003C/code>) when they cannot be modified because the configuration is not available or due to difficulties with server-side scripting.\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: defines the main content or body of the document. This is the part of the html document shown in the browser; within this tag are properties common to the entire page, such as background color and margins. Inside the body \u003Ccode>\u003C/code> numerous labels can be found. Here are some as an example:\n\u003Cul>\u003Cli>\u003Ccode>\u003Carticle>\u003C/code>: Represents a self-contained composition in a document, page, app or site, which is intended to be distributed independently or re-usable.\u003C/li>\u003Cli>\u003Ccode>\u003Ch1>\u003C/code> a \u003Ccode>\u003Ch6>\u003C/code>: headings or titles of the document with different relevance.\u003C/li>\u003Cli>\u003Ccode>\u003Ctable>\u003C/code>: defines a table.\n\u003Cul>\u003Cli>\u003Ccode>\u003Ctr>\u003C/code>: row of a board.\u003C/li>\u003Cli>\u003Ccode>\u003Ctd>\u003C/code>: cell of a board (must be in a row).\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Ccode>\u003Cfooter>\u003C/code>: represents the foot of a document or section. The information that is usually added in this block is the author of the document, links to related content, copyright information, legal notices, etc.\u003C/li>\u003Cli>\u003Ccode>\u003Ca>\u003C/code>: hyperlink or link, inside or outside the website. The pass parameter should be defined through the attribute \u003Ci>href\u003C/i>. For example: \u003Ccode>\u003Ca href=\"http://www.example.com\" title=\"Ejemplo\" target=\"_blank\">Ejemplo\u003C/a>\u003C/code> is represented as an example.\u003C/li>\u003Cli>\u003Ccode>\u003Cdiv>\u003C/code>: division of the page. It is recommended, together with css, instead of \u003Ccode>\u003Ctable>\u003C/code> when you want to align content.\u003C/li>\u003Cli>\u003Ccode>\u003Cimg>\u003C/code>: image. Requires the attribute \u003Ci>src\u003C/i>which indicates the route in which the image is found. For example: \u003Ccode>\u003Cimg src=\"./imágenes/mifoto.jpg\" />\u003C/code>. It is convenient, for accessibility, to put an attribute \u003Ccode>alt=\"texto alternativo\"\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003Col>\u003C/code>: label for orderly lists.\u003C/li>\u003Cli>\u003Ccode>\u003Cul>\u003C/code>: label for messy lists.\u003C/li>\u003Cli>\u003Ccode>\u003Cli>\u003C/code>: tag elements from a list.\u003C/li>\u003Cli>\u003Ccode>\u003Cb>\u003C/code>: bold text (\u003Ci>Disapproved label. It is recommended to use the label \u003Ccode>\u003Cstrong>\u003C/code>\u003C/i>).\u003C/li>\u003Cli>\u003Ccode>\u003Ci>\u003C/code>: text in italics (\u003Ci>Disapproved label. It is recommended to use the label \u003Ccode>\u003Cem>\u003C/code>\u003C/i>).\u003C/li>\u003Cli>\u003Ccode>\u003Cs>\u003C/code>: text slashed (\u003Ci>Disapproved label. It is recommended to use the label \u003Ccode>\u003Cdel>\u003C/code>\u003C/i>).\u003C/li>\u003Cli>\u003Ccode>\u003Cu>\u003C/code>: Before text underlined. From HTML 5 defines differentiated or highlighted text portions of the rest, to indicate corrections for example (unproven tag in HTML 4.01 and redefined in HTML 5).\u003C/li>\u003Cli>\u003Ccode>\u003Cmain>\u003C/code>: structural division of the page that encompasses the main content of the page. Within this label, for example, we find the \u003Ccode>\u003Carticle>\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003Cspan>\u003C/code>: Serve to differentiate one text from another.\u003C/li>\u003Cli>\u003Ccode>\u003C/code>: Serve to cause a line jump. This tag doesn't close.\u003C/li>\u003Cli>\u003Ccode>\u003Chr>\u003C/code>: Serves to provoke a change of subject between paragraphs. This tag doesn't close.\u003C/li>\u003Cli>\u003Ccode>\u003Cdetails>\u003C/code>: Serve to create a drop-down section\u003C/li>\u003Cli>\u003Ccode>\u003Csummary>\u003C/code>: Serve to create the title of the drop-down section\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>Most tags should close like they open, but with a slash (/) as shown in the following examples:\n\u003C/p>\u003Cul>\u003Cli>\u003Ccode>\u003Ctable>\u003Ctr>\u003Ctd>Contenido de una celda\u003C/td>\u003C/tr>\u003C/table>\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>Código de un script integrado en la página\u003C/code>.\u003C/li>\u003Cli>\u003Ccode>\u003Cheader>División estructural en la parte del contenido.\u003C/header>\u003C/code>\u003C/li>\u003C/ul>\u003Ch2>HTML Basics\u003C/h2>\u003Cp>The HTML language can be created and edited with any basic text editor, such as Gedit on GNU/Linux, Notepad on Windows, or any other editor that supports plain text such as GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, Atom, Visual Studio Code, among many others.\n\u003C/p>\u003Cp>There are also other editors for creating websites with WYSIWYG characteristics (\u003Ci>What You See Is What You Get\u003C/i>, or in Spanish: \"what you see is what you get\"). These editors allow you to see the result of what is being edited in real time, as the document is being developed. Now, this does not mean a different way of creating websites, but rather a somewhat simpler way, since these programs, in addition to having the option of working with the preview, have their own HTML section, which generates all the code as you work on it. Some examples of WYSIWYG editors are KompoZer, Microsoft FrontPage or Adobe Dreamweaver.\n\u003C/p>\u003Cp>Combining these two methods is very interesting, as they somehow help each other. For example, if everything is edited in HTML and the developer forgets some code or tag, it is enough to go to the visual or WYSIWYG editor and continue editing there or vice versa, since there are cases in which it is faster and easier to write the code directly of some characteristic that the user wishes to add to the site than to look for the option in the program itself.\n\u003C/p>\u003Cp>There is another type of HTML editors called WYSIWYM that give more importance to content and meaning than to visual appearance. Among the objectives that these editors have is the separation of content and presentation, essential in web design.\n\u003C/p>\u003Cp>HTML uses tags or markup, which are short start and end instructions, which determine how text, as well as images and other elements, should appear on your screen in your browser. of the computer.\n\u003C/p>\u003Cp>Every tag is identifiable because it is enclosed between the less than and greater than signs (\u003Ccode><>\u003C/code>), and some have attributes that can take some value. In general, labels will be applied in two special ways:\n\u003C/p>\u003Cul>\u003Cli>They open up and close, such as: ≤1⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄4⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄4⁄2⁄2⁄2⁄2⁄4⁄4⁄4⁄4⁄4⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2⁄2o,ÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂÂ \u003Cb>bold\u003C/b>.\u003C/li>\u003Cli>They cannot be opened and closed, such as ≤/105, which would be seen in your web browser as a horizontal line.\u003C/li>\u003Cli>Others that can be opened and closed, such as θp.\u003C/li>\u003Cli>The basic or minimum labels are:\u003C/li>\u003C/ul>\u003Cdiv class=\"mw-highlight mw-highlight-lang-html mw-content-ltr\" dir=\"ltr\">\u003Cpre>\u003Cspan>\u003C/span>\u003Cspan class=\"cp\">▪DOCTYPE PHP\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">html\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">head\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">goal\u003C/span> \u003Cspan class=\"na\">charset\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"utf-8\"\u003C/span> \u003Cspan class=\"p\">/ 2005\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">title\u003C/span>\u003Cspan class=\"p\">▪\u003C/span>Example1\u003Cspan class=\"p\">”\u003C/span>\u003Cspan class=\"nt\">title\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">”\u003C/span>\u003Cspan class=\"nt\">head\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">body\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">▪\u003C/span>Example paragraph\u003Cspan class=\"p\">”\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">▪\u003C/span> \u003Cspan class=\"p\">”\u003C/span>\u003Cspan class=\"nt\">body\u003C/span>\u003Cspan class=\"p\">▪\u003C/span>\u003Cspan class=\"p\">”\u003C/span>\u003Cspan class=\"nt\">html\u003C/span>\u003Cspan class=\"p\">▪\u003C/span>\u003C/pre>\u003C/div>\u003Ch2>Text editors\u003C/h2>\u003Cp>For web development, programmers use a text editor. These are normally made for the purpose of ease of programming. There are currently many, such as these: Notepad++, Adobe Dreamweaver, Sublime text, among others.\n\u003C/p>\u003Ch2>Learn HTML by analyzing real pages\u003C/h2>\u003Cp>By selecting the \"view source\" option in the browser, you can actually see what information the web browser is receiving and how it is interpreting it.\n\u003C/p>\u003Cdiv class=\"thumb tright\">\u003Cdiv class=\"thumbinner\" style=\"width:222px\">\u003Ca class=\"image\" href=\"https://en.wikipedia.org/wiki/Archivo:Captura_inspector_de_p%C3%A1gina_en_Firefox.png\">\u003Cimg alt=\"\" class=\"thumbimage\" data-file-height=\"724\" data-file-width=\"1022\" height=\"156\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Captura_inspector_de_p%C3%A1gina_en_Firefox.png/220px-Captura_inspector_de_p%C3%A1gina_en_Firefox.png\" width=\"220\" />\u003C/a> \u003Cdiv class=\"thumbcaption\">\u003Cdiv class=\"magnify\">\u003C/div>Capture of the Firefox page inspector.\u003C/div>\u003C/div>\u003C/div>\u003Cp>For example: in Internet Explorer, simply pull down the \"view\" menu and then choose \"source code\", while in Chrome and Firefox press \u003Cspan class=\"keyboard-key\" style=\"font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb #bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px\">Ctrl\u003C/span>+\u003Cspan class=\"keyboard-key\" style=\"font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb # bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px\">U\u003C/span>. This will open a tab with the source code of the page that is currently being viewed in the browser. Another faster way is to right-click anywhere in the area where the browser displays the web page and choose \"View Page Source\".\n\u003C/p>\u003Cp>Apart from being able to view the HTML source code of a web page with the options described above, Internet Explorer, Firefox and Google Chrome also incorporate tools known as page inspectors that can be activated with \u003Cspan class=\"keyboard-key \" style=\"font-size: 0.85em;border:1px solid;border-bottom-width: 2px;border-color: #ddd #bbb #bbb #ddd;background:#f9f9f9;padding: 1px 3px;border-radius:3px\">F12\u003C/span>.\n\u003C/p>\u003Cp>With these tools it is possible to visualize a web page and select within it a specific element of which we want to know what is the HTML code with which it is made, simply pointing to the element in question with the mouse. By doing this, the code will be displayed in a special area within the browser where the user will be able to see the HTML code in question (see image), as well as the CSS rules that apply to that particular HTML code. This type of analysis is extremely instructive to learn to develop in HTML.\n\u003C/p>\u003Cdiv class=\"thumb tright\">\u003Cdiv class=\"thumbinner\" style=\"width:212px\">\u003Ca class=\"image\" href=\"https://en.wikipedia.org/wiki/Archivo:Debuggerfirefox95.png\">\u003Cimg alt=\"Firefox 95 Inspector / Inspector de Firefox 95\" class=\"thumbimage\" data-file-height=\"810\" data-file-width=\"1185\" height=\"144\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Debuggerfirefox95.png/210px-Debuggerfirefox95.png\" width=\"210\" />\u003C/a> \u003Cdiv class=\"thumbcaption\">\u003Cdiv class=\"magnify\">\u003C/div>Capture of Firefox Page Inspector 95\u003C/div>\u003C/div>\u003C/div>\u003Cp>For the Firefox browser, there is also the Firebug plugin as an alternative to the native tool, very similar to the tool that Firefox incorporates by default.\n\u003C/p>\u003Ch2>History of the standard\u003C/h2>\u003Cp>In 1989 there were two techniques that allowed linking electronic documents, on the one hand hyperlinks or links (\u003Ci>hiperlinks\u003C/i> or \u003Ci>links\u003C/i>) and on the other hand a powerful label language called sgml. At that time, Tim Berners-Lee, who worked at the CERN European Center for Nuclear Research, informed the press that he was working on a system that would allow access to online files that worked on computer networks or electronic machines based on the TCP/IP protocol. Initially it was developed so that information could be easily shared between scientists from different universities and research institutes around the world.\n\u003C/p>\u003Cp>In the early 1990s, he finally defines HTML as a subset of the familiar SGML and creates something even more valuable, the World Wide Web.\n\u003C/p>\u003Cp>Tim Berners-Lee created the World Wide Web project, as well as a system that made it easy to read information through a browser program. It would be the first web browser, called WorldWideWeb, and developed during the second half of the year 1990; being later renamed Nexus, to avoid confusion due to its name, which was the same as the technology it represented. Two other browsers followed: the Line Mode Browser and the ViolaWWW. The latter, developed in 1992, was the first browser to become popular among early adopters of the World Wide Web.\n\u003C/p>\u003Cp>Pei-Yuan Wei presented ViolaWWW, which would run in text mode and on a UNIX operating system.\n\u003C/p>\u003Cp>Work to create a successor to HTML, called HTML+, began in late 1993. HTML+ was originally designed to be a superset of HTML that would gradually evolve from the earlier HTML format. The first formal specification of HTML+ was therefore given the version number 2 to distinguish it from previous unofficial proposals. Work on HTML+ continued, but it never became a standard, despite being the most formally compositional-like base of current specifications.\n\u003C/p>\u003Cp>The draft HTML 3.0 standard was proposed by the newly formed W3C in March 1995. With it many new capabilities were introduced; for example, facilities for creating tables, making text flow around figures, and displaying complex mathematical elements. Although it was designed to be compatible with HTML 2.0, it was too complex to be implemented with the technology of the time, and when the draft standard expired in September 1995, it was abandoned due to lack of support from web browser manufacturers. HTML 3.1 was never officially proposed, and the next standard was HTML 3.2, which abandoned most of the new features of HTML 3.0 and instead adopted many elements initially developed by the Netscape and Mosaic web browsers. The possibility of working with mathematical formulas that had been proposed in HTML 3.0 became integrated into a different standard called MathML.\n\u003C/p>\u003Cp>In 1997, HTML 4.0 was published as a W3C Recommendation. HTML 4.0 adopted many specific elements initially developed for a particular web browser, but at the same time began to clean up the HTML by marking some of them as \u003Ci>deprecated\u003C/i>.\n\u003C/p>\u003Cp>HTML 4.0 implements features like XForms 1.0 that do not need to implement navigation engines that were incompatible with some HTML web pages. In 2004 the W3C reopened the debate on the evolution of HTML, and the bases for the HTML5 version were released. However, this work was rejected by the members of the W3C and preference would be given to the development of XML.\n\u003C/p>\u003Cp>Apple, Mozilla, and Opera all announced their interest in continuing to work on the project under the name WHATWG, which is based on backwards compatibility.\n\u003C/p>\u003Cp>In 2006, the W3C became interested in HTML5 development, and in 2007 joined the WHATWG working group to unify the project.\n\u003C/p>\u003Ch2>Web accessibility\u003C/h2>\u003Cdiv class=\"noprint AP rellink\">\u003Cspan style=\"font-size:88%\">Main article:\u003C/span> \u003Ci> Web accessibility\u003C/i>\u003C/div>\u003Cp>The HTML design, apart from complying with the specific language specifications, must respect certain web accessibility criteria, following some guidelines or the regulations and laws in force in the countries where this concept is regulated. It is available and developed by the W3C through the Web Content Accessibility Guidelines 1.0 WCAG (recently updated with the 2.0 specification), although many countries have their own specifications, as is the case of Spain with the UNE 139803 Standard.\n\u003C/p>\u003Ch2>HTML Entities\u003C/h2>\u003Cdiv class=\"noprint AP rellink\">\u003Cspan style=\"font-size:88%\">Main article:\u003C/span> \u003Ci> List of XML and HTML character entities\u003C/i>\u003C/div>\u003Cp>Many special characters, letters with tildes, umlauts, or language script symbols can be represented in an HTML document either by themselves or by an entity reference. Among the advantages of using an entity reference, are that of being able to represent Unicode characters using a different character encoding, or to fill in for some missing characters on the keyboard used.\n\u003C/p>",{"status":17,"payload":18},{"code":6},{"id":19,"slug":9,"recordsID":8,"lastUpdate":20,"relatedContent":21},39451,"2024-06-09T19:19:57.907887Z",[22,26,30],{"title":23,"desc":24,"url":25},"Power electronics","The expression power electronics is used to differentiate the type of application given to electronic devices, in this case to transform and control voltages...","/encyclopedia/power-electronics/",{"title":27,"desc":28,"url":29},"Alphanumeric code","With a one-bit code we can represent 21=2 combinations. To represent the ten digits and the 26 lowercase letters we need at least 6 bits (25=32, 26=64...","/encyclopedia/alphanumeric-code/",{"title":31,"desc":32,"url":33},"Open Source","Open source is a software development model based on open collaboration. practical benefits and ethical or freedom issues that stand out so much in free...","/encyclopedia/open-source/",["Reactive",35],{},["Set"],["ShallowReactive",38],{"content":39,"related":39},null,true,"/encyclopedia/html"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"891e51b2-22a5-4f72-9bfa-75a9902b372c",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script> <script defer src="https://www.googletagmanager.com/gtag/js?id=G-3NVN9267P3"></script> <script>(async(e,t,a)=>{e[t]=async function(){(e[a]=e[a]||[]).push(arguments),e.dispatchEvent(new CustomEvent("layerUpdated",{detail:arguments}))},e[t]("js",new Date),e[t]("config","G-3NVN9267P3",{transport_type:"beacon"}),e.addEventListener("error",(a=>{e[t]("error",a),a.preventDefault()}))})(window,"gtag","dataLayer")</script></body></html>