#hr tag in html example | Explore Tumblr posts and blogs

promptlyspeedyandroid · 16 days ago

Text

Top HTML Interview Questions and Answers for Freshers and Experts

HTML (HyperText Markup Language) is the fundamental building block of web development. Whether you’re a fresher stepping into the tech world or an experienced developer looking to refresh your basics, mastering HTML is essential. It is often the first topic covered in web development interviews, making preparation in this area crucial for any frontend or full-stack role.

This blog on Top HTML Interview Questions and Answers for Freshers and Experts is designed to help candidates at all levels confidently prepare for job interviews. From simple questions about tags and attributes to complex concepts like semantic HTML, accessibility, and new features in HTML5, this guide will walk you through the most frequently asked and impactful questions that hiring managers love to ask.

Why Learn HTML for Interviews?

HTML is not just a markup language. It is the foundation of every webpage. Even modern frameworks like React, Angular, or Vue render HTML at the core. Interviewers want to see if you understand how web pages are structured, how elements behave, and how HTML works in harmony with CSS and JavaScript.

Whether you're applying for a position as a front-end developer, UI/UX designer, WordPress developer, or full-stack engineer, HTML questions are almost always a part of the technical screening process.

HTML Interview Questions for Freshers

1. What is HTML?

Answer: HTML stands for HyperText Markup Language. It is used to create the structure of web pages using elements like headings, paragraphs, images, links, and more.

2. What is the difference between HTML and HTML5?

Answer: HTML5 is the latest version of HTML. It includes new semantic elements (<header>, <footer>, <article>), multimedia support (<audio>, <video>), and improved APIs like canvas, local storage, and geolocation.

3. What is a tag in HTML?

Answer: A tag is a keyword enclosed in angle brackets that defines the beginning and end of an HTML element (e.g., <p>Paragraph</p>).

4. What is the purpose of the <DOCTYPE html> declaration?

Answer: It defines the HTML version and helps the browser render the page correctly. For HTML5, it is written as <!DOCTYPE html>.

5. What is the difference between <div> and <span>?

Answer: <div> is a block-level element used for grouping sections, while <span> is an inline element used for styling a part of text or inline elements.

Intermediate to Advanced HTML Interview Questions

6. What is semantic HTML?

Answer: Semantic HTML uses meaningful tags (like <article>, <section>, <nav>) to describe the content, making it more readable for developers and accessible for screen readers and search engines.

7. What are void (self-closing) elements in HTML?

Answer: Void elements do not have a closing tag. Examples include <img>, <input>, <br>, and <hr>.

8. How is HTML different from XML?

Answer: HTML is designed for web page layout, while XML is used for storing and transporting data. HTML is more lenient with errors, whereas XML is strict and case-sensitive.

9. What is the difference between id and class attributes?

Answer: An id is unique for a single element, while a class can be applied to multiple elements. IDs are used for single-item styling or DOM targeting, whereas classes help in grouping and styling multiple elements.

10. What is the use of the alt attribute in images?

Answer: The alt attribute provides alternative text for images when they cannot be displayed. It also helps screen readers understand the image content, enhancing accessibility.

HTML5-Specific Interview Questions

11. Explain the difference between <section> and <article>.

Answer: <section> defines a thematic grouping of content, while <article> represents independent, self-contained content like blog posts or news articles.

12. What is the purpose of the <canvas> element?

Answer: The <canvas> element in HTML5 allows drawing graphics, animations, and visualizations using JavaScript.

13. How does local storage work in HTML5?

Answer: HTML5 introduces localStorage, allowing you to store data in the browser with no expiration time. It helps in storing user preferences or app data even after the browser is closed.

Why Interviewers Ask HTML Questions

To evaluate your core web development knowledge

To assess your understanding of page structure and layout

To test your awareness of accessibility and SEO principles

To understand your readiness to work on real projects

Even if you're familiar with frameworks like React or Angular, understanding raw HTML ensures you're not dependent on abstractions.

Tips to Prepare for HTML Interviews

Practice writing HTML code regularly.

Read documentation on HTML5 and its newer features.

Understand semantic elements and SEO best practices.

Use online editors like CodePen, JSFiddle, or Visual Studio Code for hands-on experience.

Explore real-world examples like building forms, creating layouts, and embedding media.

Who Should Read This Blog?

This blog is ideal for:

Freshers preparing for entry-level front-end interviews

Self-taught developers polishing their HTML fundamentals

Web designers shifting to development roles

Professionals brushing up on HTML for technical assessments

Conclusion

Preparing for HTML interviews doesn’t just help you answer questions—it helps you build a stronger foundation for web development. Whether you are just starting or have years of experience, reviewing these Top HTML Interview Questions and Answers for Freshers and Experts will give you the confidence to tackle interviews effectively.

#HTMLInterviewQuestions #WebDevelopment #HTML5 #FrontendInterview

0 notes

tpointtech1 · 2 months ago

Text

HTML Tutorial: A Beginner’s Guide

Learn web development with our easy-to-follow HTML Tutorial! Perfect for beginners, this guide covers HTML basics, tags, structure, and real examples to help you build your first website. No prior coding experience is needed—just start learning at your own pace and create beautiful web pages. Ideal for students, bloggers, and aspiring developers. Start your HTML journey today and code with confidence!

CONTACT INFORMATION

Email: [email protected]

Phone No. : +91-9599086977

Website: https://www.tpointtech.com/html-tutorial

Location: G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

#HTML Tutorial #Learn HTML for Beginners #What is HTML #HTML

1 note · View note

html-tute · 11 months ago

Text

HTML Text Formatting

HTML provides various tags to format text, allowing you to change the appearance and structure of your content. Here's a guide to the most commonly used text formatting tags in HTML:

1. Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings are used to create titles and organize content hierarchically.<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3> <h4>Sub-sub-subheading</h4> <h5>Sub-sub-sub-subheading</h5> <h6>Smallest Heading</h6>

2. Paragraphs

Paragraphs are used to group blocks of text together. HTML automatically adds space before and after paragraphs.<p>This is a paragraph of text. Paragraphs are block-level elements, meaning they take up the full width available.</p>

3. Line Breaks

To create a line break within a paragraph or other text, use the <br> tag. This tag is an empty element and doesn’t have a closing tag.<p>This is the first line.<br>This is the second line, on a new line.</p>

4. Horizontal Lines

A horizontal line (thematic break) can be created using the <hr> tag. This is often used to separate sections of content.<p>This is some text before the line.</p> <hr> <p>This is some text after the line.</p>

5. Bold Text

To make text bold, you can use the <b> or <strong> tag. While both tags visually render text in bold, <strong> also indicates that the text is of strong importance.<p>This is <b>bold</b> text.</p> <p>This is <strong>strong</strong> text, which also has semantic importance.</p>

6. Italic Text

To italicize text, you can use the <i> or <em> tag. The <em> tag emphasizes the text semantically, meaning it can affect the way assistive technologies interpret the content.<p>This is <i>italicized</i> text.</p> <p>This is <em>emphasized</em> text.</p>

7. Underlined Text

To underline text, use the <u> tag. This is not as commonly used today due to styling being handled by CSS, but it's available in HTML.<p>This is <u>underlined</u> text.</p>

8. Superscript and Subscript

Superscript: The <sup> tag raises text slightly above the baseline, often used for exponents or footnotes.

Subscript: The <sub> tag lowers text slightly below the baseline, often used for chemical formulas.

<p>This is superscript: x<sup>2</sup></p> <p>This is subscript: H<sub>2</sub>O</p>

9. Strikethrough Text

To strike through (cross out) text, use the <s> or <del> tag.<p>This is <s>strikethrough</s> text.</p> <p>This is <del>deleted</del> text, often indicating something that has been removed.</p>

10. Monospaced (Code) Text

To display text in a monospaced (fixed-width) font, typically used for code, use the <code> tag.<p>This is <code>inline code</code> within a paragraph.</p> <pre> <code> function example() { console.log('This is code'); } </code> </pre>

11. Small Text

The <small> tag decreases the font size of the text, often used for disclaimers or fine print.<p>This is normal text.</p> <p>This is <small>small</small> text.</p>

12. Marked Text

The <mark> tag highlights text with a yellow background, similar to using a highlighter.<p>This is <mark>highlighted</mark> text.</p>

13. Quotations

Inline Quotes: The <q> tag is used for short quotations and automatically adds quotation marks.

Block Quotes: The <blockquote> tag is used for longer quotes, usually indented.

<p>This is an inline quote: <q>To be or not to be, that is the question.</q></p> <blockquote> This is a block quote. It is usually used for longer quotations. </blockquote>

Source: Understanding HTML: From Basics To Advance

#html #css #web development

0 notes

wordsofwilderness · 4 months ago

Text

So far the only thing I've used the course I took in System Design and User Interface is to know how to format my fics to be screen reader friendly. So yeah! If you put a bunch of fancy symbols, text to speach is going to read the full name to them one by one. So use the <hr> html tag instead (hr as in horizontal line)

Another tip is knowing the difference between <em> (as in emphasis) and <i> (as in italic). Visually they appear the same, but screen reader treat them differently. So for example if a character is stressing a particular word in dialogue you'd use the <em> tag:

"I don't <em>want</em> to"

Where as if it's a place name, foreign language word, title or similar, you'd use the <i> tag like so:

<i>Bohemian Rhapsody</i> was playing on the radio

A small request from a very dyslexic person to fanfic writers. Would you be so kind to use the ao3 scene break deviders or just the age old *** because some of y'alls scene divider techniques make my ears bleed when using tts.

#putting this here since it's fandom specific:#but spell names should also just be italicized without emphasis #archive of our own #ao3 #fanfiction writing #fanfic writing

14 notes · View notes

krishna337 · 3 years ago

Text

HTML hr Tag

The HTML <hr> tag is used to define a horizontal line or rule to separate content in an HTML page. The <hr> tag is an empty tag and this tag does not require an ending tag. Syntax <hr> Example <!doctype html> <html> <head> <title>HTML Hr Tag</title> </head> <body> <h1>What Is HTML?</h1> <p>HTML stands for Hyper Text Markup Language, which is the most popular language on web and the language is…

View On WordPress

0 notes

penname-artist · 3 years ago

Text

This is a hot take, at 12:20 in the morning, because I've been thinking about it and now I would like to make words appear:

I wish to impart some 'old hag of the fandom realm' wisdom to fanfic writers, of all kinds, on what to maybe not do, when writing your fic. Constructive critique of course, this is not to bash on those who do these things. Cuz see sometimes, I am human, and I have preference, and often my preference is for fics...that have...correct grammar...

Line breaks. If you are posting to a site like AO3, there is a special HTML code for a line break to separate scene changes in your fic, and it's <hr>. Please use them, please? We have them, they're beautiful. We don't have to have a hundred squiggly ~~~*~~~ lines, I know they look pretty, but people who use screen readers get very frustrated when they get to them. There are easier ways, my children. Far easier.

Please...please at the very least understand the structure of sentences. Subject, predicate, period. "The ball (subject) is red (about subject) . (End of the statement)" Run-on sentences, or sentences which have no periods, or the periods are far too spaced out, get really really hard to read really really quickly. Example: There used to be a ball in the park where I used to play with my friend Dillan, he is away in another city right now, so he hid the ball somewhere near the playground where we used to play and left clues all over for me to try to figure out where it might be and I went out there this afternoon with my family to try to see if I could find the first clue to *snooooore*

If you do struggle with grammar errors and such, kindly see if there is a buddy or fellow mutual able to assist you or edit your fics. This will optimize not only the quality of the content coming out for readers, but it will increase your bond with your editor. Probably.

It never hurts to keep an air of professionalism. Remember to try and keep readers in the moment, so taking them out to add in personal notes during the fic may not be the best idea (unless the intention is only for comedic effects. *Squeaks rubber chicken*)

As well, remember to keep track of your writing tense during the scene. Is it past tense? Present? First person POV, third person POV? Double check if you're not sure.

Lastly, since I see lots of people struggle with this type of thing, remember you can also read up on grammar stuff if you're ever in a jam. The internet is full of easy ways to learn the correct dialogue tags without spending forever in a classroom trying to pass a test. Use it to your advantage! And there are tons of additional writing helpers out there; synonyms, word rhyme sites, writing quality checkers, finding missing words, and more.

#writing tips #fanfiction #fanfiction tips #writing advice

19 notes · View notes

webtutorsblog · 2 years ago

Text

Learn HTML Tags with WebTutor.dev: Your Ultimate Resource for Web Development Tutorials

HTML (Hypertext Markup Language) is the backbone of the web. It is the standard markup language used to create web pages. HTML consists of a series of tags that define the structure and content of a web page. In this blog post, we will dive deeper into HTML tags, what they are, and how they work.

HTML tags are the building blocks of a web page. They are used to define the structure and content of a web page. HTML tags are surrounded by angle brackets (<>) and are written in lowercase. There are two types of HTML tags: opening tags and closing tags. An opening tag is used to start a tag, and a closing tag is used to end it. For example, the opening tag for a paragraph is <p>, and the closing tag is </p>.

HTML tags can also have attributes, which provide additional information about the tag. Attributes are included in the opening tag and are written as name-value pairs. For example, the <img> tag is used to embed an image on a web page. The src attribute is used to specify the URL of the image. The alt attribute is used to provide a description of the image for users who cannot see it.

HTML tags can be used to define headings, paragraphs, links, images, lists, tables, forms, and more. Here are some examples of commonly used HTML tags:

<html>: Defines the document as an HTML document

<head>: Defines the head section of the document, which contains metadata such as the page title and links to external files

<title>: Defines the title of the document, which appears in the browser's title bar

<body>: Defines the body section of the document, which contains the content of the page

<h1> to <h6>: Defines HTML headings of different sizes, with <h1> being the largest and <h6> being the smallest

<p>: Defines a paragraph

<a>: Defines a hyperlink to another web page or a specific location on the same page

<img>: Defines an image to be displayed on the page

<ul> and <ol>: Defines unordered and ordered lists, respectively

<table>: Defines a table

<form>: Defines a form for user input

<br>: Inserts a line break

<hr>: Inserts a horizontal rule

<strong>: Defines text as important or emphasized

<em>: Defines text as emphasized

<blockquote>: Defines a block of quoted text

<cite>: Defines the title of a work, such as a book or movie

<code>: Defines a piece of code

<pre>: Defines preformatted text, which preserves spaces and line breaks

<sup> and <sub>: Defines superscript and subscript text, respectively

<div>: Defines a section of the page for grouping content

<span>: Defines a small section of text within a larger block of text for styling purposes

Learning HTML can seem daunting, but with the right resources, it can be easy and enjoyable. One such resource is WebTutor.dev, an online platform that provides tutorials on web development, including HTML. The tutorials are easy to follow and provide a hands-on learning experience. The platform also offers quizzes to test your knowledge and a community forum to connect with other learners and ask questions.

In conclusion, HTML tags are the building blocks of a web page. They define the structure and content of a web page and can be used to create headings, paragraphs, links, images, lists, tables, forms, and more. If you are interested in learning HTML, check out WebTutor.dev for easy-to-follow tutorials and a supportive community of learners.

2 notes · View notes

flowcodes · 2 years ago

Text

Break In Text/Line Break

In the formatting in Ao3 if you just copy and paste the text from a Google doc word doc or wherever you had put your fanfiction then the text will look like one enormous paragraph. This will stop some readers from reading or enjoying it. Or say you want a passage of time but just putting this___________ does not look good to you. Let me show you ways to help!

The break in the text.

Make sure you are on HTML and after the end of your paragraph put < br> without the space.

Example:

Text

< br>

Text

Now if you have seen some of my other posts or know a little HTML then you might be wondering where is the </br>. Well some tags do not have the </ one after it since there is no text to be put in so there will be no end tag (which is </) to distinguish where the code will end since it is just there for formatting purposes with no text.

If you didn't get that then basically there are 2 types of coding tags generally speaking.

*insert text*

The Line Break

Now for the line break like the text break where it is jut <tag name> but the tag name is different. So for the line break, it will look like this:

Text

< hr>

Text

And that will give you a nice line again as always without the space.

I hope this helped!

#ao3 coding #code #html #html tags #html tutorial #ao3 html #ao3 #ao3 author #ao3 stuff #archive of our own #ao3 fanfic #fanfiction #fanfic writing #fanfic

2 notes · View notes

munchlax-musings · 3 years ago

Text

What is HTML? - steno vocab list

im practicing using hard copy today, and the webpage i just completed is:

i only know as much HTML and CSS as needed to customize a Neopets webpage at this point.

my goal for taking this course is to be able to redesign my Tumblr blog. the color scheme isnt where i want it to be. not high enough contrast for ppl who rly need the high contrast, and it definitely makes it awful for basically anyone, tbh. not good or accessible.

anyway, by practicing to this webpage, i think im rly hitting two balls with one bat here. or maybe im not actually taking in any of the info at all lol idk

this wont be an exhaustive list of all terms on the page (that would literally be most of the words lol). this is just what i needed to note while writing

Click read more to see my list!

Tags:

here is my workaround for writing the tags:

TKPWA* -> {^ ^}{#shift(comma)}

TKPW*E -> {#shift(period)}{^^}

TKPWA*T -> {#shift(comma)}{^^}

TKPW*ET -> {#shift(period)}

these, combined, can produce:

space <tag>word<tag> space

Additionally:

STKPWA*T -> {^^}{#shift(comma)}{&/}{^^}

STKPW*ET -> {#shift(period)}

can produce:

word</tag> space

Also:

STKPWA*ET -> {#shift(period)}{^^}

can produce:

tag>WordNoSpace

and

tag><NoSpace tag></NoSpace

when combined with TKPWA*T and STKPWA*T

These have been added to my Google doc called legal transcription commands, captioning commands, and punctuation.

Words in my dictionary, but i didn't know/didn't remember how to write:

Words/Briefs:

KRAET -> create

PRAUSZ -> process

PRAUSZ/-R -> processor

WRAZ -> whereas

TKEUFRPBS -> difference

KPAOURTS -> computers

TPH/TWEUGZ -> intuition

PH-LD -> immediately

STRUR -> structure

AEUFPL -> HTML

KPAEL -> exactly

HEU/P-R -> hyper

PHARBG/-P -> markup

WRAPG -> wrapping

KPAPL -> exam

KP-FPL -> example

APBG/-R -> anchor

TKRAESZ -> address

KPEPGZ -> exception

TKPWRAFPGZ -> congratulation

REFR -> refer

REFRD -> referred

TKEBG/HR-RGZ -> declaration

SPOEUF/-G -> specifying

SEBGD -> second

PRAURP -> proper

PRAURPT -> property

PRAURPTS -> properties

KPHOPB -> common

KPHOPBL -> commonly

TPH-FRPL -> inform

TPH-FRGZ -> information

Phrases:

STHAULD -> is that you would

THAULD -> that you would

PHOERPB -> more than

T/PHUB -> it must be

PHUB -> must be

TELT -> tell the

TH-S -> this is

SUFPS -> such as

TAO*GT -> to get

UPBD/-G/-F -> understanding of

HOUT -> how the

WUFT -> one of the

STHAEUR -> is their

TPHOERDZ -> in other words

PW-T -> about the

TPHORD -> in order

Words I had to define myself:

Words/Briefs:

TKAUPLT -> document

PHAOEUBG/SAUFT -> Microsoft

PHAOEUBG/SAUFT/WORD -> Microsoft Word

TKPWAOG/-L/TK*OBG -> Google Doc

TKPWAOG/-L/TKOBG -> Google doc

ET/SET/RU/R-R -> etc.

TK-FRPBS -> difference

PAEUR/TKPWR-F -> paragraph

STKR-PT/-R -> descriptor

STKREUPT/-R -> descriptor

TKE/SKREUPT/-R -> descriptor

KWREPL -> email

KWR*EPL -> e-mail

Phrases:

WRAPB -> where an

W-PB -> within

PHO*EFT -> most of the

These have been added to my trello card for this course.

#steno #stenography #hard copy practice #transcription #coding #html css #vocab list #educative.io #coding resources #steno resources #munchlax's musings #trello

2 notes · View notes

isomorphismes · 4 years ago

Quote

There are no theorems in category theory.

Emily Riehl, Category Theory In Context

Mathematicians often tell her this; hence the book.

If I had to summarise her views in one sentence, it would be:

Everything is an adjunction.

I also like the division these mathematicians are making to her: essentially, a theorem is anything that solves Feynman’s challenge: by a series of clear, unsurprising steps, one arrives at an unexpected conclusion.

Examples for me include:

17 possible tessellations

6 ways to foliate a surface

27 lines on a cubic

1, 1, 1, 1, 1, 1, 28, 2, 8, 6, 992, 1, 3, 2, 16256, 2, 16, 16, 523264, 24, 8, 4 ways to link any-dimensional spheres.

the existence of sporadic groups

surprising rep-theory consequences of Young diagrams, Ferrers sequences, and so on (you could say the strangeness of integer partitions is really to blame here…)

59 icosahedra

8 geometric layouts

Books which are bristling with mathematical ideas of this kind include Montesinos on tessellations, Geometry and the Imagination (the original one), and Coxeter’s book on polyhedra (start with Baez on A-D-E if you want to follow my path). Moonshine and anything by Thurston or his students, I’ve found similarly flush with shockng content—quite different to what I thought mathematics would be like. (I had pictured something more like a formal logic book: row by row of symbols. But instead, the deeper I got into mathematics, the fewer the symbols and the more the surnames thanking the person who came up with some good idea.)

Note that a theorem is different here to some geometry — as in The Geometry of Schemes. The word geometry used in that sense, I feel, is to have a comprehensive enough vision of a subject to say how it “looks” — but the word theorem means the result is surprising or unintuitive.

This definition of a theorem, to me, presents a useful challenge to annoying pop-psychology that today lurks under the headings of Bayesianism, cognitive _______, behavioural econ/finance, and so on.

Following Buliga and Thurston to understand the nature of mathematical progress, within mathematics at least (where it’s clearer than elsewhere whether you understand something or not—compare to economic theory for example), there is a clear delination of what’s obvious and what’s not.

What is definitely not the case in mathematics, is that every logical or computable consequence of a set of definitions is computed and known immediately when the definitions are stated! You can look at a (particularly a good) mathematical exposition as walking you through the steps of which shifts in perspective you need to take to understand a conclusion. For example start with some group, then consider it as a topological object with a cohomology to get the centraliser. Or in Fourier analysis: re-present line-elements on a series of widening circles. Use hyperbolic geometry to learn about integers. Use stable commutator length (geometry) to learn about groups. Or read about Teichmüller stuff and mapping class groups because it’s the confluence of three rivers.

Sometimes mathematical explanations require fortitude (Gromov’s "energy") and sometimes a shift in perspective (Gromov’s (neg)"entropy").

This view of theorems should be contrasted to the disease of generalisation in mathematical culture. Citing two real-life grad students and a tenured professor in logic (one philosophical, one mathematical, the professor in computer science):

I like your distinction between hemi-toposes, demi-toposes, and semi-toposes

I care about hyper-reals, sur-reals, para-consistency, and so on

Abstract thought — like mathematicians do — is the best kind of thought.

(twitter.com/replicakill, the author of twitter.com/logicians, ragged on David Lewis by saying “What do mathematicians like?” “What do mathematicians think?” —— And Corey Mohler has done a wonderful job of mocking Platonism, which is how I guess the thirst for over-generalisation reaches non-mathematicians.)

Paul Halmos knew that cool examples beat generalisations for generalisation’s sake, as did V. I. Arnol’d. And it seems that the people a Harvard mathematician spends her time with make reasonable demands of a mathematical idea as well. It shouldn’t just contain previous theories; it should surprise. In Buliga’s Blake/Reynolds dispute, Blake wins hands down.

70 notes · View notes

mostlysignssomeportents · 5 years ago

Text

20 years a blogger

It's been twenty years, to the day, since I published my first blog-post.

I'm a blogger.

Blogging - publicly breaking down the things that seem significant, then synthesizing them in longer pieces - is the defining activity of my days.

https://boingboing.net/2001/01/13/hey-mark-made-me-a.html

Over the years, I've been lauded, threatened, sued (more than once). I've met many people who read my work and have made connections with many more whose work I wrote about. Combing through my old posts every morning is a journey through my intellectual development.

It's been almost exactly a year I left Boing Boing, after 19 years. It wasn't planned, and it wasn't fun, but it was definitely time. I still own a chunk of the business and wish them well. But after 19 years, it was time for a change.

A few weeks after I quit Boing Boing, I started a solo project. It's called Pluralistic: it's a blog that is published simultaneously on Twitter, Mastodon, Tumblr, a newsletter and the web. It's got no tracking or ads. Here's the very first edition:

https://pluralistic.net/2020/02/19/pluralist-19-feb-2020/

I don't often do "process posts" but this merits it. Here's how I built Pluralistic and here's how it works today, after nearly a year.

I get up at 5AM and make coffee. Then I sit down on the sofa and open a huge tab-group, and scroll through my RSS feeds using Newsblur.

I spend the next 1-2 hours winnowing through all the stuff that seems important. I have a chronic pain problem and I really shouldn't sit on the sofa for more than 10 minutes, so I use a timer and get up every 10 minutes and do one minute of physio.

After a couple hours, I'm left with 3-4 tabs that I want to write articles about that day. When I started writing Pluralistic, I had a text file on my desktop with some blank HTML I'd tinkered with to generate a layout; now I have an XML file (more on that later).

First I go through these tabs and think up metadata tags I want to use for each; I type these into the template using my text-editor (gedit), like this:

<xtags>

process, blogging, pluralistic, recursion, navel-gazing

</xtags>

Each post has its own little template. It needs an anchor tag (for this post, that's "hfbd"), a title ("20 years a blogger") and a slug ("Reflections on a lifetime of reflecting"). I fill these in for each post.

Then I come up with a graphic for each post: I've got a giant folder of public domain clip-art, and I'm good at using all the search tools for open-licensed art: the Library of Congress, Wikimedia, Creative Commons, Flickr Commons, and, ofc, Google Image Search.

I am neither an artist nor a shooper, but I've been editing clip art since I created pixel-art versions of the Frankie Goes to Hollywood glyphs using Bannermaker for the Apple //c in 1985 and printed them out on enough fan-fold paper to form a border around my bedroom.

As I create the graphics, I pre-compose Creative Commons attribution strings to go in the post; there's two versions, one for the blog/newsletter and one for Mastodon/Twitter/Tumblr. I compose these manually.

Here's a recent one:

Blog/Newsletter:

(<i>Image: <a href="https://commons.wikimedia.org/wiki/File:QAnon_in_red_shirt_(48555421111).jpg">Marc Nozell</a>, <a href="https://creativecommons.org/licenses/by/2.0/deed.en">CC BY</a>, modified</i>)

Twitter/Masto/Tumblr:

Image: Marc Nozell (modified)

https://commons.wikimedia.org/wiki/File:QAnon_in_red_shirt_(48555421111).jpg

CC BY

https://creativecommons.org/licenses/by/2.0/deed.en

This is purely manual work, but I've been composing these CC attribution strings since CC launched in 2003, and they're just muscle-memory now. Reflex.

These attribution strings, as well as anything else I'll need to go from Twitter to the web (for example, the names of people whose Twitter handles I use in posts, or images I drop in, go into the text file). Here's how the post looks at this point in the composition.

<hr>

<h1>20 years a blogger</h1><xtagline>Reflections on a lifetime of reflecting.</xtagline>

See that <img> tag in there for frnklogo.jpg? I snuck that in while I was composing this in Twitter. When I locate an image on the web I want to use in a post, I save it to a dir on my desktop that syncs every 60 seconds to the /images/ dir on my webserver.

As I save it, I copy the filename to my clipboard, flip over to gedit, and type in the <img> tag, pasting the filename. I've typed <img src="https://craphound.com/images/ CTRL-V"> tens of thousands of times - muscle memory.

Once the thread is complete, I copy each tweet back into gedit, tabbing back and forth, replacing Twitter handles and hashtags with non-Twitter versions, changing the ALL CAPS EMPHASIS to the extra-character-consuming *asterisk-bracketed emphasis*.

My composition is greatly aided both 20 years' worth of mnemonic slurry of semi-remembered posts and the ability to search memex.craphound.com (the site where I've mirrored all my Boing Boing posts) easily.

A huge, searchable database of decades of thoughts really simplifies the process of synthesis.

Next I port the posts to other media. I copy the headline and paste it into a new Tumblr compose tab, then import the image and tag the post "pluralistic."

Then I paste the text of the post into Tumblr and manually select, cut, and re-paste every URL in the post (because Tumblr's automatic URL-to-clickable-link tool's been broken for 10+ months).

Next I past the whole post into a Mastodon compose field. Working by trial and error, I cut it down to <500 characters, breaking at a para-break and putting the rest on my clipboard. I post, reply, and add the next item in the thread until it's all done.

*Then* I hit publish on my Twitter thread. Composing in Twitter is the most unforgiving medium I've ever worked in. You have to keep each stanza below 280 chars. You can't save a thread as a draft, so as you edit it, you have to pray your browser doesn't crash.

And once you hit publish, you can't edit it. Forever. So you want to publish Twitter threads LAST, because the process of mirroring them to Tumblr and Mastodon reveals typos and mistakes (but there's no way to save the thread while you work!).

Now I create a draft Wordpress post on pluralistic.net, and create a custom slug for the page (today's is "two-decades"). Saving the draft generates the URL for the page, which I add to the XML file.

Once all the day's posts are done, I make sure to credit all my sources in another part of that master XML file, and then I flip to the command line and run a bunch of python scripts that do MAGIC: formatting the master file as a newsletter, a blog post, and a master thread.

Those python scripts saved my ASS. For the first two months of Pluralistic, i did all the reformatting by hand. It was a lot of search-replace (I used a checklist) and I ALWAYS screwed it up and had to debug, sometimes taking hours.

Then, out of the blue, a reader - Loren Kohnfelder - wrote to me to point out bugs in the site's RSS. He offered to help with text automation and we embarked on a month of intensive back-and-forth as he wrote a custom suite for me.

Those programs take my XML file and spit out all the files I need to publish my site, newsletter and master thread (which I pin to my profile). They've saved me more time than I can say. I probably couldn't kept this up without Loren's generous help (thank you, Loren!).

I open up the output from the scripts in gedit. I paste the blog post into the Wordpress draft and copy-paste the metadata tags into WP's "tags" field. I preview the post, tweak as necessary, and publish.

(And now I write this, I realize I forgot to mention that while I'm doing the graphics, I also create a square header image that makes a grid-collage out of the day's post images, using the Gimp's "alignment" tool)

(because I'm composing this in Twitter, it would be a LOT of work to insert that information further up in the post, where it would make sense to have it - see what I mean about an unforgiving medium?)

(While I'm on the subject: putting the "add tweet to thread" and "publish the whole thread" buttons next to each other is a cruel joke that has caused me to repeatedly publish before I was done, and deleting a thread after you publish it is a nightmare)

Now I paste the newsletter file into a new mail message, address it to my Mailman server, and create a custom subject for the day, send it, open the Mailman admin interface in a browser, and approve the message.

Now it's time to create that anthology post you can see pinned to my Mastodon and Twitter accounts. Loren's script uses a template to produce all the tweets for the day, but it's not easy to get that pre-written thread into Twitter and Mastodon.

Part of the problem is that each day's Twitter master thread has a tweet with a link to the day's Mastodon master thread ("Are you trying to wean yourself off Big Tech? Follow these threads on the #fediverse at @[email protected]. Here's today's edition: LINK").

So the first order of business is to create the Mastodon thread, pin it, copy the link to it, and paste it into the template for the Twitter thread, then create and pin the Twitter thread.

Now it's time to get ready for tomorrow. I open up the master XML template file and overwrite my daily working file with its contents. I edit the file's header with tomorrow's date, trim away any "Upcoming appearances" that have gone by, etc.

Then I compose tomorrow's retrospective links. I open tabs for this day a year ago, 5 years ago, 10 years ago, 15 years ago, and (now) 20 years ago:

http://memex.craphound.com/2020/01/14

http://memex.craphound.com/2016/01/14

http://memex.craphound.com/2011/01/14

http://memex.craphound.com/2006/01/14

http://memex.craphound.com/2001/01/14

I go through each day, and open anything I want to republish in its own tab, then open the OP link in the next tab (finding it in the @internetarchive if necessary). Then I copy my original headline and the link to the article into tomorrow's XML file, like so:

#10yrsago Disney World’s awful Tiki Room catches fire <a href="https://thedisneyblog.com/2011/01/12/fire-reported-at-magic-kingdom-tiki-room/">https://thedisneyblog.com/2011/01/12/fire-reported-at-magic-kingdom-tiki-room/</a>

And NOW my day is done.

So, why do I do all this?

First and foremost, I do it for ME. The memex I've created by thinking about and then describing every interesting thing I've encountered is hugely important for how I understand the world. It's the raw material of every novel, article, story and speech I write.

And I do it for the causes I believe in. There's stuff in this world I want to change for the better. Explaining what I think is wrong, and how it can be improved, is the best way I know for nudging it in a direction I want to see it move.

The more people I reach, the more it moves.

When I left Boing Boing, I lost access to a freestanding way of communicating. Though I had popular Twitter and Tumblr accounts, they are at the mercy of giant companies with itchy banhammers and arbitrary moderation policies.

I'd long been a fan of the POSSE - Post Own Site, Share Everywhere - ethic, the idea that your work lives on platforms you control, but that it travels to meet your readers wherever they are.

Pluralistic posts start out as Twitter threads because that's the most constrained medium I work in, but their permalinks (each with multiple hidden messages in their slugs) are anchored to a server I control.

When my threads get popular, I make a point of appending the pluralistic.net permalink to them.

When I started blogging, 20 years ago, blogger.com had few amenities. None of the familiar utilities of today's media came with the package.

Back then, I'd manually create my headlines with <h2> tags. I'd manually create discussion links for each post on Quicktopic. I'd manually paste each post into a Yahoo Groups email. All the guff I do today to publish Pluralistic is, in some way, nothing new.

20 years in, blogging is still a curious mix of both technical, literary and graphic bodgery, with each day's work demanding the kind of technical minutuae we were told would disappear with WYSIWYG desktop publishing.

I grew up in the back-rooms of print shops where my dad and his friends published radical newspapers, laying out editions with a razor-blade and rubber cement on a light table. Today, I spend hours slicing up ASCII with a cursor.

I go through my old posts every day. I know that much - most? - of them are not for the ages. But some of them are good. Some, I think, are great. They define who I am. They're my outboard brain.

#pluralistic

37 notes · View notes

promptlyspeedyandroid · 28 days ago

Text

HTML Interview Questions: Crack Your Web Developer Interview

HTML (HyperText Markup Language) is the foundation of every website you see on the internet. Whether you're a fresher stepping into the tech world or an experienced developer preparing for a job switch, mastering HTML interview questions is crucial for clearing any web developer interview.

In this guide, we’ll explore the most commonly asked HTML interview questions, along with clear explanations and examples. These questions are ideal for both beginners and intermediate developers aiming to showcase their front-end knowledge.

Why HTML is Important in Web Development Interviews

HTML is the standard markup language used to create the structure of web pages. It forms the base upon which CSS and JavaScript work. Employers test HTML skills in interviews to evaluate a candidate’s understanding of webpage structure, semantic elements, accessibility, and proper coding practices.

Basic HTML Interview Questions and Answers

1. What is HTML?

Answer: HTML stands for HyperText Markup Language. It is used to structure content on the web using elements like headings, paragraphs, links, lists, and images.

2. What are HTML tags and elements?

Answer: HTML tags are the building blocks used to create HTML elements. Tags are enclosed in angle brackets, like <p> for paragraphs. An element includes the start tag, content, and end tag, e.g., <p>This is a paragraph</p>.

3. What is the difference between HTML and HTML5?

Answer:

HTML5 is the latest version of HTML.

HTML5 supports semantic elements like <article>, <section>, and <nav>.

It introduces multimedia tags like <audio> and <video>.

HTML5 supports APIs for geolocation, local storage, and canvas graphics.

4. What is a semantic HTML element?

Answer: Semantic HTML elements clearly describe their meaning to both the browser and developer. Examples include <header>, <footer>, <article>, and <aside>. These improve SEO and accessibility.

5. What is the difference between <div> and <span>?

Answer:

<div> is a block-level element used for grouping content.

<span> is an inline element used for styling small pieces of text or elements.

Intermediate HTML Interview Questions

6. How do you create a hyperlink in HTML?

Answer: Use the <a> tag with the href attribute. Example: <a href="https://example.com">Visit Example</a>

7. How can you insert an image in HTML?

Answer: Use the <img> tag with the src and alt attributes. Example: <img src="image.jpg" alt="Description of image">

8. What is the purpose of the alt attribute in images?

Answer: The alt attribute provides alternative text if the image can't load and improves accessibility for screen readers.

9. What is the use of the <meta> tag?

Answer: <meta> provides metadata about the HTML document such as character encoding, page description, keywords, and author. It is placed inside the <head> tag.

10. What are void (self-closing) elements in HTML?

Answer: Void elements do not require a closing tag. Examples include <img>, <br>, <hr>, <input>, and <meta>.

Advanced HTML Interview Questions

11. What is the difference between id and class attributes in HTML?

Answer:

id is unique and used to target one specific element.

class can be used on multiple elements for grouping and styling.

12. How do you create a form in HTML?

Answer:<form action="/submit" method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="Login"> </form>

This creates a form that takes input and submits data to a server.

13. What are some new input types in HTML5?

Answer: HTML5 introduced new input types such as:

date

time

number

range

color These enhance validation and user experience.

14. What is the use of <iframe> in HTML?

Answer: <iframe> is used to embed another HTML page or external content (like YouTube videos) within a current webpage.

Example:<iframe src="https://example.com" width="600" height="400"></iframe>

15. How does HTML handle accessibility?

Answer: HTML supports accessibility through:

Semantic tags

alt attributes for images

ARIA (Accessible Rich Internet Applications) roles

Proper use of forms and labels

These features make content more usable for screen readers and assistive technologies.

Bonus Tips to Crack HTML Interviews

Practice Real Code: Use platforms like CodePen or JSFiddle to experiment with HTML structures.

Understand Semantic HTML: Many companies focus on code that is SEO- and accessibility-friendly.

Be Clear with Fundamentals: Interviewers often focus on basic but important questions.

Combine with CSS & JavaScript: Know how HTML works in combination with styling and scripting.

Ask Clarifying Questions: If you're given a coding task, ask questions before you begin coding.

Final Thoughts

Cracking a web developer interview starts with having a strong grip on the basics, and HTML is at the core of front-end development. This guide — “HTML Interview Questions: Crack Your Web Developer Interview” — has walked you through a range of frequently asked questions from beginner to advanced levels.

By preparing these questions and practicing real-world HTML code, you’ll be well-equipped to confidently answer your interviewer and demonstrate your understanding of webpage structure, elements, and best practices.

So, keep coding, stay curious, and crack that web developer interview!

#what is HTML #How to learn HTML #HTML #HTML interview question for freshers #HTML Interview

0 notes

moonflower-rose · 4 years ago

Note

hi there!! first I wanted to say that I’m super excited to read watch the castles burn—I’m fairly new to the drarry fandom and haven’t read any of your stuff before, but it looks so good!! second, I also wanted to say that I’m truly sorry for your loss. my dad passed away when I was younger and it’s—enormous and overwhelming and awful and I’m so sorry you’re going through that. everyone’s grief is different, i know, so I hope I’m not overstepping. I hope you’ve been finding joy in small things. last, I had a very small kinda stupid question that you do not have to answer—but how do you get that beautifully formatted line break in your ao3 fics? The ———— but without the spaces? sorry that feels stupid, but it’s lovely and understated and I’m hoping to learn how to do it. anyway. hope today is a soft day. best wishes ♡

Hello! Thank you for this message and your lovely words, and you're not overstepping at all - you're very sweet, thank you. I'm learning that grief is different sometimes even for the same person, under different circumstances.

As for the line break thing, that's not a stupid question at all! I do all my writing in Google Docs and I manually put in the HTML tags as I go - I have no idea what other people do and in fact, I think that's quite an interesting topic, I'd love to know!

But I grew up in the olden days of the early 2000's archives and Livejournal, and so I learned a small set of HMTL bits to format my text, and the way I write (and always have because someone 18 years ago taught me, lol) is that I chuck in my HTML as I go along.

I mainly write one shots so I need something to break up changes in scene, and I always used to use < center >***< / center > but then a few years ago I saw a post somewhere that said the *** and other similar things would really fuck up some of the technology for vision impaired readers, which I hadn't realised. I did a bit of googling to see if there was something else that would do the same job while being more accessible. That's where I got the < hr > HTML. I usually frame it with some < br > to add a space above and below the line that < hr > creates.

So it looks like the example above. I have no idea if the HTML I put in this post will look like code or will actually do the thing, lol, so I added a space between the characters to hopefully stop that happening.

I hope this has helped, if anyone else has any input that would be awesome!

#rosie answers #my asks

3 notes · View notes

html-tute · 11 months ago

Text

Basics of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure and content of a webpage, which is then styled with CSS and made interactive with JavaScript. Let’s go through the basics of HTML:

1. HTML Document Structure

An HTML document starts with a declaration and is followed by a series of elements enclosed in tags:<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text on my first webpage.</p> </body> </html>

<!DOCTYPE html>: Declares the document type and version of HTML. It helps the browser understand that the document is written in HTML5.

<html>: The root element that contains all other HTML elements on the page.

<head>: Contains meta-information about the document, like its title and links to stylesheets or scripts.

<title>: Sets the title of the webpage, which is displayed in the browser's title bar or tab.

<body>: Contains the content of the webpage, like text, images, and links.

2. HTML Tags and Elements

Tags: Keywords enclosed in angle brackets, like <h1> or <p>. Tags usually come in pairs: an opening tag (<h1>) and a closing tag (</h1>).

Elements: Consist of a start tag, content, and an end tag. For example:

<h1>Hello, World!</h1>

3. HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and are written as name="value" pairs:<a href="https://www.example.com">Visit Example</a> <img src="image.jpg" alt="A descriptive text">

href: Used in the <a> (anchor) tag to specify the link's destination.

src: Specifies the source of an image in the <img> tag.

alt: Provides alternative text for images, used for accessibility and if the image cannot be displayed.

4. HTML Headings

Headings are used to create titles and subtitles on your webpage:<h1>This is a main heading</h1> <h2>This is a subheading</h2> <h3>This is a smaller subheading</h3>

<h1> to <h6>: Represents different levels of headings, with <h1> being the most important and <h6> the least.

5. HTML Paragraphs

Paragraphs are used to write blocks of text:<p>This is a paragraph of text. HTML automatically adds some space before and after paragraphs.</p>

<p>: Wraps around blocks of text to create paragraphs.

6. HTML Line Breaks and Horizontal Lines

Line Break (<br>): Used to create a line break (new line) within text.

Horizontal Line (<hr>): Used to create a thematic break or a horizontal line:

<p>This is the first line.<br>This is the second line.</p> <hr> <p>This is text after a horizontal line.</p>

7. HTML Comments

Comments are not displayed in the browser and are used to explain the code: <p>This text will be visible.</p>

: Wraps around text to make it a comment.

8. HTML Links

Links allow users to navigate from one page to another:<a href="https://www.example.com">Click here to visit Example</a>

<a>: The anchor tag creates a hyperlink. The href attribute specifies the URL to navigate to when the link is clicked.

9. HTML Images

Images can be embedded using the <img> tag:<img src="image.jpg" alt="Description of the image">

<img>: Used to embed images. The src attribute specifies the image source, and alt provides descriptive text.

10. HTML Lists

HTML supports ordered and unordered lists:

Unordered List (<ul>):

. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Ordered List (<ol>):

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

<ul>: Creates an unordered list with bullet points.

<ol>: Creates an ordered list with numbers.

<li>: Represents each item in a list.

11. HTML Metadata

Metadata is data that provides information about other data. It is placed within the <head> section and includes information like character set, author, and page description:<meta charset="UTF-8"> <meta name="description" content="An example of HTML basics"> <meta name="keywords" content="HTML, tutorial, basics"> <meta name="author" content="Saide Hossain">

12. HTML Document Structure Summary

Here’s a simple HTML document combining all the basic elements:<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> <meta charset="UTF-8"> <meta name="description" content="Learning HTML Basics"> <meta name="keywords" content="HTML, basics, tutorial"> <meta name="author" content="Saide Hossain"> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first webpage. I'm learning HTML!</p> <p>HTML is easy to learn and fun to use.</p> <hr> <h2>Here are some of my favorite websites:</h2> <ul> <li><a href="https://www.example.com">Example.com</a></li> <li><a href="https://www.anotherexample.com">Another Example</a></li> </ul> <h2>My Favorite Image:</h2> <img src="https://images.pexels.com/photos/287240/pexels-photo-287240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="300" alt="A beautiful view"> <hr> <p>Contact me at <a href="mailto:[email protected]">[email protected]</a></p> </body> </html>

Key Takeaways

HTML is all about using tags to structure content.

The basic building blocks include headings, paragraphs, lists, links, images, and more.

Every HTML document needs a proper structure, starting with <!DOCTYPE html> and wrapping content within <html>, <head>, and <body> tags.

With these basics, you can start building your web pages!

Source: HTML TUTE BLOG

#html #css #web development

0 notes